用javascript实现简易留言板

2018-06-24 01:41:11来源：未知阅读 ()

用原生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;
10 
11         }
12         #sendMessage{
13             width:500px;
14             height: 50px;
15 
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;}
26 
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>

View Code

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     }