原生前端中整合emoji表情

最新推荐文章于 2024-07-25 15:19:10 发布

小黄儿_9988

最新推荐文章于 2024-07-25 15:19:10 发布

阅读量455

点赞数 11

文章标签：前端

本文链接：https://blog.csdn.net/qq_40850583/article/details/139336547

版权

仿微博评论、QQ空间留言的功能时看到了小表情的功能，想自己动手试试，通过查资料，发现emoji其实就是一些特殊的字符，类似于 

菜鸟教程上有具体的值，参考链接:Emoji 参考手册 | 菜鸟教程 (runoob.com)

我做的效果如下:

关键代码：

1.将emoji值存入一个数组

 let Emoji = [
        '&#128512;',
        '&#128513;',
        '&#128514;',
        '&#128515;',
        '&#128516;',
        '&#128517;',
        '&#128518',
        '&#128519',
        '&#128520',
        '&#128521',
        '&#128522',
        '&#128523',
        '&#128524',
        '&#128525',
        '&#128526',
        '&#128527',
        '&#128528',
        '&#128529',
        '&#128530',
        '&#128530',
        '&#128531',
        '&#128532',
        '&#128533',
        '&#128534',
        '&#128535',
        '&#128536',
        '&#128537',
        '&#128538',
        '&#128539',
        '&#128540',
        '&#128541',
        '&#128542',
        '&#128543',
        '&#128544',
        '&#128545',
        '&#128546',
        '&#128547',
        '&#128548',
        '&#128549',
        '&#128550',
        '&#128551',
        '&#128552',
        '&#128553',
        '&#128554',
        '&#128555',
        '&#128556',
        '&#128557',
        '&#128558',
        '&#128559'
      ]

2.使用window.onload事件将表情包渲染到页面

  window.onload = function () {
        Emoji.forEach(item => {
          let li = document.createElement('li')
          li.innerHTML = item
          emoji.appendChild(li)
        })
      }

其余就是一些基础代码啦

完整代码如下

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Emoji</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      ul {
        width: 200px;
        display: flex;
        flex-wrap: wrap;
        /* border: 1px solid #ccc; */
        justify-content: flex-start;
        margin-top: 5px;
      }
      ul li {
        list-style: none;
        font-size: 20px;
        flex: 1;
        cursor: pointer;
        /* margin-top: 10px; */
        /* border: 1px solid #ccc; */
      }
      li:hover {
        background-color: #eee;
      }
      .box {
        margin: 10px;
      }
      p {
        font-size: 10px;
        /* color: #eee; */
      }
      .biaoq {
        margin-top: 10px;
      }
      img {
        width: 20px;
        height: 20px;
      }
      .active {
        display: none;
      }
    </style>
  </head>
  <body>
    <!-- 文本域 -->
    <textarea name="" id=""></textarea>
    <!-- 按钮 -->
    <button>确认</button>
    <!-- 表情操作区 -->
    <div class="box">
      <img src="./images/表情.jpg" alt="" />
      <div class="biaoq active">
        <p>全部表情</p>
        <ul class="emoji"></ul>
      </div>
    </div>

    <script>
      // 表情包字符数组
      let Emoji = [
        '&#128512;',
        '&#128513;',
        '&#128514;',
        '&#128515;',
        '&#128516;',
        '&#128517;',
        '&#128518',
        '&#128519',
        '&#128520',
        '&#128521',
        '&#128522',
        '&#128523',
        '&#128524',
        '&#128525',
        '&#128526',
        '&#128527',
        '&#128528',
        '&#128529',
        '&#128530',
        '&#128530',
        '&#128531',
        '&#128532',
        '&#128533',
        '&#128534',
        '&#128535',
        '&#128536',
        '&#128537',
        '&#128538',
        '&#128539',
        '&#128540',
        '&#128541',
        '&#128542',
        '&#128543',
        '&#128544',
        '&#128545',
        '&#128546',
        '&#128547',
        '&#128548',
        '&#128549',
        '&#128550',
        '&#128551',
        '&#128552',
        '&#128553',
        '&#128554',
        '&#128555',
        '&#128556',
        '&#128557',
        '&#128558',
        '&#128559'
      ]
      // 获取DOM元素
      let img = document.querySelector('img')
      let biaoq = document.querySelector('.biaoq')
      let list = document.querySelectorAll('li')
      let emoji = document.querySelector('.emoji')
      let button = document.querySelector('button')
      let textarea = document.querySelector('textarea')
      // 效果中的小表情  => 点击小表情加载其它表情
      img.onclick = function () {
        biaoq.classList.toggle('active')
      }
      // 初始化页面内容
      window.onload = function () {
        Emoji.forEach(item => {
          let li = document.createElement('li')
          li.innerHTML = item
          emoji.appendChild(li)
        })
      }
      // 点击表情包
      emoji.onclick = function (e) {
        textarea.value += e.target.innerHTML
      }
      // 点击按钮渲染文本域中的内容
      button.onclick = function () {
        console.log(textarea.value)
        textarea.value = ''
      }
    </script>
  </body>
</html>

小黄儿_9988

关注

11
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
原生前端中整合emoji表情

仿微博评论、QQ空间留言的功能时看到了小表情的功能，想自己动手试试，通过查资料，发现emoji其实就是一些特殊的字符，类似于我做的效果如下:关键代码：1.将emoji值存入一个数组2.使用window.onload事件将表情包渲染到页面其余就是一些基础代码啦。
复制链接

扫一扫