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 相关文章推荐
JavaScript入门教程(9) Document文档对象
Jan 31 Javascript
纯JAVASCRIPT图表动画插件Highcharts Examples
Apr 16 Javascript
仿新浪微博登陆邮箱提示效果的js代码
Aug 02 Javascript
node.js入门教程
Jun 01 Javascript
JavaScript实现判断图片是否加载完成的3种方法整理
Mar 13 Javascript
多种jQuery绑定事件的实现方式
Jun 13 Javascript
在JS中如何把毫秒转换成规定的日期时间格式实例
May 11 Javascript
Angular实现双向折叠列表组件的示例代码
Nov 21 Javascript
解决Vue+Element ui开发中碰到的IE问题
Sep 03 Javascript
详解无限滚动插件vue-infinite-scroll源码解析
May 12 Javascript
vue-cli3中vue.config.js配置教程详解
May 29 Javascript
详解微信小程序工程化探索之webpack实战
Apr 20 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
ThinkPHP的MVC开发机制实例解析
2014/08/23 PHP
PHP获取POST数据的几种方法汇总
2015/03/03 PHP
[原创]PHP字符串中插入子字符串方法总结
2016/05/06 PHP
laravel框架实现去掉URL中index.php的方法
2019/10/12 PHP
php实现简易计算器
2020/08/28 PHP
js 操作符实例代码
2009/10/24 Javascript
推荐 21 款优秀的高性能 Node.js 开发框架
2014/08/18 Javascript
JS实现Fisheye效果动感放大菜单代码
2015/10/21 Javascript
JS使用cookie设置样式的方法
2016/06/30 Javascript
javascript简单实现跟随滚动条漂浮的返回顶部按钮效果
2016/08/19 Javascript
郁闷!ionic中获取ng-model绑定的值为undefined如何解决
2016/08/27 Javascript
BootStrap3中模态对话框的使用
2017/01/06 Javascript
JS实现隔行换色的表格排序
2017/03/27 Javascript
Mongoose实现虚拟字段查询的方法详解
2017/08/15 Javascript
mongoose更新对象的两种方法示例比较
2017/12/19 Javascript
node中的session的具体使用
2018/09/14 Javascript
详解微信小程序网络请求接口封装实例
2019/05/02 Javascript
VUE+elementui面包屑实现动态路由详解
2019/11/04 Javascript
使用jquery实现轮播图效果
2021/01/02 jQuery
[02:44]完美大师赛主赛事淘汰赛第二日观众采访
2017/11/24 DOTA
Python判断变量是否已经定义的方法
2014/08/18 Python
探寻python多线程ctrl+c退出问题解决方案
2014/10/23 Python
Python实用日期时间处理方法汇总
2015/05/09 Python
简单谈谈Python的pycurl模块
2018/04/07 Python
python递归法解决棋盘分割问题
2019/07/17 Python
Python统计分析模块statistics用法示例
2019/09/06 Python
解决Python 函数声明先后顺序出现的问题
2020/09/02 Python
html5实现多文件的上传示例代码
2014/02/13 HTML / CSS
中国领先的专业演出票务网:永乐票务
2016/08/29 全球购物
澳大利亚最大的在线美发和美容零售商之一:My Hair Care & Beauty
2019/08/24 全球购物
JYSK加拿大:购买家具、床垫、家居装饰等
2020/02/14 全球购物
未受刑事制裁公证证明
2014/09/20 职场文书
党员“四风”方面存在问题及整改措施
2014/09/24 职场文书
2015七夕情人节宣传语
2015/07/14 职场文书
Win11怎么启动任务管理器?Win11启动任务管理器的几种方法
2021/11/23 数码科技
国产动画《万圣街》日语配音版制作决定!
2022/03/20 国漫