首先得将所有可用的表情图片显示到一个小窗口，这个窗口会在点击了表情按钮后显示如下图，在HTML代码中已经添加好了这个窗口了，下面只需实现代码部分。
我们使用兔斯基作为我们聊天程序的表情包。可以看到，有很多张gif图，如果手动编写的话，要花一些功夫，不断地写<img src='https://www.jb51.net/article/xx.gif'/>，所以考虑将这个工作交给代码来自动完成，写一个方法来初始化所有表情。
为此将以下代码添加到HiChat类中，并在init方法中调用这个方法。
www/scripts/hichat.js
_initialEmoji: function() { var emojiContainer = document.getElementById('emojiWrapper'), docFragment = document.createDocumentFragment(); for (var i = 69; i > 0; i--) { var emojiItem = document.createElement('img'); emojiItem.src = 'https://www.jb51.net/content/emoji/' + i + '.gif'; emojiItem.title = i; docFragment.appendChild(emojiItem); }; emojiContainer.appendChild(docFragment); }
同时将以下代码添加到hichat.js的init方法中。
www/scripts/hichat.js
this._initialEmoji(); document.getElementById('emoji').addEventListener('click', function(e) { var emojiwrapper = document.getElementById('emojiWrapper'); emojiwrapper.style.display = 'block'; e.stopPropagation(); }, false); document.body.addEventListener('click', function(e) { var emojiwrapper = document.getElementById('emojiWrapper'); if (e.target != emojiwrapper) { emojiwrapper.style.display = 'none'; }; });
上面向页面添加了两个单击事件，一是表情按钮单击显示表情窗口，二是点击页面其他地方关闭表情窗口。
现在要做的就是，具体到某个表情被选中后，需要获取被选中的表情，然后转换为相应的表情代码插入到消息框中。
为此我们再写一个这些图片的click事件处理程序。将以下代码添加到hichat.js的inti方法中。
www/scripts/hichat.js
document.getElementById('emojiWrapper').addEventListener('click', function(e) { //获取被点击的表情 var target = e.target; if (target.nodeName.toLowerCase() == 'img') { var messageInput = document.getElementById('messageInput'); messageInput.focus(); messageInput.value = messageInput.value + '[emoji:' + target.title + ']'; }; }, false);
现在表情选中后，消息输入框中可以得到相应的代码了。
之后的发送也普通消息发送没区别，因为之前已经实现了文本消息的发送了，所以这里不用再实现什么，只是需要更改一下之前我们用来显示消息的代码，首先判断消息文本中是否含有表情符号，如果有，则转换为图片，最后再显示到页面。
为此我们写一个方法接收文本消息为参数，用正则搜索其中的表情符号，将其替换为img标签，最后返回处理好的文本消息。
将以下代码添加到HiChat类中。
www/scripts/hichat.js
_showEmoji: function(msg) { var match, result = msg, reg = /\[emoji:\d+\]/g, emojiIndex, totalEmojiNum = document.getElementById('emojiWrapper').children.length; while (match = reg.exec(msg)) { emojiIndex = match[0].slice(7, -1); if (emojiIndex > totalEmojiNum) { result = result.replace(match[0], '[X]'); } else { result = result.replace(match[0], '<img src="../content/emoji/' + emojiIndex + '.gif" />'); }; }; return result; }
现在去修改之前我们显示消息的_displayNewMsg方法，让它在显示消息之前调用这个_showEmoji方法。
_displayNewMsg: function(user, msg, color) { var container = document.getElementById('historyMsg'), msgToDisplay = document.createElement('p'), date = new Date().toTimeString().substr(0, 8), //将消息中的表情转换为图片 msg = this._showEmoji(msg); msgToDisplay.style.color = color || '#000'; msgToDisplay.innerHTML = user + '<span>(' + date + '): </span>' + msg; container.appendChild(msgToDisplay); container.scrollTop = container.scrollHeight; }
下面是实现后的效果：
主要功能已经完成得差不多了，为了让程序更加人性与美观，可以加入一个修改文字颜色的功能，以及键盘快捷键操作的支持，这也是一般聊天程序都有的功能，回车即可以发送消息。
文字颜色
万幸，HTML5新增了一个专门用于颜色选取的input标签，并且Chrome对它的支持非常之赞，直接弹出系统的颜色拾取窗口。
IE及FF中均是一个普通的文本框，不过不影响使用，只是用户只能通过输入具体的颜色值来进行颜色设置，没有Chrome里面那么方便也直观。