一串代码获取 QQ 所有表情包

六月 09, 2023 / Mr.x / 4阅读 / 0评论/ 分类: 实用
一串代码获取 QQ 所有表情包 — 荣小站
前端 JavaScript 资源

一串代码获取 QQ 所有表情包

获取 QQ 所有的表情包，包括 emoji 和动态 gif。

腾讯 QQ 的表情包资源是对外开放的，可以通过固定的 URL 规律批量获取。这段代码能一次性获取上百个 QQ 表情，包括经典小黄脸和后来的emoji表情。

使用效果

运行代码后，会在指定位置生成一个表情网格（由于图片较多，这里展示部分预览）：

QQ 经典表情预览（e100 - e203）

完整代码

HTML 部分

<div id="em"></div>

JavaScript 部分

-(function () {
    var ext = ".gif";
    var href = "http://qzonestyle.gtimg.cn/qzone/em/e";
    var em = document.getElementById("em");
    
    // 经典小黄脸 e100 - e203
    for (var i = 100; i < 204; i++) {
        var liNode = document.createElement("img");
        liNode.src = href + i + ext; 
        em.insertBefore(liNode, em.childNodes[i]);
    }
    
    // 更多表情包...
})();

代码解析

第一步：定义基础变量
代码首先定义了变量 ext（文件扩展名 .gif）和变量 href（表情图片的基础链接地址）。然后通过 document.getElementById("em") 获取页面中 ID 为 "em" 的元素。

第二步：循环创建图片元素
通过一系列 for 循环，逐个创建 <img> 元素，并将表情图片的完整链接赋值给每个 img 元素的 src 属性。

第三步：插入页面
使用 em.insertBefore(liNode, em.childNodes[i]) 将每个 img 元素插入到指定的 DOM 节点中。

表情资源分布

范围数量类型
e100 - e203~104 个经典小黄脸
e7000 - e7449~450 个动态表情
e328507 - e328576~70 个emoji 表情
e328581 - e328591~11 个emoji 表情
e328640 - e328709~70 个emoji 表情

完整代码（含所有区间）

-(function () {
    var ext = ".gif";
    var href = "http://qzonestyle.gtimg.cn/qzone/em/e";
    var em = document.getElementById("em");
    
    // 经典小黄脸 e100 - e203
    for (var i = 100; i < 204; i++) {
        var liNode = document.createElement("img");
        liNode.src = href + i + ext; 
        em.insertBefore(liNode, em.childNodes[i]);
    }
    
    // 动态表情 e7000 - e7449
    for (var i = 7000; i < 7450; i++) {
        var liNode = document.createElement("img");
        liNode.src = href + i + ext; 
        em.insertBefore(liNode, em.childNodes[i]);
    }
    
    // emoji 表情（多段）
    for (var i = 328507; i < 328577; i++) { ... }
    for (var i = 328581; i < 328592; i++) { ... }
    for (var i = 328640; i < 328710; i++) { ... }
})();

⚠️ 注意：这段代码假设在 HTML 中存在一个 ID 为 "em" 的元素节点。要使代码正常工作，需要确保在页面上存在一个符合要求的元素，并根据需要调整表情图片的链接地址和循环参数。

📢 文章来自：微生之最

#一串代码获取 QQ 所有表情包(1)

评论