用一串JS代码解锁QQ表情库，教你在项目中无缝集成，从原理到实操全流程解析！

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

html代码

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

JavaScript代码

<script>
-(function () {
var ext = ".gif";
var href = "https://qzonestyle.gtimg.cn/qzone/em/e";
var em = document.getElementById("em");
for (var i = 100; i < 204; i++) {
var liNode = document.createElement("img");
liNode.src = href + i + ext; 
em.insertBefore(liNode, em.childNodes[i]);
}

for (var i = 7000; i < 7450; i++) {
var liNode = document.createElement("img");
liNode.src = href + i + ext; 
em.insertBefore(liNode, em.childNodes[i]);
}

for (var i = 328507; i < 328577; i++) {
var liNode = document.createElement("img");
liNode.src = href + i + ext; 
em.insertBefore(liNode, em.childNodes[i]);
}

for (var i = 328581; i < 328592; i++) {
var liNode = document.createElement("img");
liNode.src = href + i + ext; 
em.insertBefore(liNode, em.childNodes[i]);
}

for (var i = 328640; i < 328710; i++) {
var liNode = document.createElement("img");
liNode.src = href + i + ext; 
em.insertBefore(liNode, em.childNodes[i]);
}

})()
</script>

代码解析

这段代码首先定义了一个变量 ext，用于存储表情图片的文件扩展名（这里是 .gif）。接下来，使用变量 href 存储表情图片的基本链接地址。然后，通过 document.getElementById("em") 获取带有 ID 为 "em" 的 HTML 元素节点，并将其存储在变量 em 中。

然后，代码使用一系列的 for 循环，逐个创建 <img> 元素节点，并将表情图片的完整链接赋值给每个 <img> 元素的 src 属性。然后，通过 em.insertBefore(liNode, em.childNodes[i]) 将每个 <img> 元素插入到 ID 为 "em" 的元素节点中的相应位置。

这样，通过循环遍历和动态创建 <img> 元素节点的方式，就实现了在指定的 HTML 元素中加载 QQ 表情的功能。

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

代码演示