WordPress网站实现“网易云音乐热评”页面

在使用网易云音乐时,经常在评论区看到与之产生共鸣的评论。过了很久,那种感觉仍然不会消失。你能在这倾听别人的故事,亦或许是你的故事。

演示地址: 网易云热评

演示图片:

如何设置

一、进入后台=》页面=》新建页面

wordpress新建页面后,自行编辑添加一些想要的文本与效果。

二、在内容中添加一下代码(文本编辑模式)

<div id="codeWangyiyun"></div>

三、在Footer中插入如下代码

注:因为我的主题自带网站底部自定义JS代码功能,所以直接添加。如主题无此功能,自行编辑Footer文件。

<script>
let wangyiyunDiv = document.getElementById("codeWangyiyun");
wangyiyunDiv.style.textAlign = 'center';
let xhrWangyiyun = new XMLHttpRequest();
function setWangyiyun(){
wangyiyunDiv.innerText = '加载中 · · · ';
xhrWangyiyun.open('get', 'https://api.comments.hk/');
xhrWangyiyun.onreadystatechange = function () {
if (xhrWangyiyun.readyState === 4) {
let dataWangyiun = JSON.parse(xhrWangyiyun.responseText);
let i = 5;
wangyiyunDiv.innerHTML = '<h3><span style="user-select:none;font-size:40px">“</span>' + dataWangyiun["comment_content"] + '</h3>' +
'<p style="text-align: right">Commented by ' + dataWangyiun["comment_nickname"] + '</p>' +
'<h4>《' + dataWangyiun.title + '》—— ' + dataWangyiun["author"] + '</h4>' +
'<audio controls="controls" src="' + dataWangyiun["mp3_url"] + '"></audio><br>' +
'<div style="display:block;height:40px;line-height:20px"><i class="" style="color:red;cursor: pointer;font-weight: bold;user-select:none;font-size:25px" id="huanWangyiyun">'+i+'</i></div>';
let huan = document.getElementById("huanWangyiyun");
let daojishi = setInterval(function () {
huan.innerText = (--i).toString();
if (i === 0) {
clearInterval(daojishi);
huan.innerText = "";
huan.setAttribute("class", "fa fa-undo");
huan.onclick = function () {
setWangyiyun();
}
}
}, 1000);
}
};
xhrWangyiyun.send();
}
setWangyiyun();
</script>

发表评论

花神博客致力于网络资源收集。

进入首页 会员中心