JavaScript实现留言板案例

本文实例为大家分享了JavaScript实现留言板功能的具体代码，供大家参考，具体内容如下

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>留言板</title>
 <style type="text/css">
 #div1{
 width: 400px;
 height: 200px;
 background-color: antiquewhite;
 }
 span{
 color: blue;
 text-decoration: underline;
 }
 </style>
 </head>
 <body>
 <div id="div1">
 姓名：<input type="text" name="user" id="username" /><br />
 内容：<textarea rows="10" cols="40" id="info">

 </textarea>
 <input type="button" value="留言" id="btn" /><br />
 </div>
 <h3>留言板</h3><br />
 <div id="div2">

 </div>

 </body>
 <script type="text/javascript">
 var userInput = document.getElementById("username");
 var infoInput = document.getElementById("info");
 var btn = document.getElementById("btn");
 var div2 = document.getElementById("div2");

 btn.onclick = function(){

 var user = userInput.value;
 var info = infoInput.value;

 var divUser = document.createElement("div");
 divUser.innerText = user;
 divUser.style.backgroundColor = "darkgrey";
 divUser.style.width = "400px";
 divUser.style.height = "30px";
 div2.appendChild(divUser);

 var divInfo = document.createElement("div");
 divInfo.innerText = info;
 divInfo.style.backgroundColor = "antiquewhite";
 divInfo.style.width = "400px";
 divInfo.style.height = "80px";
 div2.appendChild(divInfo);

 var del = document.createElement("span");
 del.innerText = "删除";
 del.style.float = "right";
 divInfo.appendChild(del);

 del.onclick = function(){
 divUser.remove();
 divInfo.remove();
 del.remove();
 }

 }

 </script>
</html>

showtime：

点击删除，可以删除留言：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • javascript实现留言板功能

    javascript实现留言板功能

    本文实例为大家分享了javascript实现留言板功能的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; padding: 0; } .box{ /*设置最外层盒子*/ width:

  • JS实现留言板功能

    JS实现留言板功能

    每天一个JS 小demo之留言板.主要知识点:DOM方法的理解和运用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .wrap { width: 400px; margin: 30px au

  • JS实现简易留言板（节点操作）

    本文实例为大家分享了JS实现简易留言板的具体代码,供大家参考,具体内容如下 今天的案例主要是对节点进行操作 创建节点.添加节点.删除节点以及为节点添加内容的操作. 就是一个简单的留言板功能,可以发布留言,删除留言. 主要思路:两个鼠标点击事件--点击发布按钮事件和点击删除按钮事件 发布按钮事件:首先在文档中创建li节点.然后第二步,先把文本域中的内容获取出来赋给li,这里要注意,文本域是表单元素,获取表单元素的内容是使用表单的特有属性value,要与普通元素获取内容的innerHTML进行区分:

  • JS实现简易留言板特效

    JS实现简易留言板特效

    本文实例为大家分享了JS实现留言板特效的具体代码,供大家参考,具体内容如下 知识点 1.textarea 大段输入框 2.value获取输入框的值 3.innerHTML所用东西:innerText文本 4.insertBefore在某个标签之前插入 运行效果 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>T

  • jsp留言板源代码三: 给jsp初学者.

    作 者: precom (皮蛋) 2000.12.10reply.jsp ==================================== <html><head> <META content="text/html; charset=gb2312 " http-equiv=Content-Type> <title>张家界电话黄页(网上114)</title></head> <style type=&q

  • 原生JS实现留言板功能

    原生JS实现留言板功能

    本文实例为大家分享了JS实现留言板功能的具体代码,供大家参考,具体内容如下 实现这个留言板功能比较简单,所以先上效果图: 实现用户留言内容,留言具体时间. <script> window.onload = function(){ var oMessageBox = document.getElementById("messageBox"); var oInput = document.getElementById("myInput"); var oPos

  • JavaScript实现动态留言板

    本文实例为大家分享了简单动态留言板的创建,供大家参考,具体内容如下 效果图展示: 思路 html代码 <textarea name="" id="" cols="30" rows="10"></textarea> <button>发表留言</button> <ul></ul> css代码 <style> * { margin: 0; paddi

  • 基于JavaScript实现留言板功能

    本文实例为大家分享了JavaScript实现留言板功能的具体代码,供大家参考,具体内容如下 html代码 <div id="main" class="main"> <ul id="content" class="content"> <li class="msgContent left">hello?</li> <div style="clear

  • JS实现简易留言板增删功能

    本文实例为大家分享了JS实现留言板增删功能的具体代码,供大家参考,具体内容如下 ## **JS实现简易留言板的增删功能** 一个很简单的留言板,实现**增删**功能,因为没有数据库,所以只是一个静态的留言板功能. **修改**功能其实也可以添加,但是我现在技术不够,等以后可能会添加**修改**功能. 代码很简单,注释很清楚.``` <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu

  • 用js编写留言板

    本文实例为大家分享了js编写留言板的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{ margin:0px; padding: 0px; font-si

随机推荐