这篇文章主要为大家详细介绍了基于JavaScript实现留言板功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了JavaScript实现留言板功能的具体代码，供大家参考，具体内容如下
html代码
<div> <ul> <li>hello?</li> <div></div> <li>hello</li> <div></div> <li>hi</li> <div></div> <li>hehe</li> <div></div> <li>goodbye</li> <div></div> <li>。。。。</li> <div></div> <li>I LOVE YOU</li> </ul> <textarea></textarea> <button>发送</button> </div>
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代码
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 div = document.createElement("div"); div.className = "clear"; oCon.appendChild(div); 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 div = document.createElement("div"); div.className = "clear"; oCon.appendChild(div); oCon.appendChild(li); msg.value = ""; //可见范围看见当前元素 li.scrollIntoView(); } }
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章: