度量快速开发平台-专业、快速的软件定制快开平台

标题: 用javascript实现简易留言板 [打印本页]
作者: fteair    时间: 2020-2-12 17:26
标题: 用javascript实现简易留言板
用原生js制作的简易留言板。
具备以下功能：1、在输入框输入文字留言；2、将留言显示在留言板；3、删除留言。
html和css代码：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <style>
  6.         *{margin:0; padding:0;}
  7.         #container{
  8.             width:500px;
  9.             height:500px;

  11.         }
  12.         #sendMessage{
  13.             width:500px;
  14.             height: 50px;

  16.             line-height:50px;
  17.             margin-bottom:30px;
  18.         }
  19.         #content{
  20.             width:500px;
  21.             height: 400px;
  22.             border:1px solid #808080;
  23.             overflow: scroll;
  24.         }
  25.         #messColumn{width:300px;}

  27.     </style>
  28. </head>
  29. <body>
  30. <div id="container">
  31.     <div id="sendMessage">
  32.         <input id="messColumn" type="text">
  33.         <input id="btn" type="button" value="留言">
  34.     </div>
  35.     <!--应该在content里面放入一个ul-->
  36.     <div id="content"></div>
  37. </div>
复制代码
js代码：
一、点击留言按键时，在留言板的div中创建并添加一个div元素，将文本框内容传递给这个元素。
二、在这个div元素中加入“删除”按键，并且给删除增加单击事件。
三、点击删除按键时，用removeChild函数删除
  1. var messCol=document.getElementById("messColumn");
  2.     var btn=document.getElementById("btn");
  3.     var con=document.getElementById("content");
  4.     btn.onclick=function(){
  5.         if(messCol.value.trim()==""){
  6.             alert("输入内容不可为空或者空格");
  7.             return;
  8.         }
  9.         var messDiv=document.createElement("div");
  10.         messDiv.setAttribute("style","width:450px;height:30px;border:2px dotted #808080;margin-bottom:5px;");
  11.         {
  12.             //这个代码块用来存放构建messDiv内容的代码:留言内容和删除键的样式
  13.             var messCon = document.createElement("div");
  14.             messCon.setAttribute("style","float:left;width:350px;height=30px;line-height:30px;overflow:auto;");
  15.             var del = document.createElement("a");
  16.             del.setAttribute("style","float:left;width:50px;height:30px;line-height:30px;");
  17.             del.setAttribute("href","javascript:;");
  18.             del.innerHTML = "删除";
  19.             messDiv.appendChild(messCon);
  20.             messDiv.appendChild(del);
  21.             messCon.innerHTML=messCol.value;
  22.             del.onclick=function(){
  23.                 con.removeChild(this.parentNode);   //让父元素content删除子元素的messDiv
  24.             }
  25.         }
  26.         con.appendChild(messDiv);
  27.         messCol.value="";   //清空输入框的字符内容
  28.     }
复制代码


作者: fteair    时间: 2020-2-12 17:26
作者: 张兴康    时间: 2020-2-13 15:33
作者: fteair    时间: 2020-2-13 17:48
作者: fteair    时间: 2020-2-13 17:48




欢迎光临 度量快速开发平台-专业、快速的软件定制快开平台 (http://plat.delit.cn/) Powered by Discuz! X3.2