张家口小程序制作_JavaScript完成动态留言板

阅读  ·  发布日期 2021-01-05 15:26  ·  admin
JavaScript实现动态留言板       这篇文章主要为大家详细介绍了JavaScript实现动态留言板,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了简单动态留言板的创建,供大家参考,具体内容如下

效果图展示:

思路

html代码

 textarea name="" id="" cols="30" rows="10" /textarea 
 button 发表留言 /button 
 ul /ul 

css代码

 style 
 margin: 0;
 padding: 0;
 body {
 padding: 100px;
 textarea {
 width: 200px;
 height: 100px;
 border: 1px solid #000;
 outline: none;
 resize: none;
 ul {
 margin-top: 50px;
 li {
 width: 300px;
 padding: 5px;
 background-color: rgb(245, 209, 243);
 color: red;
 font-size: 14px;
 margin: 15px 0;
 li a {
 float: right;
 width: 40px;
 height: 20px;
 text-align: center;
 text-decoration: none;
 background-color: #fff;
 border: 1px solid #ccc;
 color: #000;
 /style 

js代码

 script 
 //点击按钮之后 就动态创建一个li 添加到ul里面
 //创建li的同时 把文本域里面的值通过li.innerHTML赋值给li
 //获取元素
 var text = document.querySelector('textarea');
 var btn = document.querySelector('button');
 var ul = document.querySelector('ul');
 //创建事件
 btn.onclick = function () {
 if (text.value == '') {
 return false;
 } else {
 //1.创建li
 var li = document.createElement('li');
 //先有li 再赋值 
 li.innerHTML = text.value + ' a href="javascript:;" rel="external nofollow" 删除 /a 
 //2.添加li
 ul.appendChild(li); //在后面追加
 // ul.insertBefore(li,ul.children[0]); 动态在前面追加
 //3.删除元素 删除当前链接的li 他的父亲
 var as = document.querySelectorAll('a');
 for(var i = 0;i as.length;i++){
 as[i].onclick = function(){
 // 删除当前a的父亲li li的父亲是ul 
 //删除节点语法 父节点.removeChild(子节点)
 ul.removeChild(this.parentNode);
 /script 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。