摘要:html代码css代码JS代码html代码css代码JS代码

小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。

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();           }       }  

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技巧,巧夺天工,精雕玉琢。小宝典献丑了!