给评论来点大爆炸吧！ - Jdeal

不过为了实现之前说的，假设不输入 emoji 只是某些字段也可以触发，那我们可以先创建一个对象来存储要匹配的词组和对应的 emoji，如下：

// 创建对象存储匹配词组和对应的 emoji
const keywordToEmoji = {
  生日快乐: "\u{1F382}", // 蛋糕 emoji
  恭喜发财: "\u{1F9E7}"  // 红包 emoji
  // 添加更多词组和对应 emoji
}

然后再遍历关键词组映射对象，就齐活了。

// 检查输入文本中是否有匹配词组
for (const [keyword, emoji] of Object.entries(keywordToEmoji)) {
      if (commentText.includes(keyword)) {
        // 设置固定数量的 emoji
        const fixedEmojiCount = 10;
        for (let i = 0; i < fixedEmojiCount; i++) {
          setTimeout(() => {
            
          // 放入前面的 emoji 生成 div 函数，或者将生成 div 打包为一个函数直接调用

          }, delay * 100); // 每个 emoji 的下落延迟时间
          delay++;
        }
      }
}

这样就实现了在没有 emoji 的情况下，我们也可以检查某些词组来触发特效，最后再加上监听评论 Ajax 事件或者按钮事件之类，就可以成功触发上面的函数了。

// 监听评论提交事件，typecho示例：
document.addEventListener("typechoCommentPosted", function (e) {
  if (e.detail.status === "success") {
    checkForEmoji(e.detail.text);
  }
});

当然最后别忘了加上你喜欢的 css，结束！

.emoji-container{
  position: fixed;
  top: -20%;
  right: 50%;
  transform: translateX(50%);
  width: 40px;
  height: 40px;
  font-size:40px;
  border-radius: 50%;
  animation-name: riseUp;
  animation-duration: 8s;
  animation-fill-mode: both;
  z-index: 9999999;
}
@keyframes riseUp {
  0% { top: -20%; opacity: 0; }
  40% { top: 60%; opacity: 1; }
  80% { top: 90%; opacity: 0; }
  100% { top: 100%; opacity: 0; }
}

基本上整体思路和逻辑就是这样，不过实际应用中，我们可能要考虑到更多问题，例如是/否只含有 emoji，含有 emoji 的情况下是/否含有关键词，是/否只含有关键词等情况等等。

目前我大概的逻辑就是如果只含有多个 emoji，就随机选取多个 emoji，如果同时含有 emoji 和关键词，就一起显示。

效果图就不放了，可以评论区试试，哈哈。

关键词目前也设置了几个，也许哪天你评论的时候就会触发哈~

收工，关机，明天周末啦，周末愉快各位！

上一页 1 2