度量快速开发平台-业界最好的全功能软件开发平台

 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
热搜: 部件 流程 SQL
查看: 99|回复: 4

[分享] 用javascript实现简易留言板

[复制链接]

231

主题

2541

帖子

5807

积分

论坛元老

Rank: 8Rank: 8

积分
5807
发表于 2018-3-12 17:26:06 | 显示全部楼层 |阅读模式
用原生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.     }
复制代码


回复

使用道具 举报

231

主题

2541

帖子

5807

积分

论坛元老

Rank: 8Rank: 8

积分
5807
 楼主| 发表于 2018-3-12 17:26:30 | 显示全部楼层
回复 支持 反对

使用道具 举报

542

主题

5919

帖子

1万

积分

作者

Rank: 7Rank: 7Rank: 7

积分
13589
发表于 2018-3-13 15:33:31 | 显示全部楼层
回复 支持 反对

使用道具 举报

231

主题

2541

帖子

5807

积分

论坛元老

Rank: 8Rank: 8

积分
5807
 楼主| 发表于 2018-3-13 17:48:19 | 显示全部楼层
回复 支持 反对

使用道具 举报

231

主题

2541

帖子

5807

积分

论坛元老

Rank: 8Rank: 8

积分
5807
 楼主| 发表于 2018-3-13 17:48:46 | 显示全部楼层
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

手机版|小黑屋|重庆度量科技  本站关键词:快速开发平台

GMT+8, 2018-6-25 14:04 , Processed in 0.300001 second(s), 27 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表