js实例教程-JavaScript实现留言板功能

发布时间:2018-12-06 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了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技巧 脚本宝典 欢迎评论哦!&nbsp;js技巧,巧夺天工,精雕玉琢。小宝典献丑了!

脚本宝典总结

以上是脚本宝典为你收集整理的js实例教程-JavaScript实现留言板功能全部内容,希望文章能够帮你解决js实例教程-JavaScript实现留言板功能所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。