输入QQ号自动获取头像和昵称

你好呀，我是小邹。

最近个人博客网站进行了一波小更新，本文记录一下具体的实现细节。

欢迎大家留言：https://www.hqxiaozou.top/about

评论 - 输入QQ号自动获取头像和昵称

HTML：

<img id="avatar" src="https://www.hqxiaozou.top/upload/2022/8/payQRCode20220814120847524.png" 
class="ui mini circular image">
<input type="text" id="QQ" name="qq" placeholder="输入QQ号自动获取昵称头像" required="required"/>
<input type="text" id="nickname" name="nickname" placeholder="昵称" required="required"/>

js：

<!--根据QQ自动获取头像信息-->
    $('#QQ').blur(function () {
        var QQ = $("#QQ").val();
        $.ajax({
            url: "https://api.usuuu.com/qq/" + QQ,
            type: "GET",
            dataType: "json",
            success: function (result) {
                console.log(result["data"].name, result["data"].avatar);
                $("#nickname").val(result["data"].name);
                var obj = document.getElementById("avatar");
                obj.src = result["data"].avatar;
                $("#avatar").val(result["data"].avatar);
                $("[name='email']").val(QQ + '@qq.com');
            }
        });
    });

留言板 - 音乐播放器

引入相关js文件：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js"></script>

在留言板页面添加音乐播放器：

<!--音乐播放器-->
<meting-js
        server="netease"
        type="playlist"
        id="3778678"
        mini="true"
        artist="rainymood"
        fixed="true">
</meting-js>

一个 MetingJS 播放器至少需要三个参数：

• server 指定调用的 API ，可选 netease, tencent, kugou, xiami, baidu ，分别对应网易云音乐、QQ音乐、酷狗音乐、虾米音乐、百度音乐
• type 指定调用类型，可选 song, playlist, album, search, artist ，分别对应单曲、歌单、专辑、搜索结果、艺术家
• id 指定调用的 id ，一般可以在地址栏中找到

评论 - 简单的回复功能

HTML：

<div class="actions">
    <a class="reply" data-commentid="1" 
       th:data-commentnickname="${comment.nickname}"
       onclick="reply(this)">回复</a>
</div>

js：

function reply(obj) {
    let commentNickname = $(obj).data('commentnickname');
    //添加信息到评论表单
    $("[name='content']").val("@" + commentNickname + " ");
}

留言板 - 新增赞赏（点击弹出赞赏图片，再次点击可隐藏）

html：

<div class="ui center aligned basic segment">
     <div class="ui orange basic circular button" notice-key="msg" for-key="name"
          for-value="html" contenteditable="false" onclick="showdiv()">赞赏
     </div>
</div>
<div id="img_div" style="display:none;"><img src="/img/QRcode.png" style="width: 350px;height: 350px"/></div>

js：

function showdiv() {
    if (document.getElementById("img_div").style.display === "block") {
        document.getElementById("img_div").style.display = "none";
    } else {
        document.getElementById("img_div").style.display = "block";
    }
}

文章 - 点击查看大图

js：

//点击图片查看大图
const img = document.images;
for (let i = 0; i < img.length; i++) {
    $(img[i]).bind("click", function () {
        //新开一个页面
        window.open($(this).attr('src'), '_blank');
    });
}

本站文章除注明转载/出处外，均为本站原创或翻译，转载前请务必署名，转载请标明出处。
最后编辑时间为: 2022/08/21 11:31:08