js聊天框插入表情

最新推荐文章于 2023-07-21 22:20:57 发布

IT 哈

最新推荐文章于 2023-07-21 22:20:57 发布

阅读量622

点赞数

分类专栏： JavaScript知识点

原文链接：https://blog.csdn.net/chendongpu/article/details/86701760

版权

JavaScript知识点专栏收录该内容

208 篇文章 8 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{margin:0;padding: 0;}
ul{list-style: none;}
.mcont{margin:100px 20px; height: 330px;width: 450px; position: relative;}
.mcont ul{ overflow: hidden; width: 360px; position: absolute; left:0; top:-70px; display:none;}
.mcont li{float:left;_display:inline; width: 32px; height: 32px; margin: 0 4px 4px 0; cursor: pointer;}
</style>
</head>
<body>
<div id="meditor" class="mcont">
<div class="mbar"><input type="button" value="图片" /></div>
<div id="div" contenteditable="true" style="width:600px;height:300px;border:1px solid #ccc;"></div>
</div>
<script type="text/javascript">

var dataFace = [
{name:"微笑",msrc:"./face/1.gif"},
{name:"大笑",msrc:"./face/2.gif"},
{name:"偷笑",msrc:"./face/3.gif"},
{name:"酷",msrc:"./face/4.gif"},
{name:"鬼脸",msrc:"./face/5.gif"},
{name:"流鼻血",msrc:"./face/6.gif"},
{name:"色",msrc:"./face/7.gif"},
{name:"疑问",msrc:"./face/8.gif"},
{name:"羞",msrc:"./face/9.gif"},
{name:"囧",msrc:"./face/10.gif"},
{name:"萌",msrc:"./face/11.gif"},
{name:"鄙视",msrc:"./face/12.gif"},
{name:"晕",msrc:"./face/13.gif"},
{name:"汗",msrc:"./face/14.gif"},
{name:"可怜",msrc:"./face/15.gif"},
{name:"靠",msrc:"./face/16.gif"},
{name:"委屈",msrc:"./face/17.gif"},
{name:"大哭",msrc:"./face/18.gif"},
{name:"生气",msrc:"./face/19.gif"},
{name:"拜拜",msrc:"./face/20.gif"}
];

window.οnlοad=function(){
// var div = document.getElementById("div");
// div.innerHTML+="<img src='./face/1.gif'>";

var editor = document.getElementById("meditor");

var ul = document.createElement("ul");
var ulHtml = "";
for(var i = 0,l= dataFace.length;i<l;i++){
ulHtml +="<li><img alt='"+dataFace[i].name+"' src='"+dataFace[i].msrc+"' /></li>";
}
ul.innerHTML=ulHtml;
editor.insertBefore(ul, editor.getElementsByTagName("div")[0]);

editor.getElementsByTagName("input")[0].οnclick=function(){
editor.getElementsByTagName("ul")[0].style.display = "block";
};

var div = document.getElementById("div");
var lis = editor.getElementsByTagName("li");
for(var i = 0, l = lis.length; i<l;i++){
lis[i].onclick = new function(){
var choose = lis[i];
return function(){
editor.getElementsByTagName("ul")[0].style.display = "none";
var value = choose.getElementsByTagName("img")[0].src;
div.innerHTML+="<img src='"+value+"'>";
}
};
}

};

</script>
</body>
</html>

转自https://blog.csdn.net/chendongpu/article/details/86701760

IT 哈

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
js聊天框插入表情

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{margin:0;padding: 0;} ul{list-style: non...
复制链接

扫一扫

专栏目录