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

标题: 用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;

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

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

  24.     </style>
  25. </head>
  26. <body>
  27. <div id="container">
  28.     <div id="sendMessage">
  29.         <input id="messColumn" type="text">
  30.         <input id="btn" type="button" value="留言">
  31.     </div>
  32.     <!--应该在content里面放入一个ul-->
  33.     <div id="content"></div>
  34. </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://p.delit.cn/) Powered by Discuz! X3.2