javascript实现留言板功能


Posted in Javascript onFebruary 08, 2020

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

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
 *{ 
    margin: 0;
    padding: 0;
 }
 .box{ /*设置最外层盒子*/
 width: 600px;
 border: 1px solid #aaa;
 padding: 20px 10px;
 margin: 100px auto;
 }
 #plTxt{ /*设置文本域*/
 width: 450;
 resize: none;/*防止用户拖拽*/
 }
 .box ul{ /*将ul列表去除前面的点*/
 list-style: none;
 }
 .box ul li{ /*设置li中的评论文字样式*/
 width: 450px;
 line-height: 30px;
 border-bottom: 1px dotted #aaa;
 margin-left: 50px;
 }
 .box ul li a{ /*将删除的样式更改颜色,向右浮动,没有下划线*/
 color: orange;
 float: right; 
 text-decoration: none;
 
 }
 .box ul li .time{ /*将li中的时间改为向右浮动和改颜色*/
 color: #4f0;
 float: right;
 }
 </style>
 <script>
  window.onload = function(){
  function $(id){
  return document.getElementById(id);
  }
  var ul=document.createElement('ul'); //创建ul标签
  $('pl').appendChild(ul); //把ul标签放在div里面
  $('btn').onclick = function (){
     var txt = $('plTxt').value; //此时不能用$('plTxt').innerHTML,成对的标签使用innerHTNL,获得里面文字;
     if(txt.length==0){  //判断输入为空的情况;
     alert('不能发表为空的评论');
     }else{
     var li=document.createElement('li'); //创建li标签
     ul.appendChild(li);  // li添加为ul的子标签
     txt = txt+ "<a href='javascript:void(0)'>删除</a>" + "<span class='time'>" + new Date().toLocaleTimeString() + "</span>";
      li.innerHTML = txt; //将文本赋给li标签中显示
     var dels =document.getElementsByTagName('a'); //获取所有标签a的id存到数组中
     for(var j=0; j<dels.length; j++){
     dels[j].onclick=function(){ //将所有a标签设置点击事件
             //删除当前评论,就是删除当前“删除”所在超链接的li
      ul.removeChild(this.parentNode);
     }
     }
     }
    }
  }
 </script>
</head>
<body>
 <div class="box" id="pl">
 <span>发表评论:</span>
 <textarea id="plTxt" cols="30" rows="10"></textarea>
 <input type="button" value="评论" id="btn" >
 </div>
 
</body>
</html>

javascript实现留言板功能

新增加的文字放在后面,将代码中的

ul.appendChild(li); //(li添加为ul的子标签,每次都放在末尾)换成:
ul.insertBefore(li,ul.children[0]); //——这行代码为插入,将当前的li标签,插在ul的第一个子标签之前,即新的li标签每次都插入在最前面。

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

Javascript 相关文章推荐
JS下拉框内容左右移动效果的具体实现
Jul 10 Javascript
jQuery的缓存机制浅析
Jun 07 Javascript
js中键盘事件实例简析
Jan 10 Javascript
深入浅析javascript立即执行函数
Oct 23 Javascript
JavaScript学习笔记之检测客户端类型是(引擎、浏览器、平台、操作系统、移动设备)
Dec 03 Javascript
js学习笔记之事件处理模型
Oct 31 Javascript
bootstrap jquery dataTable 异步ajax刷新表格数据的实现方法
Feb 10 Javascript
Vue 组件修改根实例的数据的方法
Apr 02 Javascript
微信小程序文章详情页跳转案例详解
Jul 09 Javascript
微信小程序如何使用canvas二维码保存至手机相册
Jul 15 Javascript
layui的表单提交以及验证和修改弹框的实例
Sep 09 Javascript
在LayUI图片上传中,解决由跨域问题引起的请求接口错误的方法
Sep 24 Javascript
JavaScript实现PC端横向轮播图
Feb 07 #Javascript
vue更改数组中的值实例代码详解
Feb 07 #Javascript
Vue 一键清空表单的实现方法
Feb 07 #Javascript
Vue中qs插件的使用详解
Feb 07 #Javascript
npm qs模块使用详解
Feb 07 #Javascript
Js参数RSA加密传输之jsencrypt.js的使用
Feb 07 #Javascript
Vue使用JSEncrypt实现rsa加密及挂载方法
Feb 07 #Javascript
You might like
玩家交还《星际争霸》原始码光盘 暴雪报以厚礼
2017/05/05 星际争霸
外媒评选出10支2020年最受欢迎的Dota2战队
2021/03/05 DOTA
php从右向左/从左向右截取字符串的实现方法
2011/11/28 PHP
深入理解PHP变量的值类型和引用类型
2015/10/21 PHP
Symfony2实现从数据库获取数据的方法小结
2016/03/18 PHP
YII2.0框架行为(Behavior)深入详解
2019/07/26 PHP
javascript实现TreeView 无刷新展开的实例代码
2013/07/13 Javascript
详解JavaScript中的blink()方法的使用
2015/06/08 Javascript
jquery实现简单手风琴菜单效果实例
2015/06/13 Javascript
论JavaScript模块化编程
2016/03/07 Javascript
Bootstrap和Java分页实例第二篇
2016/12/23 Javascript
JavaScript和JQuery获取DIV值的方法示例
2017/03/07 Javascript
Vue中的数据监听和数据交互案例解析
2017/07/12 Javascript
如何将你的AngularJS1.x应用迁移至React的方法
2018/02/01 Javascript
JS设计模式之命令模式概念与用法分析
2018/02/06 Javascript
js防抖函数和节流函数使用场景和实现区别示例分析
2020/04/11 Javascript
[07:08]2014DOTA2西雅图国际邀请赛 小组赛7月11日TOPPLAY
2014/07/11 DOTA
[46:23]完美世界DOTA2联赛PWL S2 FTD vs Magma 第一场 11.20
2020/11/23 DOTA
Python线程详解
2015/06/24 Python
python3.5使用tkinter制作记事本
2016/06/20 Python
Django ORM 查询管理器源码解析
2019/08/05 Python
Python 3 使用Pillow生成漂亮的分形树图片
2019/12/24 Python
Python日期格式和字符串格式相互转换的方法
2020/02/18 Python
Python爬虫工具requests-html使用解析
2020/04/29 Python
Python定时任务APScheduler原理及实例解析
2020/05/30 Python
Ariat英国官网:为世界顶级马术运动员制造最优质的鞋类和服装
2020/02/14 全球购物
澳大利亚厨房和家用电器购物网站:Bing Lee
2021/01/11 全球购物
触发器(trigger)的功能都有哪些?写出一个触发器的例子
2012/09/17 面试题
2014学校庆三八妇女节活动总结
2014/03/01 职场文书
机电一体化求职信
2014/03/10 职场文书
维护民族团结演讲稿
2014/08/27 职场文书
机关副主任个人四风问题整改措施
2014/09/26 职场文书
先进典型发言材料
2014/12/30 职场文书
python tkinter Entry控件的焦点移动操作
2021/05/22 Python
使用Python脚本对GiteePages进行一键部署的使用说明
2021/05/27 Python
Pytorch distributed 多卡并行载入模型操作
2021/06/05 Python