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

网络编程 2024/11/16 佚名

2 0 1

极乐门资源网 Design By www.ioogu.com

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

## **JS实现简易留言板的增删功能**
一个很简单的留言板，实现**增删**功能，因为没有数据库，所以只是一个静态的留言板功能。
**修改**功能其实也可以添加，但是我现在技术不够，等以后可能会添加**修改**功能。
代码很简单，注释很清楚。```

<!DOCTYPE html>
<html lang="en">
 
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
 <style type="text/css">
 * {
  margin: 0;
  padding: 0;
  list-style: none;
 }
 
 .cle:after {
  height: 0;
  clear: both;
  visibility: hidden;
  display: none;
  content: "";
 }
 
 .bbslist {
  width: 400px;
  margin: 10px auto;
  border-radius: 5px;
  background: #A6A6A6;
  border: 1px solid #a6a6a6;
 }
 
 .bbslist>ul {
  margin: 8px 10px 10px 10px;
  display: block;
  clear: both;
  text-align: center;
  box-shadow: 3px 3px 25px #A6A6A6;
 }
 
 .bbslist>ul>li {
  background: #f4f4f4;
  margin: 10px 0;
  line-height: 30px;
  height: 30px;
  border-radius: 5px;
  text-align: center;
  box-shadow: 3px 3px 17px #A6A6A6;
  padding: 0 5px;
  font-size: 12px;
  border: 1px solid #a6a6a6;
  position: relative;
  transition: all 0.5s;
  animation: liBg 0.3s;
  overflow: hidden;
 }
 
 @keyframes liBg {
  from {
  background: #442222;
  opacity: 0;
  left: -20px;
  height: 0;
  }
 
  to {
  background: #f4f4f4;
  opacity: 1;
  left: 0;
  height: 30px;
  }
 }
 
 .mesDiv {
  width: 400px;
  background: #eee;
  height: 130px;
  border: 1px solid #a6a6a6;
  margin: 20px auto;
  border-radius: 5px;
  box-shadow: 3px 3px 17px #A6A6A6;
  animation: msgHeight 0.5s;
  overflow: hidden;
 }
 
 @keyframes msgHeight {
  from {
  height: 0;
  margin-top: 50px;
  opacity: 0;
  }
 
  to {
  height: 130px;
  margin-top: 20px;
  opacity: 1;
  }
 }
 
 .inputSty {
  width: 90%;
  height: 30px;
  display: block;
  color: #666;
  border: 1px solid #ddd;
  padding-left: 5px;
  line-height: 30px;
  font-size: 12px;
  clear: both;
  margin: 10px auto;
  border-radius: 5px;
 }
 
 .btnSty {
  width: 30%;
  height: 25px;
  margin: 0 auto;
  display: block;
  cursor: pointer;
  transition: all 0.2s;
  border-radius: 5px;
  box-shadow: 3px 3px 10px #A6A6A6;
 }
 
 .btnSty:hover {
  width: 20%;
  height: 30px;
  border-radius: 5px;
  box-shadow: 3px 3px 10px #A6A6A6;
 }
 
 .userSty {
  width: 25%;
  height: 25px;
  margin: 8px 18px 3px 18px;
  border-radius: 5px;
  box-shadow: 3px 3px 10px #A6A6A6;
 }
 
 .dd {
  width: 135px;
  height: 10px;
  position: relative;
  top: -10px;
  font-size: 8px;
  float: right;
  clear: both;
 }
 
 .delbtn{
  width: 35px;
  height: 22px;
  border-radius: 5px;
  position: relative;
  top: 5px;
  right: -4px;
  float: right;
  z-index: 2;
  color: red;
  /* box-shadow: 2px 2px 3px #A6A6A6; */
 }
 </style>
</head>
 
<body>
 <div class="mesDiv">
 <input id="userId" class="userSty" type="button" value="您的姓名">
 <input id="msgId" class="inputSty" type="text" placeholder="">
 <input id="btnId" class="btnSty" type="button" value="提交留言">
 </div>
 
 <div class="bbslist cle" id="masMan">
 <ul id="ulId">
  <li>—&nbsp;—&nbsp;—&nbsp;留言列表&nbsp;—&nbsp;—&nbsp;—</li>
 </ul>
 </div>
 <script type="text/javascript">
 //定义一个函数用来重复获取gId("value"),中value的ID属性
 function gId(n) {
  return document.getElementById(n);
 }
 //获取姓名
 gId("userId").onclick = function () {
  var username = prompt("请输入您的姓名:");
  alert("您好！" + username + "。");
  gId("userId").value = username + "的留言：";
 } 
 //删除留言
 function delMsg(d) {
  var parentUl = d.parentNode;
  var parentDiv = parentUl.parentNode;
  parentDiv.removeChild(parentUl);
 }
 //提交留言
 gId('btnId').onclick = function () {
  //获取时间
  var today = new Date();
  var year = today.getFullYear();
  var month = today.getMonth() + 1;
  var day = today.getDate();
  var hours = today.getHours();
  var min = today.getMinutes();
  var second = today.getSeconds();
  var time = year + "年" + month + "月" + day + "日" + " " + hours + "时" + min + "分" + second + "秒";
  // var v = ;
  if (gId('msgId').value === '') {
  alert("留言不能为空");
  return false;
  }
  //创建li
  else {
  //创建一个新元素ul
  var ulcrate = document.createElement('ul');
  //创建新元素li
  var licrate = document.createElement('li');
  //创建一个时间盒子
  var divcrate = document.createElement('div');
  //创建一个删除按钮
  var delbtn = document.createElement('input');
  //给删除按钮赋属性
  delbtn.setAttribute('type', 'button');
  delbtn.setAttribute('class', 'delbtn');
  delbtn.setAttribute('value', '删除');
  delbtn.setAttribute('onclick', 'delMsg(this)');
  //给创建的ul赋属性
  ulcrate.setAttribute('id', 'ulId');
  
  //给时间盒子设置属性
  // divcrate.setAttribute('class', 'dd');
  divcrate.className = "dd";
  //向li里添加在输入框中获取的值
  licrate.innerHTML = gId('msgId').value;
  
  
  //把，删除按钮，留言内容，时间盒子添加到创建的ul里
  ulcrate.appendChild(delbtn);
  ulcrate.appendChild(licrate); 
  ulcrate.appendChild(divcrate);
  //给时间盒子传递时间
  divcrate.innerHTML = time;
  //把创建的ul添加到最外层的div里
  gId('masMan').appendChild(ulcrate);
  //留言内容初始化
  gId("msgId").value = "";
  }
 }
 </script>
</body>
</html>

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

js,留言板

标签：

js,留言板

极乐门资源网 Design By www.ioogu.com

极乐门资源网 免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

极乐门资源网 Design By www.ioogu.com

评论“JS实现简易留言板增删功能”

暂无JS实现简易留言板增删功能的评论...

www.ioogu.com 极乐门资源网

139,976影音资源

144,792福利资源

21,817软件资源

631,128技术资源

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

js,留言板

JavaScript canvas实现雪花随机动态飘落

原生JS实现留言板功能

评论“JS实现简易留言板增删功能”

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

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

js,留言板

JavaScript canvas实现雪花随机动态飘落

原生JS实现留言板功能

评论“JS实现简易留言板增删功能”

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

RTX 5090要首发性能要翻倍！三星展示GDDR7显存