From f68c6bc0914b3f332a76904ca063766dd537fa7e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=9C=A8=E5=B0=8F=E9=80=8F=E6=98=8E=E3=83=BB=E5=AE=B8?= =?UTF-8?q?=E2=9C=A8?= <1272742391@qq.com> Date: Sat, 8 Jun 2019 23:35:53 +0800 Subject: [PATCH] Support comment --- README.md | 5 +- avatarURL.js | 52 ++++++++++- commentlist.svg | 11 +++ index.html | 238 ++++++++++++++++++++++++++++++++++++++++++------ 4 files changed, 276 insertions(+), 30 deletions(-) create mode 100644 commentlist.svg diff --git a/README.md b/README.md index cde5ccb..545d240 100644 --- a/README.md +++ b/README.md @@ -10,10 +10,9 @@ ### 更新记录 -#### TODO +#### 2019.6.8 -* 添加评论 -* ~~7.x 版微信的白色界面~~什么时候张小龙学会做产品了就考虑加上(　ﾟ 3ﾟ) +还是根据 [Issue #4](https://github.com/TransparentLC/WechatMomentScreenshot/issues/4)，增加了在生成的截图中设定评论的功能～ฅ•̀∀•́ฅ #### 2019.6.6 diff --git a/avatarURL.js b/avatarURL.js index 7964865..8375c53 100644 --- a/avatarURL.js +++ b/avatarURL.js @@ -348,5 +348,55 @@ var avatarURL = [ 'https://ae01.alicdn.com/kf/HTB1f.Q9N3HqK1RjSZFEq6AGMXXaA.jpg', 'https://ae01.alicdn.com/kf/HTB1ZBQ9NZbpK1RjSZFyq6x_qFXaD.jpg', 'https://ae01.alicdn.com/kf/HTB1GaI1N9zqK1RjSZFLq6An2XXaN.jpg', -'https://ae01.alicdn.com/kf/HTB1zpc7N7voK1RjSZFDq6xY3pXa5.jpg' +'https://ae01.alicdn.com/kf/HTB1zpc7N7voK1RjSZFDq6xY3pXa5.jpg', +'https://ae01.alicdn.com/kf/HTB1axxiXvBj_uVjSZFpq6A0SXXaR.jpg', +'https://ae01.alicdn.com/kf/HTB1lC3bb8Kw3KVjSZFOq6yrDVXal.jpg', +'https://ae01.alicdn.com/kf/HTB158LUaQxz61VjSZFrq6xeLFXay.jpg', +'https://ae01.alicdn.com/kf/HTB1SVdjXvxj_uVjSZFqq6yboFXas.jpg', +'https://ae01.alicdn.com/kf/HTB1.XL_b8OD3KVjSZFFq6An9pXau.jpg', +'https://ae01.alicdn.com/kf/HTB195cdb8Cw3KVjSZFuq6AAOpXaz.jpg', +'https://ae01.alicdn.com/kf/HTB1EVscb8Cw3KVjSZFlq6AJkFXak.jpg', +'https://ae01.alicdn.com/kf/HTB1kusgbYys3KVjSZFnq6xFzpXaX.jpg', +'https://ae01.alicdn.com/kf/HTB1XIn9b2WG3KVjSZPcq6zkbXXas.jpg', +'https://ae01.alicdn.com/kf/HTB1kf3fbW5s3KVjSZFNq6AD3FXaZ.jpg', +'https://ae01.alicdn.com/kf/HTB1DXz.b81D3KVjSZFyq6zuFpXab.jpg', +'https://ae01.alicdn.com/kf/HTB1g9RjXvxj_uVjSZFqq6yboFXai.jpg', +'https://ae01.alicdn.com/kf/HTB1DKUeb8Cw3KVjSZFuq6AAOpXa7.jpg', +'https://ae01.alicdn.com/kf/HTB1bKfWaQxz61VjSZFtq6yDSVXaZ.jpg', +'https://ae01.alicdn.com/kf/HTB1J9H8b4iH3KVjSZPfq6xBiVXab.jpg', +'https://ae01.alicdn.com/kf/HTB13g29b.WF3KVjSZPhq6xclXXan.jpg', +'https://ae01.alicdn.com/kf/HTB1nvj9b.CF3KVjSZJnq6znHFXaC.jpg', +'https://ae01.alicdn.com/kf/HTB1P.28b4iH3KVjSZPfq6xBiVXa0.jpg', +'https://ae01.alicdn.com/kf/HTB1M6ZfbW5s3KVjSZFNq6AD3FXaj.jpg', +'https://ae01.alicdn.com/kf/HTB1Kmb_b9SD3KVjSZFKq6z10VXaF.jpg', +'https://ae01.alicdn.com/kf/HTB1Enn_b8WD3KVjSZFsq6AqkpXaa.jpg', +'https://ae01.alicdn.com/kf/HTB1xKY9b3KG3KVjSZFLq6yMvXXaR.jpg', +'https://ae01.alicdn.com/kf/HTB1V8ofbW5s3KVjSZFNq6AD3FXaK.jpg', +'https://ae01.alicdn.com/kf/HTB1s8n9b.WF3KVjSZPhq6xclXXa6.jpg', +'https://ae01.alicdn.com/kf/HTB14IUeb8Cw3KVjSZR0q6zcUpXag.jpg', +'https://ae01.alicdn.com/kf/HTB1b6kcb8Gw3KVjSZFwq6zQ2FXau.jpg', +'https://ae01.alicdn.com/kf/HTB190Meb8Cw3KVjSZR0q6zcUpXat.jpg', +'https://ae01.alicdn.com/kf/HTB1uD_9b.GF3KVjSZFoq6zmpFXaw.jpg', +'https://ae01.alicdn.com/kf/HTB1FzH9b3KG3KVjSZFLq6yMvXXas.jpg', +'https://ae01.alicdn.com/kf/HTB1KfY.b8OD3KVjSZFFq6An9pXaX.jpg', +'https://ae01.alicdn.com/kf/HTB1d8gfbWSs3KVjSZPiq6AsiVXa6.jpg', +'https://ae01.alicdn.com/kf/HTB1iGQXb8GE3KVjSZFhq6AkaFXau.jpg', +'https://ae01.alicdn.com/kf/HTB1QBQfbWSs3KVjSZPiq6AsiVXab.jpg', +'https://ae01.alicdn.com/kf/HTB1atn.b75E3KVjSZFCq6zuzXXaC.jpg', +'https://ae01.alicdn.com/kf/HTB1QkchbYys3KVjSZFnq6xFzpXaW.jpg', +'https://ae01.alicdn.com/kf/HTB11JY.b75E3KVjSZFCq6zuzXXa1.jpg', +'https://ae01.alicdn.com/kf/HTB1BXv.b21G3KVjSZFkq6yK4XXan.jpg', +'https://ae01.alicdn.com/kf/HTB1LyD.b8OD3KVjSZFFq6An9pXaA.jpg', +'https://ae01.alicdn.com/kf/HTB1PQQXb7WE3KVjSZSyq6xocXXag.jpg', +'https://ae01.alicdn.com/kf/HTB1locfbWSs3KVjSZPiq6AsiVXaL.jpg', +'https://ae01.alicdn.com/kf/HTB1PqD_b.CF3KVjSZJnq6znHFXaF.jpg', +'https://ae01.alicdn.com/kf/HTB1dyT.b.uF3KVjSZK9q6zVtXXaq.jpg', +'https://ae01.alicdn.com/kf/HTB11_MhbYys3KVjSZFnq6xFzpXas.jpg', +'https://ae01.alicdn.com/kf/HTB1zSH_b79E3KVjSZFGq6A19XXaN.jpg', +'https://ae01.alicdn.com/kf/HTB16j_9b2WG3KVjSZFgq6zTspXao.jpg', +'https://ae01.alicdn.com/kf/HTB18cb_b.GF3KVjSZFmq6zqPXXav.jpg', +'https://ae01.alicdn.com/kf/HTB1izD.b.GF3KVjSZFvq6z_nXXaB.jpg', +'https://ae01.alicdn.com/kf/HTB160f_b.GF3KVjSZFmq6zqPXXas.jpg', +'https://ae01.alicdn.com/kf/HTB1OPD.b75E3KVjSZFCq6zuzXXaG.jpg', +'https://ae01.alicdn.com/kf/HTB1TOsgbWWs3KVjSZFxq6yWUXXav.jpg' ] \ No newline at end of file diff --git a/commentlist.svg b/commentlist.svg new file mode 100644 index 0000000..0e1c5fa --- /dev/null +++ b/commentlist.svg @@ -0,0 +1,11 @@ + + + + + + diff --git a/index.html b/index.html index 03ae23d..f298c54 100644 --- a/index.html +++ b/index.html @@ -209,6 +209,35 @@ height: 36px; } + .commentItem { + padding: 22px 0; + } + + .commentName { + color: #576b95; + font-size: 34px; + } + + .commentTime { + color: #808080; + font-size: 34px; + float: right; + margin-right: 25px; + } + + .commentText { + font-size: 39px; + line-height: 1.25em; + color: #454545; + margin-top: 15px; + } + + .commentAvatar { + width: 88px; + height: 88px; + display: inline-block; + } + .heimu{ background-color: #000000; color: #000000; @@ -242,7 +271,7 @@
- +
@@ -271,7 +300,7 @@
@@ -405,6 +434,43 @@
+
+ +
+
+
+ +
+
+
+ + + + + + + + + + + +
#用户名评论内容时间
+
+
+
+ +
+
+ +
+
+
+
+
@@ -427,7 +493,7 @@ - +
@@ -491,6 +557,10 @@
+
+ +
+
+
+
添加评论
+
+
+
+
+ + +
+
+
+
+ + + +
+
+
+
+ + +
+
+
+ + +
+
+ + +
+
+ + +
+
+
+
+ + +
+
+
生成完毕| ω・`)
@@ -571,7 +684,7 @@
- +
扫一扫(`ε´ )
左：微信 右：支付宝
@@ -631,27 +744,75 @@ }, function () { }); } + //删除所有发表的九宫格图片 function clearMultiImage() { for (var i = 1; i <= 9; i++) { document.getElementById('image' + i).style.backgroundImage = ''; } } + //将时间转换为微信中显示的格式 + function getTimeString(currentDate, specificDate) { + var cd = new Date(currentDate.getTime() - currentDate.getTimezoneOffset() * 60 * 1000 - (currentDate.getTime() - currentDate.getTimezoneOffset() * 60 * 1000) % (60 * 60 * 24 * 1000)); + var sd = new Date(specificDate.getTime() - specificDate.getTimezoneOffset() * 60 * 1000 - (specificDate.getTime() - specificDate.getTimezoneOffset() * 60 * 1000) % (60 * 60 * 24 * 1000)); + if (cd.getTime() == sd.getTime()) { + return ((specificDate.getHours() < 10) ? ('0' + specificDate.getHours()) : specificDate.getHours()) + ':' + ((specificDate.getMinutes() < 10) ? ('0' + specificDate.getMinutes()) : specificDate.getMinutes()); + } else if (cd.getTime() - sd.getTime() == 60 * 60 * 24 * 1000) { + return '昨天 ' + ((specificDate.getHours() < 10) ? ('0' + specificDate.getHours()) : specificDate.getHours()) + ':' + ((specificDate.getMinutes() < 10) ? ('0' + specificDate.getMinutes()) : specificDate.getMinutes()); + } else { + return specificDate.getFullYear() + '年' + (specificDate.getMonth() + 1) + '月' + specificDate.getDate() + '日 ' + ((specificDate.getHours() < 10) ? ('0' + specificDate.getHours()) : specificDate.getHours()) + ':' + ((specificDate.getMinutes() < 10) ? ('0' + specificDate.getMinutes()) : specificDate.getMinutes()); + } + } + + //复制短链接 function copyGitLink() { document.getElementById('gitLink').style.display = 'block'; - var range = document.createRange(); - range.selectNodeContents(document.getElementById('gitLink')); - var selection = document.getSelection(); - selection.removeAllRanges(); - selection.addRange(range); - document.execCommand('Copy'); - selection.removeAllRanges(); + var range = document.createRange(); + range.selectNodeContents(document.getElementById('gitLink')); + var selection = document.getSelection(); + selection.removeAllRanges(); + selection.addRange(range); + document.execCommand('Copy'); + selection.removeAllRanges(); mdui.snackbar({ message: '已复制到剪贴板～( っ*\'ω\'*c)' - }); + }); document.getElementById('gitLink').style.display = 'none'; } + var commentList = Array(); + + //添加评论 + function addComment(avatar, name, content, date) { + commentList.push({ + 'avatar': avatar, + 'name': name, + 'content': content, + 'date': date + }); + + var tr = document.createElement('tr'); + tr.innerHTML = '' + (document.getElementById('configCommentList').childElementCount + 1) + '' + name + '' + content + '' + date.toLocaleString() + ''; + document.getElementById('configCommentList').append(tr); + } + + //删除（最后一条）评论 + function removeComment() { + if (commentList.length) { + commentList.pop(); + document.getElementById('configCommentList').removeChild(document.getElementById('configCommentList').childNodes[document.getElementById('configCommentList').childElementCount]); + } + } + + //替换表情文字和换行符为对应的HTML标签 + function emoticonReplace(text) { + text = text.replace(/\r\n/g, '
').replace(/\n/g, '
'); + for (var i = 0; i < emoticon.length; i++) { + text = text.replace(new RegExp(emoticon[i].name, 'g'), ''); + } + return text; + } + //设置界面显示 document.getElementById('configTypeText').onclick = function () { document.getElementById('configWebsite').style.display = 'none'; @@ -694,6 +855,9 @@ document.getElementById('configPostDate').valueAsDate = date; document.getElementById('configPostTimeHour').value = date.getHours(); document.getElementById('configPostTimeMinute').value = date.getMinutes(); + document.getElementById('configCommentDate').valueAsDate = date; + document.getElementById('configCommentTimeHour').value = date.getHours(); + document.getElementById('configCommentTimeMinute').value = date.getMinutes(); document.getElementById('configLike').value = Math.floor(20 * Math.random()); //检验数值是否合法 @@ -725,6 +889,20 @@ document.getElementById('configScreenshotTimeMinute').value = 0; } }) + document.getElementById('configCommentTimeHour').addEventListener('input', function () { + if (document.getElementById('configCommentTimeHour').value > 23) { + document.getElementById('configCommentTimeHour').value = 23; + } else if (document.getElementById('configCommentTimeHour').value < 0) { + document.getElementById('configCommentTimeHour').value = 0; + } + }) + document.getElementById('configCommentTimeMinute').addEventListener('input', function () { + if (document.getElementById('configCommentTimeMinute').value > 59) { + document.getElementById('configCommentTimeMinute').value = 59; + } else if (document.getElementById('configCommentTimeMinute').value < 0) { + document.getElementById('configCommentTimeMinute').value = 0; + } + }) document.getElementById('configLike').addEventListener('input', function () { if (document.getElementById('configLike').value < 0) { document.getElementById('configLike').value = 0; @@ -788,12 +966,7 @@ } //表情替换 - document.getElementById('text').innerText = document.getElementById('text').innerText.replace(/\r\n/g, '
'); - document.getElementById('text').innerText = document.getElementById('text').innerText.replace(/\n/g, '
'); - for (var i = 0; i < emoticon.length; i++) { - document.getElementById('text').innerText = document.getElementById('text').innerText.replace(new RegExp(emoticon[i].name, 'g'), ''); - } - document.getElementById('text').innerHTML = document.getElementById('text').innerText; + document.getElementById('text').innerHTML = emoticonReplace(document.getElementById('text').innerText); //九宫格模式设定 if (document.getElementById('configTypeMultiImage').checked) { @@ -850,14 +1023,7 @@ configScreenshotDate.setHours(document.getElementById('configScreenshotTimeHour').value); configScreenshotDate.setMinutes(document.getElementById('configScreenshotTimeMinute').value); - if (document.getElementById('configScreenshotDate').valueAsDate.getTime() == document.getElementById('configPostDate').valueAsDate.getTime()) { - document.getElementById('time').innerText = ((configPostDate.getHours() < 10) ? ('0' + configPostDate.getHours()) : configPostDate.getHours()) + ':' + ((configPostDate.getMinutes() < 10) ? ('0' + configPostDate.getMinutes()) : configPostDate.getMinutes()); - } else if (document.getElementById('configScreenshotDate').valueAsDate.getTime() - document.getElementById('configPostDate').valueAsDate.getTime() == 60 * 60 * 24 * 1000) { - document.getElementById('time').innerText = '昨天 ' + ((configPostDate.getHours() < 10) ? ('0' + configPostDate.getHours()) : configPostDate.getHours()) + ':' + ((configPostDate.getMinutes() < 10) ? ('0' + configPostDate.getMinutes()) : configPostDate.getMinutes()); - } else { - document.getElementById('time').innerText = configPostDate.getFullYear() + '年' + (configPostDate.getMonth() + 1) + '月' + configPostDate.getDate() + '日 ' + ((configPostDate.getHours() < 10) ? ('0' + configPostDate.getHours()) : configPostDate.getHours()) + ':' + ((configPostDate.getMinutes() < 10) ? ('0' + configPostDate.getMinutes()) : configPostDate.getMinutes()); - } - + document.getElementById('time').innerText = getTimeString(configScreenshotDate, configPostDate); document.getElementById('topBarTime').innerText = ((document.getElementById('configScreenshotTimeHour').value < 10) ? ('0' + document.getElementById('configScreenshotTimeHour').value) : document.getElementById('configScreenshotTimeHour').value) + ':' + ((document.getElementById('configScreenshotTimeMinute').value < 10) ? ('0' + document.getElementById('configScreenshotTimeMinute').value) : document.getElementById('configScreenshotTimeMinute').value); if (document.getElementById('configApp') != '') { @@ -881,6 +1047,26 @@ avatarSource.splice(avatarUsedIndex, 1) } + //加入评论区 + document.getElementById('commentList').innerHTML = ''; + if (document.getElementById('configShowComment').checked && commentList.length) { + document.getElementById('comment').style.display = 'block'; + for (var i = 0; i < commentList.length; i++) { + document.getElementById('commentList').innerHTML += [ + '
', + '
', + '
', + ' ' + commentList[i].name + '', + ' ' + getTimeString(configScreenshotDate, commentList[i].date) + '', + '
' + emoticonReplace(commentList[i].content) + '
', + '
', + '
' + ].join(''); + } + } else { + document.getElementById('comment').style.display = 'none'; + } + //显示用于生成图片的div var height = Number(document.getElementById('configHeight').value); document.getElementById('fakeWechatMoment').style.display = 'block';