原生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 相关文章推荐
javascript 树控件 比较好用
Jun 11 Javascript
window.event.keyCode兼容IE和Firefox实现js代码
May 30 Javascript
再次谈论React.js实现原生js拖拽效果引起的一系列问题
Apr 03 Javascript
JavaScript实现类似拉勾网的鼠标移入移出效果
Oct 27 Javascript
微信小程序 loading 详解及实例代码
Nov 09 Javascript
vue实现全选、反选功能
Nov 17 Javascript
Vue框架中正确引入JS库的方法介绍
Jul 30 Javascript
微信小程序顶部可滚动导航效果
Oct 31 Javascript
p5.js入门教程之平滑过渡(Easing)
Mar 16 Javascript
node.js利用socket.io实现多人在线匹配联机五子棋
May 31 Javascript
vue.js编译时给生成的文件增加版本号
Sep 17 Javascript
vue地址栏直接输入路由无效问题的解决
Nov 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开发入门教程之面向对象
2006/12/05 PHP
PHP统计二维数组元素个数的方法
2013/11/12 PHP
理解PHP中的stdClass类
2014/04/18 PHP
PHP使用mysql与mysqli连接Mysql数据库用法示例
2016/07/07 PHP
laravel实现按时间日期进行分组统计方法示例
2019/03/23 PHP
浅析PHP echo 和 print 语句
2020/06/30 PHP
基于jquery的高性能td和input切换并可修改内容实现代码
2011/01/09 Javascript
javascript 学习笔记(八)javascript对象
2011/04/12 Javascript
js中关于String对象的replace使用详解
2011/05/24 Javascript
基于JavaScript实现继承机制之构造函数+原型链混合方式的使用详解
2013/05/07 Javascript
JQuery中的事件及动画用法实例
2015/01/26 Javascript
JavaScript图片轮播代码分享
2015/07/31 Javascript
利用VUE框架,实现列表分页功能示例代码
2017/01/12 Javascript
jquery Easyui Datagrid实现批量操作(编辑,删除,添加)
2017/02/20 Javascript
JavaScript 实现HTML DOM增删改查操作的常见方法详解
2020/01/04 Javascript
使用 Opentype.js 生成字体子集的实例代码详解
2020/05/25 Javascript
一篇超完整的Vue新手入门指导教程
2020/11/18 Vue.js
python实现的文件夹清理程序分享
2014/11/22 Python
python简单读取大文件的方法
2016/07/01 Python
Python基础中所出现的异常报错总结
2016/11/19 Python
简单谈谈python中的lambda表达式
2018/01/19 Python
Python实现的求解最小公倍数算法示例
2018/05/03 Python
Python的缺点和劣势分析
2019/11/19 Python
Python小程序之在图片上加入数字的代码
2019/11/26 Python
使用Pandas的Series方法绘制图像教程
2019/12/04 Python
Python作用域与名字空间原理详解
2020/03/21 Python
Python -m参数原理及使用方法解析
2020/08/21 Python
THE OUTNET英国官网:国际设计师品牌折扣网站
2016/08/14 全球购物
英国知名的护肤彩妆与时尚配饰大型综合零售电商:Unineed
2016/11/21 全球购物
巴基斯坦电子产品购物网站:Home Shopping
2017/09/14 全球购物
联想澳大利亚官网:Lenovo Australia
2018/01/18 全球购物
存储过程的优点有哪些
2012/09/27 面试题
公司董事长职责
2013/12/12 职场文书
社会体育专业大学生职业生涯规划书
2014/09/17 职场文书
Windows 11要来了?微软文档揭示Win11太阳谷 / Win10有两个不同版本
2021/11/21 数码科技
Java实现HTML转为Word的示例代码
2022/06/28 Java/Android