JS实现留言板功能

每天一个射流研究…小演示之留言板。主要知识点：DOM方法的理解和运用

！DOCTYPE html html lang=' en ' hearta charset=' UTF-8 ' title document/title style=' text/CSS ' .包装{宽度： 400pxmargin: 30px自动；} textarea { display:块；宽度： 100%;高度： 60px}输入{显示：块；宽度： 60%;margin: 15px汽车；} li { padding: 5px 10px相对位置：断字：断字；}.红色{ color: # 000背景# f1f1f1}。粉色{ color: # 000背景# CCC } a { position : absolute right : 0；top :-20px；背景：黄色；color : # fff } # list { margin : 0；padd : 0；列表样式：无；font: 14px/26px '宋体；}.clos {位置：绝对值；top : 0；右侧：-50px；宽度： 50pxcolor: # fff背景技术： # 000;padd : 5px 0；文本装饰：无；文本对齐：中心；} .clos :悬停{ box-shadow : 0 5px rgba(0，0，0，5)}/style脚本类型=' text/JavaScript '窗口。onload=function(){ var BTN=document。query selector(' input ')；var text=文档。queryselector('文本区域')；var列表=文档。查询选择或(' # list ')；var colors=['red '，' pink ']；var nub=0；BTN。onclick=function(){ if(text。价值。trim()==' '){ alert('打点字吧');返回false} var Li=文档。创建元素(“李”)；李。innerHTMl=文本。价值；//李。类名=colors[nub % colors。长度]；/* 判断a标签已经被添加，就让a标签显示出来，否则就添加*/if(列表。子[0]列表。儿童[0].(‘红’){李。类名=' pink} else { Li . NAmE=' red } var a=NullLi。onmouseover=function(){ if(a){ a . style。display=' block} else { a=文档。创建元素(' a ')；a.href=' javascript:a。类名=' clos' a.innerHTML='删除；a . onclick=function(){ list。移除子(这个。父节点)；};这个。append child(a)；}};李。onmouseout=function(){ a . style。显示='无'；};list.insertBefore(li，list。children[0])；text.value=小块；};};/script/headdydiv class=' wrap '文本区域id=' text '/文本区域输入类型=' button ' value='创建元素ul id='list'/ul/div /body/html以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。