简易聊天对话框功能代码实现
程序员文章站
2022-09-24 14:12:07
今天看了几个js的视频,老师布置了一个编写一个简易聊天对话框的任务,没有涉及到ajax.主要实现了切换头像模拟两方的聊天情况,样式比较简单,后期可以进行美化。
需要注意的地方是我...
今天看了几个js的视频,老师布置了一个编写一个简易聊天对话框的任务,没有涉及到ajax.主要实现了切换头像模拟两方的聊天情况,样式比较简单,后期可以进行美化。
需要注意的地方是我是用的ul li列表来实现元素的添加,这样更利于样式的设置,每添加一个对话框需要清除一下浮动,不然会出现连续几个对话框出现在一行的现象。
代码如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>聊天对话框</title> <style type="text/css"> #container{ width: 250px; height: 350px; border:1px solid #7b6b6b; margin: 0 auto; position: relative; } #content{ width: 250px; height: 300px; border-bottom: 1px solid #ccc; } #content ul{ margin: 0; padding: 0; } #img{ width: 30px; height: 30px; position: absolute; left: 10px; top: 310px; border-radius: 15px; } #txt{ margin: 0; position: absolute; left: 50px; top: 315px; border-radius: 2px; border:1px solid #ccc; width: 133px; height: 18px; } #btn{ margin-right: 10px; position: absolute; margin: 0; left: 197px; top: 314px; } #edit{ background: #ece7e766; width: 250px; height: 50px; } .showtxt{ width: auto; height: auto; max-width: 230px; background: #008000a8; border:0; font-size: 15px; color: white; padding: 5px; border-radius: 2px; word-break: break-all; list-style: none; margin-top: 5px; display: list-item; } .left{ text-align: left; margin-left: 50px; float: left; } .right{ text-align: right; margin-right: 50px; float: right; } .showimg{ width: 26px; height: 26px; border-radius: 13px; } .leftimg{ left: 10px; position: absolute; } .rightimg{ right: 10px; position: absolute; } </style> </head> <body> <p id="container"> <p id="content"> <ul id="save"></ul> </p> <p id="edit"> <img src="1.jpg" id="img"> <input type="text" name="" id="txt"> <input type="button" name="" value="发送" id="btn"> </p> </p> <script type="text/javascript"> //获取元素 var ocont=document.getelementbyid('content'); var oimg=document.getelementbyid('img'); var otxt=document.getelementbyid('txt'); var obtn=document.getelementbyid('btn'); var ostxt=document.getelementsbyclassname('showtxt'); var osave=document.getelementbyid('save'); var num=0; //切换头像 oimg.onclick=function(){ num++; if(num%2==0) oimg.src='1.jpg'; else oimg.src='2.jpg'; } //发送事件 obtn.onclick= function(){ addcon(); } function addcon(){ //定义需要添加的元素 var newli=document.createelement("li"); var newimg=document.createelement('img'); //判断聊天的对象是哪一方,文字框出现在左边还是右边 if(num%2==0){ //添加对话框 newli.innerhtml=otxt.value; newli.classname='showtxt right'; osave.appendchild(newli); otxt.value=''; //添加头像 newimg.src=oimg.src; newimg.classname='showimg rightimg'; newli.appendchild(newimg); //清除浮动 var p = document.createelement('p'); p.style = 'clear:both'; osave.appendchild(p); }else{ newli.innerhtml=otxt.value; newli.classname='showtxt left'; osave.appendchild(newli); otxt.value=''; newimg.src=oimg.src; newimg.classname='showimg leftimg'; newli.appendchild(newimg); var p = document.createelement('p'); p.style = 'clear:both'; osave.appendchild(p); } } </script> </body> </html>
页面结果如图:
上一篇: Linux环境变量配置的完整攻略
下一篇: 媳妇面含杀机