html代碼

<div id="main" class="main"><ul id="content" 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 id="msg_input" class="msgInput"></textarea><button id="sendbtn" 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();}}

總結

以上是生活随笔為你收集整理的留言板JavaScript实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。