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 四则运算精度修正函数代码
May 31 Javascript
JS 数字转换为大写金额的简单实例
Aug 04 Javascript
Vue自定义指令详解
Jul 28 Javascript
WebStorm ES6 语法支持设置&amp;babel使用及自动编译(详解)
Sep 08 Javascript
vue综合组件间的通信详解
Nov 06 Javascript
原生js实现移动端触摸轮播的示例代码
Dec 22 Javascript
使用vue的transition完成滑动过渡的示例代码
Jun 25 Javascript
深入解析ES6中的promise
Nov 08 Javascript
解决vue移动端适配问题
Dec 12 Javascript
浅谈在Vue.js中如何实现时间转换指令
Jan 06 Javascript
JavaScript数据结构与算法之二叉树插入节点、生成二叉树示例
Feb 21 Javascript
vant-ui框架的一个bug(解决切换后onload不触发)
Nov 11 Javascript
原生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
用文本作数据处理
2006/10/09 PHP
Windows下IIS6/Apache2.2.4+MySQL5.2+PHP5.2.1安装配置方法
2007/05/03 PHP
PHP session有效期session.gc_maxlifetime
2011/04/20 PHP
php全排列递归算法代码
2012/10/09 PHP
php中3种方法删除字符串中间的空格
2014/03/10 PHP
PHP判断文件是否被引入的方法get_included_files用法示例
2016/11/29 PHP
php获取文件名称和扩展名的方法
2017/02/07 PHP
php7 新增功能实例总结
2020/05/25 PHP
js验证模型自我实现的具体方法
2013/06/21 Javascript
JQUERY 设置SELECT选中项代码
2014/02/07 Javascript
nodejs中实现路由功能
2014/12/29 NodeJs
Javascript实现Array和String互转换的方法
2015/12/21 Javascript
AngularJS入门教程之与服务器(Ajax)交互操作示例【附完整demo源码下载】
2016/11/02 Javascript
react-native-tab-navigator组件的基本使用示例代码
2017/09/07 Javascript
vue-cli之router基本使用方法详解
2017/10/17 Javascript
js实现json数组分组合并操作示例
2019/02/12 Javascript
基于vue写一个全局Message组件的实现
2019/08/15 Javascript
JavaScript构造函数原理及实现流程解析
2020/11/19 Javascript
Python实现的生成格雷码功能示例
2018/01/24 Python
Python中利用xpath解析HTML的方法
2018/05/14 Python
Python2 与Python3的版本区别实例分析
2020/03/30 Python
Python自动登录QQ的实现示例
2020/08/28 Python
HTML5之多线程(Web Worker)
2019/01/02 HTML / CSS
匡威英国官网:Converse英国
2018/12/02 全球购物
世界上最伟大的马产品:Equiderma
2020/01/07 全球购物
有模特经验的简历自我评价
2013/09/19 职场文书
自我评价怎么写好呢?
2013/12/05 职场文书
行政总监岗位职责
2013/12/05 职场文书
应聘自荐信
2013/12/14 职场文书
初中班主任评语大全
2014/04/24 职场文书
优秀乡村医生事迹材料
2014/05/28 职场文书
理财计划书
2014/08/14 职场文书
2014年预备党员端正入党动机思想汇报
2014/09/13 职场文书
《西门豹》教学反思
2016/02/23 职场文书
盘点2020年适合农村地区创业的项目
2019/10/16 职场文书
创业计划书之溜冰场
2019/10/25 职场文书