实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>作业:一个小型聊天窗口</title> <style type="text/css"> div:nth-child(1) { width: 500px; height: 650px; background-color: lightskyblue; margin: 30px auto; color: #333; box-shadow: 2px 2px 2px #808080 } h2 { text-align: center; margin-bottom: -10px; } div:nth-child(2) { width: 400px; height: 500px; border: 4px double green; background-color: #efefef; margin: 20px auto 15px; } ul { list-style: none; line-height: 2em; /*border: 1px solid red;*/ overflow: hidden; padding: 15px; } table { width: 90%; height:80px; margin: auto; } textarea{ /*width: 300px;*/ border: none; resize: none; background-color: lightyellow; } button { width: 60px; height: 40px; background-color: seagreen; color: white; border: none; /*text-align: left;*/ } button:hover { cursor: pointer; background-color: orange; } </style> </head> <body> <div> <h2>萌妹子聊天室</h2> <div contenteditable="true" style="overflow-y:auto; overflow-x:auto; width:400px; height:500px;"> <ul> <li></li> </ul> </div> <table> <tr> <td align="left"><textarea cols="50" rows="4" name="text" autofocus></textarea></td> <td align="left"><button type=button>发送</button></td> </tr> </table> </div> <script type="text/javascript"> //1、获取需要的元素数组。 var new_ul= document.getElementsByTagName('ul')[0]; var new_but= document.getElementsByTagName('button')[0]; var new_text=document.getElementsByName('text')[0]; new_but.onclick=function () { //把获取到的new_text值赋给text var text=new_text.value; //然后让new_text的值为空,方便下次输入。不影响text的值。 new_text.value=''; if(text===''){ alert('您不想说任何话吗?') } //创建一个li标签 var li = document.createElement('li'); //给li写入text/new_text.value的值,结果= <li> + text + </li>。 li.innerHTML='<img src="images/me.jpg" style="width:40px; height: 40px;border-radius: 50%;">说: '+text; //不能反过来写。 //在new_ul标签下追加 li标签和他里边的字符 new_ul.appendChild(li); setTimeout(function () { var mm=['我在呢,你有什么事?','你喜欢我吗?','你来找我呀!','我非常喜欢你啊。']; //获取随机数,然后取随机数里面的整数部分。 随机数*4表示范围在0-4之间,不包含4,以为数组是0-3范围。 var temp=Math.floor(Math.random()*4); var li_mm = document.createElement('li'); li_mm.innerHTML='<img src="images/kf.jpg" style="width:40px; height: 40px; border-radius: 50%;">说: '+mm[temp]; new_ul.appendChild(li_mm); },1000); } </script> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例