|
用原生js制作的简易留言板。 具备以下功能：1、在输入框输入文字留言；2、将留言显示在留言板；3、删除留言。 html和css代码： - <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <style>
- *{margin:0; padding:0;}
- #container{
- width:500px;
- height:500px;
- }
- #sendMessage{
- width:500px;
- height: 50px;
- line-height:50px;
- margin-bottom:30px;
- }
- #content{
- width:500px;
- height: 400px;
- border:1px solid #808080;
- overflow: scroll;
- }
- #messColumn{width:300px;}
- </style>
- </head>
- <body>
- <div id="container">
- <div id="sendMessage">
- <input id="messColumn" type="text">
- <input id="btn" type="button" value="留言">
- </div>
- <!--应该在content里面放入一个ul-->
- <div id="content"></div>
- </div>
js代码： 一、点击留言按键时，在留言板的div中创建并添加一个div元素，将文本框内容传递给这个元素。 二、在这个div元素中加入“删除”按键，并且给删除增加单击事件。 三、点击删除按键时，用removeChild函数删除 - var messCol=document.getElementById("messColumn");
- var btn=document.getElementById("btn");
- var con=document.getElementById("content");
- btn.onclick=function(){
- if(messCol.value.trim()==""){
- alert("输入内容不可为空或者空格");
- return;
- }
- var messDiv=document.createElement("div");
- messDiv.setAttribute("style","width:450px;height:30px;border:2px dotted #808080;margin-bottom:5px;");
- {
- //这个代码块用来存放构建messDiv内容的代码:留言内容和删除键的样式
- var messCon = document.createElement("div");
- messCon.setAttribute("style","float:left;width:350px;height=30px;line-height:30px;overflow:auto;");
- var del = document.createElement("a");
- del.setAttribute("style","float:left;width:50px;height:30px;line-height:30px;");
- del.setAttribute("href","javascript:;");
- del.innerHTML = "删除";
- messDiv.appendChild(messCon);
- messDiv.appendChild(del);
- messCon.innerHTML=messCol.value;
- del.onclick=function(){
- con.removeChild(this.parentNode); //让父元素content删除子元素的messDiv
- }
- }
- con.appendChild(messDiv);
- messCol.value=""; //清空输入框的字符内容
- }
| 
发表于 2020-2-12 17:26:06
QQ好友和群
QQ空间
腾讯微博
腾讯朋友
收藏
楼主
