前端如何实现emoji表情

在前端开发中,其实我们的utf-8字符库中,包含了上万种的字符符号,我们直接用就可以,支持十进制和十六进制两种,其实很简单,我写个demo

<div class="out" style="display: flex; width: 500px; flex-wrap: wrap;">
   <p>&#129488;</p>
</div>

这就是下面这个表情了,

下面我写了一个简单的例子,循环出来了一些表情包,喜欢的朋友们直接拿去用就可以了

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div class="out" style="display: flex; width: 500px; flex-wrap: wrap;"></div>
  <script>
    const doms = document.querySelector('.out')
    for (var a = 128512; a <= 128580; a++) {
      const emojis = '&#' + a
      const pTags = document.createElement('p')
      pTags.innerHTML = emojis
      doms.appendChild(pTags)
    }
    for (var b = 129296; b <= 129488; b++) {
      const emojis = '&#' + b
      const pTags = document.createElement('p')
      pTags.innerHTML = emojis
      doms.appendChild(pTags)
    }

  </script>
</body>

</html>

这一段代码循环出来是这样的,相信已经可以满足绝大部分场景了

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在 Android 中实现 emoji 表情选择的 View,一般可以采用以下两种方式: 1. 使用第三方 可以使用一些开源的第三方,如: - Emoji-Keyboard:https://github.com/rockerhieu/emojicon - EmojiEditText:https://github.com/kimoBiko/EmojiEditText - EmojiCompat:https://developer.android.com/topic/libraries/support-library/packages#emoji-compat 这些都提供了丰富的 emoji 表情选择界面和相关的实现方法,可以方便地集成到项目中。 2. 自定义 View 如果需要更灵活地实现 emoji 表情选择的 View,可以自己实现一个自定义 View。具体实现步骤如下: 1. 准备 emoji 表情资源 首先需要准备 emoji 表情的资源,可以自己设计或者使用现成的资源。将这些资源放在项目的 res 目录下。 2. 自定义 View 自定义 View 可以继承自 LinearLayout,包含一个 EditText 和一个 GridView。 在 EditText 的右侧添加一个按钮,点击按钮时显示 emoji 表情选择的 GridView,点击表情后将表情插入到 EditText 中。 3. 实现表情选择的 GridView GridView 中的每个表情可以使用 ImageView 显示,可以通过设置表情资源的 ID 来显示不同的表情。在表情选择界面的底部可以添加一个删除按钮,点击删除按钮可以删除 EditText 中的最后一个字符或者最后一个表情。 4. 实现点击表情插入到 EditText 的功能 当用户点击 GridView 中的表情时,可以将表情插入到 EditText 中。可以通过在 EditText 中插入一个 SpannableString 来实现,其中 SpannableString 中包含了表情的资源 ID。 以上就是实现 emoji 表情选择的 View 的一般步骤,可以根据具体需求进行自定义实现
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值