给博客加上滑稽

实现这个功能绝大多数功劳都在一些dalao身上，本文只是讲一下如何使用QwQ。

巨人的肩膀

这个功能的实现是基于DIYGOD大佬的轮子OwO表情面板。
ps.突然发现好像已经和OwO没什么关系了，用上了OwO的壳。不过也安利一下diygod的OwO，也是相当好用的!

后来有人加以精简，今天我要讲的内容就是以精简后的OwO为基础。

基础功能的实现

首先来看看一个平淡的评论框

十分的平淡无奇，10个网站可能9个的评论框长这样。那么如何使它变得不一样呢？ 那就给他加上一个评论框叭。

首先，你得有个召唤评论框的按钮，比如手机的开机键能让手机开关机一样。那么我们在合适的位置加上一个合适的按钮。用一个div包裹住一个span标签，再给他加上独一无二的id，就像这样，好极了。

<div class="OwO-logo"> 
  <span>按我出表情</span> 
</div> 

现在这个评论框是不是有一点不一样了？

但是实际上你怎么按它也不会出现表情框，因为它是一个没有灵魂的按钮。现在我们给他注入灵魂。我们赋予它的使命是“按他出表情”。那么我们先把要召唤出的东西写出来。就像这样，没错（尼尔叔叔脸）。

这里需要用到OwO的css文件

<link rel="stylesheet" href="OwO.min.css" /> 

<div id="OwO-container">
  <div class="OwO OwO-open" id="qaq"> 
    <div class="OwO-body" id="OwO-body"> 
      <ul id="OwO-pp" class="OwO-items OwO-items-emoticon OwO-items-show" style="max-height: 197px;"> 
        <li class="OwO-item"><img src="chaiquan.png"></li> 
        <li class="OwO-item"><img src="chaiquanbugaoxin.png"></li> 
      </ul> 
    </div>
  </div> 
</div> 

那么需要展示的内容就全部放出来了，开始注入灵魂！

先让按钮成为一个按钮。所谓按钮，就是让他按一下开，按一下关(认真)。由于此版本的OwO需要jq。所以我们就可以使用jq的toggle()来实现按钮的本质功能。

先引入jquery

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

then，将上面提到的按钮的html加上个onclick

<div class="OwO-logo" onclick="$('#qaq').toggleClass('OwO-open');">
  <span>按我出表情</span>
</div>

解释一下，在OwO的css中，不加OwO-open这个class的话，OwO表情框本体是处于display:none的状态。

这样一来，这个按钮就成为一个按钮了呢

请不要吐槽我的gif，我有认真在做了QAQ。

接下来，如何点击一下表情就可以跑到评论框里去呢。那么请出今天的核心js

Smilies = {
    dom: function(id) {
        return document.getElementById(id);
    },
    grin: function(tag) {
        tag = ' ' + tag + ' ';
        myField = this.dom("comment");
        document.selection ? (myField.focus(), sel = document.selection.createRange(), sel.text = tag, myField.focus()) : this.insertTag(tag);
    },
    insertTag: function(tag) {
        myField = Smilies.dom("comment");
        myField.selectionStart || myField.selectionStart == "0" ? (startPos = myField.selectionStart, endPos = myField.selectionEnd, cursorPos = startPos, myField.value = myField.value.substring(0, startPos) + tag + myField.value.substring(endPos, myField.value.length), cursorPos += tag.length, myField.focus(), myField.selectionStart = cursorPos, myField.selectionEnd = cursorPos) : (myField.value += tag, myField.focus());
    }
}

将这这段代码加到页面的底部,然后再给表情也加上onclick。

<li class="OwO-item" onclick="Smilies.grin('');"><img src="chaiquan.png" /></li> 
<li class="OwO-item" onclick="Smilies.grin('');"><img src="chaiquanbugaoxin.png" /></li> 

这样一来，就可以实现按一下表情就出现了。那么基本功能到这里就完成了哟。我这里输出的是用于解析的短代码，你也可以换成<img src="xxx">来实现功能。

其他问题

新增表情：想要新增表情 ，以一下格式添加到<ul id="OwO-pp">中即可。

JS如何定位评论框：上面的JS是会输出至id为comment的评论框中，如果想修改目标，则修改上面JS代码的第7行和第11行即可。

附件

本教程的示例代码下载