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 相关文章推荐
关于this和self的使用说明
Aug 01 Javascript
js 上传图片预览问题
Dec 06 Javascript
JS调试必备的5个debug技巧
Mar 07 Javascript
javascript的switch用法注意事项分析
Feb 02 Javascript
详解AngularJS过滤器的使用
Mar 11 Javascript
JS关闭窗口时产生的事件及用法示例
Aug 20 Javascript
AngularJS实现的回到顶部指令功能实例
May 17 Javascript
如何将 jQuery 从你的 Bootstrap 项目中移除(取而代之使用Vue.js)
Jul 17 jQuery
Three.js入门之hello world以及如何绘制线
Sep 25 Javascript
AngularJS模态框模板ngDialog的使用详解
May 11 Javascript
node全局变量__dirname与__filename的区别
Jan 14 Javascript
vue-cli3+ts+webpack实现多入口多出口功能
May 30 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
Views rows style模板重写代码
2011/05/16 PHP
php中文乱码怎么办如何让浏览器自动识别utf-8
2014/01/15 PHP
php基于ob_start(ob_gzhandler)实现网页压缩功能的方法
2017/02/18 PHP
各浏览器对click方法的支持差异小结
2011/07/31 Javascript
jQuery 自定义函数写法分享
2012/03/30 Javascript
一个css与js结合的下拉菜单支持主流浏览器
2014/10/08 Javascript
全面解析Bootstrap图片轮播效果
2015/12/03 Javascript
谷歌showModalDialog()方法不兼容出现对话窗口的解决办法
2016/02/15 Javascript
用jquery获取自定义的标签属性的值简单实例
2016/09/17 Javascript
javaScript 逻辑运算符使用技巧整理
2017/05/03 Javascript
VUE使用vuex解决模块间传值问题的方法
2017/06/01 Javascript
微信小程序实现点击按钮修改文字大小功能【附demo源码下载】
2017/12/06 Javascript
Vue.js 十五分钟入门图文教程
2018/09/12 Javascript
jquery的$().each和$.each的区别
2019/01/18 jQuery
JavaScript中AOP的实现与应用
2019/05/06 Javascript
微信小程序webview与h5通过postMessage实现实时通讯的实现
2019/08/20 Javascript
Vue实现验证码功能
2019/12/03 Javascript
浅谈JS for循环中使用break和continue的区别
2020/07/21 Javascript
在HTML中使用JavaScript的两种方法
2020/12/24 Javascript
vue中配置scss全局变量的步骤
2020/12/28 Vue.js
Javascript实现关闭广告效果
2021/01/29 Javascript
手把手教你python实现SVM算法
2017/12/27 Python
python 快速把超大txt文件转存为csv的实例
2018/10/26 Python
Python和Go语言的区别总结
2019/02/20 Python
对python中的float除法和整除法的实例详解
2019/07/20 Python
python中bs4.BeautifulSoup的基本用法
2019/07/27 Python
Python StringIO如何在内存中读写str
2020/01/07 Python
jupyter notebook中美观显示矩阵实例
2020/04/17 Python
详解Python中import机制
2020/09/11 Python
CSS3 透明色 RGBA使用介绍
2013/08/06 HTML / CSS
高一英语教学反思
2014/01/22 职场文书
人民检察院起诉书
2015/05/20 职场文书
天气温馨提示语
2015/07/14 职场文书
青少年法制教育心得体会
2016/01/14 职场文书
win11怎么用快捷键锁屏? windows11锁屏的几种方法
2021/11/21 数码科技
PostgreSQL逻辑复制解密原理解析
2022/09/23 PostgreSQL