JavaScript实现留言板案例
更新时间：2020年03月17日 14:55:15 作者：故里有长安、
这篇文章主要为大家详细介绍了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：
点击删除，可以删除留言：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
GUID（全局统一标识符）是指在一台机器上生成的数字，下面为大家介绍下原生JavaScript生成GUID的实现，需要的朋友不要错过2014-09-09
websocket是H5才开始提供的一种在单个TCP连接上进行全双工通讯的协议,下面这篇文章主要给大家介绍了关于JS前端中WebSocket使用的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-03-03
Javascript操纵Cookie实现购物车程序...2006-11-11
这篇文章主要介绍了JavaScript 实现锅拍灰太狼小游戏,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-09-09
这篇文章主要介绍了js中用闭包遍历树状数组的方法,需要的朋友可以参考下2014-03-03
这篇文章主要介绍了javascript解析json格式的数据方法详解，文章通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-08-08
这篇文章主要介绍了怎样用Javascript实现函数柯里化与反柯里化，想了解函数柯里化的同学，可以参考下2021-04-04
在很多需要搜索的网站, 都会有一个自动完成的搜索框. 方便用户查找他们想要的搜索词. 帮助用户快速找到自己想要的结果.接下来通过本文给大家介绍JavaScript实现搜索框的自动完成功能(一)，需要的朋友参考下吧2016-02-02
这篇文章主要介绍了Bootstrap表格和栅格分页的相关资料,具有参考借鉴价值，特此分享到脚本之家平台供大家参考，需要的朋友可以参考下2016-05-05
这篇文章主要介绍了JS实现图片预加载之无序预加载功能代码,非常不错，具有参考借鉴价值，需要的朋友可以参考下2017-05-05
最新评论