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 相关文章推荐
jquery isEmptyObject判断是否为空对象的函数
Feb 14 Javascript
浅析XMLHttpRequest的缓存问题
Dec 13 Javascript
推荐6款基于jQuery实现图片效果插件
Dec 07 Javascript
JavaScript控制两个列表框listbox左右交换数据的方法
Mar 18 Javascript
元素绑定click点击事件方法
Jun 08 Javascript
jQuery 获取跨域XML(RSS)数据的相关总结分析
May 18 Javascript
js实现百度地图定位于地址逆解析,显示自己当前的地理位置
Dec 08 Javascript
React实现点击删除列表中对应项
Jan 10 Javascript
javascript表单正则应用
Feb 04 Javascript
关于Vue.nextTick()的正确使用方法浅析
Aug 25 Javascript
微信小程序提交form操作示例
Dec 30 Javascript
解决新建一个vue项目过程中遇到的问题
Oct 22 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
自动生成文章摘要的代码[PHP 版本]
2007/03/20 PHP
PHP使用memcache缓存技术提高响应速度的方法
2014/12/26 PHP
PHP+jquery实时显示网站在线人数的方法
2015/01/04 PHP
laravel中命名路由的使用方法
2017/02/24 PHP
thinkphp3.2实现在线留言提交验证码功能
2017/07/19 PHP
php利用array_search与array_column实现二维数组查找
2019/07/08 PHP
Laravel 自定命令以及生成文件的例子
2019/10/23 PHP
laravel框架语言包拓展实现方法分析
2019/11/22 PHP
prototype Element学习笔记(篇一)
2008/10/26 Javascript
基于jquery的一个简单的脚本验证插件
2010/04/05 Javascript
JQuery1.4+ Ajax IE8 内存泄漏问题
2010/10/15 Javascript
嵌入式iframe子页面与父页面js通信的方法
2015/01/20 Javascript
谈谈因Vue.js引发关于getter和setter的思考
2016/12/02 Javascript
微信小程序 less文件编译成wxss文件实现办法
2016/12/05 Javascript
Vue2.0实现1.0的搜索过滤器功能实例代码
2017/03/20 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(上)
2017/04/21 Javascript
Vue2.0 实现移动端图片上传功能
2018/05/30 Javascript
使用apifm-wxapi模块中的问题及解决方法
2019/08/05 Javascript
关于vue项目中搜索节流的实现代码
2019/09/17 Javascript
jQuery 判断元素是否存在然后按需加载内容的实现代码
2020/01/16 jQuery
python绘图库Matplotlib的安装
2014/07/03 Python
在Django的视图(View)外使用Session的方法
2015/07/23 Python
PyQt5 QListWidget选择多项并返回的实例
2019/06/17 Python
高山背包:High Sierra
2017/11/23 全球购物
数据库笔试题
2013/05/09 面试题
中学实习教师自我鉴定
2013/12/12 职场文书
物业管理毕业生的自我评价
2014/02/17 职场文书
导师工作推荐信范文
2014/05/17 职场文书
明星员工获奖感言
2014/08/14 职场文书
向国旗敬礼活动总结
2014/09/27 职场文书
成本会计实训报告
2014/11/05 职场文书
2015年环保局工作总结
2015/05/22 职场文书
海底两万里读书笔记
2015/06/26 职场文书
《水上飞机》教学反思
2016/02/20 职场文书
餐厅营销的秘密:为什么老顾客会流水?
2019/08/08 职场文书
Logback 使用TurboFilter实现日志级别等内容的动态修改操作
2021/08/30 Java/Android