JavaScript实现留言板案例


Posted in Javascript onMarch 17, 2020

本文实例为大家分享了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:

JavaScript实现留言板案例

点击删除,可以删除留言:

JavaScript实现留言板案例

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
使用jQuery简化Ajax开发 Ajax开发入门
Oct 14 Javascript
jQuery满屏焦点图左右滚动特效代码分享
Sep 07 Javascript
Node.js巧妙实现Web应用代码热更新
Oct 22 Javascript
在页面中输出当前客户端时间javascript实例代码
Mar 02 Javascript
原生js实现addClass,removeClass,hasClass方法
Apr 27 Javascript
sublime text配置node.js调试(图文教程)
Nov 23 Javascript
详解ES6中的代理模式——Proxy
Jan 08 Javascript
JS简单实现查看文档创建日期、修改日期和文档大小的方法示例
Apr 08 Javascript
浅析JS中回调函数及用法
Jul 25 Javascript
vue-cli3全面配置详解
Nov 14 Javascript
uni-app 支持多端第三方地图定位的方法
Jan 03 Javascript
Array.filter中如何正确使用Async
Nov 04 Javascript
es6函数之严格模式用法实例分析
Mar 17 #Javascript
JavaScript实现字符串与HTML格式相互转换
Mar 17 #Javascript
JS对象属性的检测与获取操作实例分析
Mar 17 #Javascript
JS前端模块化原理与实现方法详解
Mar 17 #Javascript
javascript中innerHTML 获取或替换html内容的实现代码
Mar 17 #Javascript
Vue中keep-alive 实现后退不刷新并保持滚动位置
Mar 17 #Javascript
用js编写留言板
Mar 17 #Javascript
You might like
帅气的琦玉老师
2020/03/02 日漫
PHP的一个基础知识 表单提交
2011/07/04 PHP
PHP使用数组实现队列
2012/02/05 PHP
PHP5.4中json_encode中文转码的变化小结
2013/01/30 PHP
PHP设计模式之适配器模式代码实例
2015/05/11 PHP
PHP获取二叉树镜像的方法
2018/01/17 PHP
PHP面向对象程序设计__tostring()和__invoke()用法分析
2019/06/12 PHP
搭建pomelo 开发环境
2014/06/24 Javascript
学习JavaScript设计模式(封装)
2015/11/26 Javascript
基于jquery编写的放大镜插件
2016/03/23 Javascript
js实现目录链接,内容跟着目录滚动显示的简单实例
2016/10/15 Javascript
javaScript中封装的各种写法示例(推荐)
2017/07/03 Javascript
JS实现问卷星自动填问卷脚本并在两秒自动提交功能
2020/06/17 Javascript
解决vue项目打包后提示图片文件路径错误的问题
2018/07/04 Javascript
用node开发并发布一个cli工具的方法步骤
2019/01/03 Javascript
layUI实现前端分页和后端分页
2019/07/27 Javascript
Python类属性与实例属性用法分析
2015/05/09 Python
Python安装第三方库及常见问题处理方法汇总
2016/09/13 Python
微信跳一跳小游戏python脚本
2018/01/05 Python
python使用itchat实现手机控制电脑
2018/02/22 Python
python在TXT文件中按照某一字符串取出该字符串所在的行方法
2018/12/10 Python
python三方库之requests的快速上手
2019/03/04 Python
python画图把时间作为横坐标的方法
2019/07/07 Python
Python 保持登录状态进行接口测试的方法示例
2019/08/06 Python
tensorflow对图像进行拼接的例子
2020/02/05 Python
Python如何发送与接收大型数组
2020/08/07 Python
美国大型的健身社区和补充商店:Bodybuilding.com
2016/09/06 全球购物
Lampenwelt德国:欧洲领先的灯具和照明在线商店
2018/08/05 全球购物
Geekbuying波兰:购买中国电子产品
2019/10/20 全球购物
最新结婚典礼主持词
2014/03/14 职场文书
快餐公司创业计划书
2014/04/29 职场文书
高中教师个人总结
2015/02/10 职场文书
培养联系人考察意见
2015/06/01 职场文书
教导处教学工作总结
2015/08/12 职场文书
python自动统计zabbix系统监控覆盖率的示例代码
2021/04/03 Python
Golang 实现超大文件读取的两种方法
2021/04/27 Golang