JavaScript网页特效-留言板

留言板是一种可以用来记录、展示文字信息的载体，有比较强的时效性。网站中的留言板功能非常重要，可以实现和用户互动，例如人民网的“领导留言板”。“领导留言板”是人民日报为中央部委和地方各级党委政府主要负责同志搭建的网上群众工作平台。平台自创办以来，近300万件群众急难愁盼问题获得回复办理，大批建设性意见得到各地区各部门及时吸纳。各级政府单位入驻“领导留言板”，能从线下分发到线上交办全流程参与群众留言办理，进一步降低了跨系统、跨部门的协调成本，提升了留言办理效率。本节介绍使用DOM实现留言板的发表留言和删除留言功能。

1.案例呈现

留言板有发表留言和删除留言两个功能，如图6-27所示。单击“删除”按钮将一条留言删除；单击“发表留言”按钮将用户昵称、发表时间和留言内容显示在网页指定区域。

图6-27 留言板

2.案例分析

单击“删除”按钮将一条留言删除时，需要先找到当前留言区域的父元素，通过父元素调用removeChild()方法删除子元素。单击“发表留言”时，首先通过createElement()方法创建用户昵称、发表时间、留言内容和删除按钮等元素，然后通过父元素调用appendChild()方法将他们显示在网页指定区域。

3.案例实现

  1   <div id="outside">2      <h3>全部留言</h3>3      <div id="comment">   4      </div>5      <h4>发表留言</h4>6      <div id="addComment">7         昵称：<input type="text" id="name" />8         <br /><br />9         留言内容:<textarea id="comContent"></textarea>10         <button id='tjpl'>发表留言</button>11     </div>12   </div>13   <script>14       var comment = document.querySelector('#comment');15       var ips = document.querySelector('input');16       var textarea = document.querySelector('textarea');17       var tjpl = document.getElementById('tjpl')18       tjpl.onclick = function () {19       if (ips.value == '' || textarea.value == '') {20         alert("输入不能为空！");21         return;22       }23       var divs = document.createElement('div');24       divs.className = 'comment1';25       divs.innerHTML = '网友昵称:';26       comment.appendChild(divs);27       var spans = document.createElement('span');28       spans.innerHTML = ips.value;29       divs.appendChild(spans);30       var time = document.createElement('time');31       time.innerHTML = new Date().toLocaleString();32       divs.appendChild(time);33       var ps = document.createElement('p');34       ps.innerHTML = textarea.value;35       divs.appendChild(ps);36       var del = document.createElement('button');37       del.className = 'del';38       del.innerHTML = '删除';39       divs.appendChild(del);40       var dels = document.querySelectorAll('.del');41       for (var i = 0; i < dels.length; i++) {42         dels[i].onclick = function () {43           comment.removeChild(this.parentNode);44         }45       }46      ips.value = '' ;47      textarea.value = '';48     }49   </script>

案例的CSS样式，详见本书案例完整源程序。上述代码中，第3行的“<div id="comment">”标签是页面展示留言的区域；第14-17行代码分别获取了留言展示区域、用户昵称、留言内容和发表留言按钮4个元素；第18行代码为“发表留言”按钮绑定了单击事件及其处理程序；第19-22行代码的功能是当用户昵称或者留言内容为空时弹出提示框；第23-26行代码创建了div元素，设置了它的样式和文本内容，将它作为子元素添加至页面展示留言区域，它代表了一条留言；第27-39行代码分别创建了一条留言所具有的用户昵称、发表时间、留言内容和删除按钮元素；第40-45行代码为所有的删除按钮绑定单击事件及其处理程序，其中this指向当前按钮，this.parentNode指向当前留言。第46-47行代码清空昵称和留言区域。

视频讲解：案例：留言板_哔哩哔哩_bilibili

源码：清华大学出版社-图书详情-《JavaScript前端开发与实例教程（微课视频版）》

JavaScript网页特效-留言板相关推荐

php实现页面雪花效果,JavaScript_使用javascript实现雪花飘落的效果，看了javascript网页特效实例大全 - phpStudy...
使用javascript实现雪花飘落的效果看了javascript网页特效实例大全中的图片飘下的效果实例,觉得值得动手学习下. 就把图片改成雪花图,完成一个雪花飘下的效果. 并且,其中有些内容比较陈 ...
JavaScript网页特效-限时秒杀
限时秒杀是网络商家在某一预定的时间里,大幅度降低活动商品的价格,买家只要在这个时间里成功拍得此商品,便可以用超低的价格买到原本很昂贵的物品的一种营销活动.限时秒杀短时效的限定会给予用户更强烈的紧迫感, ...
JavaScript网页特效-“渔夫打鱼晒网”程序设计
程序设计时,把可能需要反复执行的代码封装为函数,然后在需要执行该段代码功能的地方进行调用,这样不仅可以实现代码的复用,更重要的是可以保证代码的一致性,只需要修改该函数代码,则所有调用位置均得到体现.同 ...
JavaScript网页特效-“扫雷”游戏随机布雷功能
"扫雷"游戏是一款经典益智小游戏.游戏目标是在最短的时间内找出所有非雷格子,同时避免踩雷,踩到一个雷即全盘皆输.本节介绍"扫雷"游戏随机布雷功能的设计与实现. ...
《JavaScript网页特效经典300例》
<JavaScript网页特效经典300例> 基本信息作者: 杨磊张志美丛书名: 百炼成钢系列丛书出版社:电子工业出版社 ISBN:9787121220524 上架时间:20 ...
JavaScript网页特效-浮现社会主义核心价值观文字动画效果
1.案例呈现用户在页面单击鼠标左键,页面浮现"富强"."民主"."文明"."和谐"."自由".&q ...
JavaScript网页特效-折叠面板
折叠面板适合在有限空间里显示大量信息.页面加载后,设置所有列表项处于折叠状态,用户可以单击折叠项目标题栏,切换当前标题下的内容是否显示. 1.案例呈现留言板"帮助中心"页面有新用 ...
网页中留言板的制作案例
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
实用JavaScript网页特效编程百宝箱pdf
下载地址:网盘下载内容介绍编辑计算机的出现是人类历史上的伟大创举,因为它正在彻底改变着人们生活中的方方面面,网络化的计算机更是日益渗透到社会发展的各个应用领域,从20世纪五六十年代网络雏形发展到 ...

JavaScript网页特效-留言板

JavaScript网页特效-留言板相关推荐

最新文章

热门文章