时间:2021-05-26
每天一个JS 小demo之留言板。主要知识点:DOM方法的理解和运用
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style type="text/css">.wrap {width: 400px;margin: 30px auto;}textarea {display: block;width: 100%;height: 60px;}input {display: block;width: 60%;margin: 15px auto;}li {padding: 5px 10px;position: relative;word-break: break-all;}.red {color: #000;background: #f1f1f1;} .pink {color: #000;background: #ccc;}a {position: absolute;right: 0;top: -20px;background: yellow;color: #fff;} #list {margin: 0;padding: 0;list-style: none;font: 14px/26px "宋体";}.clos {position: absolute;top: 0;right: -50px;width: 50px;color: #fff;background: #000;padding: 5px 0;text-decoration: none;text-align: center;}.clos:hover {box-shadow: 0 0 5px rgba(0,0,0,.5)}</style><script type="text/javascript">window.onload = function(){var btn = document.querySelector('input');var text = document.querySelector('textarea');var list = document.querySelector('#list');var colors = ["red","pink"];var nub = 0;btn.onclick = function(){if(text.value.trim() == ""){alert("打点字吧");return false;}var li = document.createElement("li");li.innerHTML = text.value;// li.className = colors[nub%colors.length];if(list.children[0]&&list.children[0].className=="red"){li.className = "pink";} else {li.className = "red";}var a = null;li.onmouseover = function(){if(a) {a.style.display = "block";} else {a = document.createElement("a");a.href = "javascript:;";a.className = "clos";a.innerHTML = "删除";a.onclick = function (){list.removeChild(this.parentNode);};this.appendChild(a);}};li.onmouseout = function(){a.style.display = "none";};list.insertBefore(li,list.children[0]);text.value = "";nub++;};}; </script></head><body><div><div class="wrap"><textarea id="text"></textarea><input type="button" value="创建元素"><ul id="list"></ul></div> </body></html>以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
功能实现:1.发布人和发布内容非空校验2.编辑删除功能3.楼层效果展示4.发布时间展示效果图目录tools.js时间工具包functiongetTime(){v
本文实例为大家分享了JS实现留言板增删功能的具体代码,供大家参考,具体内容如下##**JS实现简易留言板的增删功能**一个很简单的留言板,实现**增删**功能,
本文实例为大家分享了JS实现留言板的具体代码,供大家参考,具体内容如下一、设计思路这个留言板有两个大的版块,一个是留言板(主要是发布留言的内容会在上面显示),另
JavaScript(JS)网页–留言板,供大家参考,具体内容如下在使用网页进行冲浪时,经常会发表自己的留言。发布留言的留言板是怎么做的呢?制作一个简单的留言板
留言板系统留言板管理:对网站留言板内容进行管理。一、留言板系统说明帝国CMS的留言板系统支持多分类,一个分类为一个单独的留言板。前台各留言板的访问地址:“/e/