本文實例為大家分享了JavaScript實現留言板功能的具體代碼，供大家參考，具體內容如下

html代碼

<div class='main'> <ul class='content'> <li class='msgContent left'>hello?</li> <div style='clear: both;'></div> <li class='msgContent left'>hello</li> <div style='clear: both;'></div> <li class='msgContent right'>hi</li> <div style='clear: both;'></div> <li class='msgContent left'>hehe</li> <div style='clear: both;'></div> <li class='msgContent left'>goodbye</li> <div style='clear: both;'></div> <li class='msgContent right'>。。。。</li> <div style='clear: both;'></div> <li class='msgContent right'>I LOVE YOU</li> </ul> <textarea class='msgInput'></textarea> <button class='sendbtn'>發送</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(); }}

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。