原生JavaScript实现留言板


Posted in Javascript onJanuary 10, 2021

本文实例为大家分享了JavaScript实现留言板的具体代码,供大家参考,具体内容如下

效果:

原生JavaScript实现留言板

代码:

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 <style>
 #txt2{
 width:400px;
 height:50px;
 margin-top:5px;
 }
 #span1{
 margin-left:200px;
 }
 #box{
 width:400px;
 /*height:400px;*/
 /*border:1px solid gray;*/
 }
 #box .item{
 height:80px;
 border-bottom:dashed 1px lightgrey
 }
 #box .c1{
 height:30px;
 }
 #box .c1 span{
 float:left;
 }
 #box .c1 a{
 float:right;
 margin-right:20px;
 text-decoration: none;
 color:black;
 }
 
 </style>
 </head>
 <body>
 <div>
 说点什么吗......
 </div>
 <div>
 <input type="text" placeholder="洪七公" id="txt1"/>
 </div>
 <div>
 <textarea name="" id="txt2" maxlength="10"></textarea>
 </div>
 <div id="div3">
 <span id="span1">还能输入<span id="span2">10</span>个字</span>
 <input type="button" value = "发布" id="btn"/>
 </div>
 <div>
 <div>大家在说</div>
 </div>
 <div id="box">
 <div class = "item">
 <div class = "c1">
  <span>乔峰:</span>
  <span>今天............</span>
  <a href = "#">删除</a>
 </div>
 <div>01月04日 01:28</div>
 </div>
 <div class = "item">
 <div class = "c1">
  <span>乔峰:</span>
  <span>今天............</span>
  <a href = "#">删除</a>
 </div>
 <div>01月04日 01:28</div>
 </div>
 </div>
 </body>
 <script type="text/javascript">
 //获取按钮
 var btn = document.getElementById("btn");
 var box = document.getElementById("box");
 var txt1 = document.getElementById("txt1");
 var txt2 = document.getElementById("txt2");
 
 btn.onclick = function () {
 //console.log(this);
 var divItem = document.createElement("div");
 divItem.className = "item";
 //box.appendChild(divItem);//追加节点
 box.insertBefore(divItem, box.firstChild);//插入节点
 
 var div1 = document.createElement("div");
 div1.className = "c1";
 var div2 = document.createElement("div");
 divItem.appendChild(div1);
 divItem.appendChild(div2);
 
 //设置第1个div的内容
 var span1 = document.createElement("span");
 div1.appendChild(span1);
 span1.innerHTML = txt1.value + " : ";
 
 var span2 = document.createElement("span");
 div1.appendChild(span2);
 span2.innerHTML = txt2.value;
 
 var a = document.createElement("a");
 a.href = "#";
 a.innerHTML = "删除";
 div1.appendChild(a);
 //a的删除事件
 a.onclick = function () {
  this.parentNode.parentNode.remove();
 }
 
 var date = new Date();
 //var str = date.toLocaleString();
 var m = date.getMonth() + 1;
 var d = date.getDate();
 var h = date.getHours();
 var m2 = date.getMinutes();
 m = fun1(m);
 d = fun1(d);
 h = fun1(h);
 m2 = fun1(m2);
 
 var str = m + "月" + d + "日 " + h + ":" + m2;
 
 div2.innerHTML = str;
 
 }
 
 //封装一个日期格式化的函数
 function fun1(x) {
 if (x < 10) {
  return "0" + x;
 }
 return x;
 }
 
 var span2 = document.getElementById("span2");
 txt2.onkeyup = function () {
 var str = this.value;
 console.log(str.length);
 span2.innerHTML = 10 - str.length;
 }
 


 </script>
</html>

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

Javascript 相关文章推荐
js获取上传文件大小示例代码
Apr 10 Javascript
jQuery统计上传文件大小的方法
Jan 24 Javascript
jQuery实现大转盘抽奖活动仿QQ音乐代码分享
Aug 21 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(上)
Oct 28 Javascript
JavaScript中return用法示例
Nov 29 Javascript
ES6中参数的默认值语法介绍
May 03 Javascript
jquery+ajax实现省市区三级联动 (封装和不封装两种方式)
May 15 jQuery
js自定义Tab选项卡效果
Jun 05 Javascript
BootStrap Select清除选中的状态恢复默认状态
Jun 20 Javascript
Vue 父子组件的数据传递、修改和更新方法
Mar 01 Javascript
详解ES6新增字符串扩张方法includes()、startsWith()、endsWith()
May 12 Javascript
token 机制和实现方式
Dec 15 Javascript
JavaScript实现点击切换验证码及校验
Jan 10 #Javascript
JavaScript canvas实现雨滴特效
Jan 10 #Javascript
多种类型jQuery网页验证码插件代码实例
Jan 09 #jQuery
利用JS判断元素是否为数组的方法示例
Jan 08 #Javascript
JS实现页面侧边栏效果探究
Jan 08 #Javascript
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
Jan 08 #Vue.js
vue-quill-editor插入图片路径太长问题解决方法
Jan 08 #Vue.js
You might like
PHP中$_SERVER的详细参数与说明介绍
2013/10/26 PHP
win7计划任务定时执行PHP脚本设置图解
2014/05/09 PHP
针对thinkPHP5框架存储过程bug重写的存储过程扩展类完整实例
2018/06/16 PHP
JObj预览一个JS的框架
2008/03/13 Javascript
JSDoc 介绍使用规范JsDoc的使用介绍
2011/02/12 Javascript
javascript一些实用技巧小结
2011/03/18 Javascript
JavaScript排序算法之希尔排序的2个实例
2014/04/04 Javascript
js实现仿京东2级菜单效果(带延时功能)
2015/08/27 Javascript
jQuery的Ajax用户认证和注册技术实例教程(附demo源码)
2015/12/08 Javascript
js中实现字符串和数组的相互转化详解
2016/01/24 Javascript
JavaScript中的call和apply的用途以及区别
2017/01/11 Javascript
微信小程序商城项目之商品属性分类(4)
2017/04/17 Javascript
Vue 莹石摄像头直播视频实例代码
2018/08/31 Javascript
JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动效果示例
2019/01/29 Javascript
JavaScript封闭函数及常用内置对象示例
2019/05/13 Javascript
如何基于原生javaScript生成带图片的二维码
2019/11/21 Javascript
vue项目中使用particles实现粒子背景效果及遇到的坑(按钮没有点击响应)
2020/02/11 Javascript
Python循环语句之break与continue的用法
2015/10/14 Python
Python读取文件内容的三种常用方式及效率比较
2017/10/07 Python
python中使用iterrows()对dataframe进行遍历的实例
2018/06/09 Python
Python判断两个文件是否相同与两个文本进行相同项筛选的方法
2019/03/01 Python
Python中super函数用法实例分析
2019/03/18 Python
python 连续不等式语法糖实例
2020/04/15 Python
在tensorflow实现直接读取网络的参数(weight and bias)的值
2020/06/24 Python
python中关于数据类型的学习笔记
2020/07/19 Python
python多线程semaphore实现线程数控制的示例
2020/08/10 Python
Python 连接 MySQL 的几种方法
2020/09/09 Python
Joie官方网上商店:购买服装和女装配饰
2018/06/05 全球购物
Otticanet意大利:最顶尖的世界名牌眼镜, 能得到打折季的价格
2019/03/10 全球购物
2014年教师培训的自我评价
2014/01/03 职场文书
网络管理员岗位职责
2014/03/17 职场文书
项目战略合作意向书
2015/05/08 职场文书
当幸福来敲门观后感
2015/06/01 职场文书
征求意见函
2015/06/05 职场文书
七年级作文之雪景
2019/11/18 职场文书
Golang map映射的用法
2022/04/22 Golang