脚本宝典收集整理的这篇文章主要介绍了js实例教程-JavaScript实现留言板功能,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。
htML代码
<p id="main" class="main"> <ul id="content" class="content"> <li class="msgContent left">hello?</li> <p style="clear: both;"></p> <li class="msgContent left">hello</li> <p style="clear: both;"></p> <li class="msgContent right">hi</li> <p style="clear: both;"></p> <li class="msgContent left">hehe</li> <p style="clear: both;"></p> <li class="msgContent left">goodbye</li> <p style="clear: both;"></p> <li class="msgContent right">。。。。</li> <p style="clear: both;"></p> <li class="msgContent right">I LOVE YOU</li> </ul> <textarea id="msg_input" class="msginput"></textarea> <button id="sendBTn" class="sendbtn">发送</button> </p>
css代码
* { font-@R_360_1191@ 14px; padding: 0; margin: 0; } .main { posITion: relative; margin: 20px auto; border: 1px solid steelblue; width: 430px; height: 400px; } .msgInput { display: block; width: 406px; height: 60px; margin: 10px auto; } .sendbtn { position: absolute; width: 100px; height: 29px; bottom: 5px; right: 10px; } .content { list-style: none; width: 410px; height: 280px; margin: 5px auto; border: 1px dotted #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代码
<strong> </strong>VAR oBtn = document.getElementById("sendbtn"); var msg = document.getElementById("msg_input"); var oCon = document.getElementById("content"); oBtn.onclick = function () { var msgVal = msg.value; var li = document.createElement("li"); li.innerHTML = msgVal; li.classname = "msgContent right"; var p = document.createElement("p"); p.className = "clear"; oCon.apPEndChild(p); oCon.appendChild(li); msg.value = ""; //可见范围看见当前元素 li.scrollIntoView() }; document.onkeyPress = function (e) { var e = e || event; var code = e.keyCode || e.which; if (code == 10) { var msgVal = msg.value; var li = document.createElement("li"); li.innerHTML = msgVal; li.className = "msgContent right"; var p = document.createElement("p"); p.className = "clear"; oCon.appendChild(p); oCon.appendChild(li); msg.value = ""; //可见范围看见当前元素 li.scrollIntoView(); } }
html代码
<p id="main" class="main"> <ul id="content" class="content"> <li class="msgContent left">hello?</li> <p style="clear: both;"></p> <li class="msgContent left">hello</li> <p style="clear: both;"></p> <li class="msgContent right">hi</li> <p style="clear: both;"></p> <li class="msgContent left">hehe</li> <p style="clear: both;"></p> <li class="msgContent left">goodbye</li> <p style="clear: both;"></p> <li class="msgContent right">。。。。</li> <p style="clear: both;"></p> <li class="msgContent right">I LOVE YOU</li> </ul> <textarea id="msg_input" class="msgInput"></textarea> <button id="sendbtn" class="sendbtn">发送</button> </p>
css代码
* { font-size: 14px; padding: 0; margin: 0; } .main { position: relative; margin: 20px auto; border: 1px solid steelblue; width: 430px; height: 400px; } .msgInput { display: block; width: 406px; height: 60px; margin: 10px auto; } .sendbtn { position: absolute; width: 100px; height: 29px; bottom: 5px; right: 10px; } .content { list-style: none; width: 410px; height: 280px; margin: 5px auto; border: 1px dotted #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代码
<strong> </strong>var oBtn = document.getElementById("sendbtn"); var msg = document.getElementById("msg_input"); var oCon = document.getElementById("content"); oBtn.onclick = function () { var msgVal = msg.value; var li = document.createElement("li"); li.innerHTML = msgVal; li.className = "msgContent right"; var p = document.createElement("p"); p.className = "clear"; oCon.appendChild(p); oCon.appendChild(li); msg.value = ""; //可见范围看见当前元素 li.scrollIntoView() }; document.onkeyPRess = function (e) { var e = e || event; var code = e.keyCode || e.which; if (code == 10) { var msgVal = msg.value; var li = document.createElement("li"); li.innerHTML = msgVal; li.className = "msgContent right"; var p = document.createElement("p"); p.className = "clear"; oCon.appendChild(p); oCon.appendChild(li); msg.value = ""; //可见范围看见当前元素 li.scrollIntoView(); } }
觉得可用,就经常来吧!Javascript技巧 脚本宝典 欢迎评论哦! js技巧,巧夺天工,精雕玉琢。小宝典献丑了!
以上是脚本宝典为你收集整理的js实例教程-JavaScript实现留言板功能全部内容,希望文章能够帮你解决js实例教程-JavaScript实现留言板功能所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。