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


Posted in Javascript onFebruary 08, 2020

本文实例为大家分享了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>— — — 留言列表 — — —</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>

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

Javascript 相关文章推荐
JavaScript中令你抓狂的魔术变量
Nov 30 Javascript
用javascript实现无刷新更新数据的详细步骤 asp
Dec 26 Javascript
jquer之ajaxQueue简单实现代码
Sep 15 Javascript
JavaScript高级程序设计(第3版)学习笔记6 初识js对象
Oct 11 Javascript
Jquery解析json数据详解
Dec 26 Javascript
Javascript基础教程之if条件语句
Jan 18 Javascript
AngularJS学习笔记之ng-options指令
Jun 16 Javascript
使用jquery获取url及url参数的简单实例
Jun 14 Javascript
js微信分享API
Oct 11 Javascript
jQuery实现字体颜色渐变效果的方法
Mar 29 jQuery
vue data变量相互赋值后被实时同步的解决步骤
Aug 05 Javascript
vue引入Excel表格插件的方法
Apr 28 Vue.js
原生JS实现留言板功能
Feb 08 #Javascript
javascript实现留言板功能
Feb 08 #Javascript
JavaScript实现PC端横向轮播图
Feb 07 #Javascript
vue更改数组中的值实例代码详解
Feb 07 #Javascript
Vue 一键清空表单的实现方法
Feb 07 #Javascript
Vue中qs插件的使用详解
Feb 07 #Javascript
npm qs模块使用详解
Feb 07 #Javascript
You might like
PHP编实现程动态图像的创建代码
2008/09/28 PHP
PHP+ajax分页实例简析
2015/12/07 PHP
PHP生成各种常见验证码和Ajax验证过程
2016/01/10 PHP
详解PHP实现异步调用的4种方法
2016/03/14 PHP
Zend Framework框架之Zend_Mail实现发送Email邮件验证功能及解决标题乱码的方法
2016/03/21 PHP
PHP微信PC二维码登陆的实现思路
2017/07/13 PHP
JavaScript 对象链式操作测试代码
2010/04/25 Javascript
前台js改变Session的值(用ajax实现)
2012/12/28 Javascript
DOM基础教程之使用DOM + Css
2015/01/20 Javascript
微信企业号开发之微信考勤百度地图定位
2015/09/11 Javascript
jQuery实现浮动层随浏览器滚动条滚动的方法
2015/09/22 Javascript
js如何判断输入字符串长度
2015/12/16 Javascript
json传值以及ajax接收详解
2016/05/24 Javascript
浅谈JS继承_寄生式继承 &amp; 寄生组合式继承
2016/08/16 Javascript
js实现导航栏中英文切换效果
2017/01/16 Javascript
Bootstrap Table使用整理(三)
2017/06/09 Javascript
JavaScript获取tr td 的三种方式全面总结(推荐)
2017/08/15 Javascript
关于Angularjs中自定义指令一些有价值的细节和技巧小结
2018/04/22 Javascript
Angular 2使用路由自定义弹出组件toast操作示例
2019/05/10 Javascript
微信小程序云开发之模拟后台增删改查
2019/05/16 Javascript
Vue Element UI + OSS实现上传文件功能
2019/07/31 Javascript
js实现抽奖的两种方法
2020/03/19 Javascript
Python探索之爬取电商售卖信息代码示例
2017/10/27 Python
python实现全盘扫描搜索功能的方法
2019/02/14 Python
PyQt5 QListWidget选择多项并返回的实例
2019/06/17 Python
Django haystack实现全文搜索代码示例
2020/11/28 Python
使用Python+Appuim 清理微信的方法
2021/01/26 Python
python热力图实现简单方法
2021/01/29 Python
科茨沃尔德家居商店:Scotts of Stow
2018/06/29 全球购物
耐克中国官方商城:Nike中国
2018/10/18 全球购物
企划经理的岗位职责
2013/11/17 职场文书
小区门卫管理制度
2014/01/29 职场文书
党员教师工作决心书
2014/03/13 职场文书
CocosCreator入门教程之网络通信
2021/04/16 Javascript
Java中API的使用方法详情
2022/04/06 Java/Android
Linux中sftp常用命令整理
2022/06/28 Servers