基于JavaScript实现留言板功能
本文实例为大家分享了JavaScript实现留言板功能的具体代码,供大家参考,具体内容如下
html代码
hello?
本文实例为大家分享了JavaScript实现留言板功能的具体代码,供大家参考,具体内容如下
html代码
hello?
css代码
*{ font-size:14px; padding:0; margin:0; } .main{ position:relative; margin:20pxauto; border:1pxsolidsteelblue; width:430px; height:400px; } .msgInput{ display:block; width:406px; height:60px; margin:10pxauto; } .sendbtn{ position:absolute; width:100px; height:29px; bottom:5px; right:10px; } .content{ list-style:none; width:410px; height:280px; margin:5pxauto; border:1pxdotted#D1D3D6; overflow-y:scroll; } .msgContent{ width:auto; max-width:250px; height:auto; word-break:break-all; margin:5px; padding:3px; border-radius:5px; } .content.left{ float:left; text-align:left; background-color:lightgrey; } .content.right{ float:right; text-align:right; background-color:yellowgreen; } .clear{ clear:both; }
JS代码
varoBtn=document.getElementById("sendbtn"); varmsg=document.getElementById("msg_input"); varoCon=document.getElementById("content"); oBtn.onclick=function(){ varmsgVal=msg.value; varli=document.createElement("li"); li.innerHTML=msgVal; li.className="msgContentright"; vardiv=document.createElement("div"); div.className="clear"; oCon.appendChild(div); oCon.appendChild(li); msg.value=""; //可见范围看见当前元素 li.scrollIntoView() }; document.onkeypress=function(e){ vare=e||event; varcode=e.keyCode||e.which; if(code==10){ varmsgVal=msg.value; varli=document.createElement("li"); li.innerHTML=msgVal; li.className="msgContentright"; vardiv=document.createElement("div"); div.className="clear"; oCon.appendChild(div); oCon.appendChild(li); msg.value=""; //可见范围看见当前元素 li.scrollIntoView(); } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:czq8825#qq.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。