html简易留言,JS实现简易留言板特效

本文实例为大家分享了JS实现留言板特效的具体代码，供大家参考，具体内容如下

知识点

1.textarea 大段输入框

2.value获取输入框的值

3.innerHTML所用东西；innerText文本

4.insertBefore在某个标签之前插入

运行效果

代码

Title

*{margin: 0;padding: 0;list-style: none;}

#box{width: 800px;border: 1px solid #ccc;

margin:100px auto;padding: 20px}

#my_textarea{width: 80%;height: 120px;font-size: 20px}

.box-top{margin-bottom: 20px;}

#ul li{border-bottom: 1px dashed #ccc;color: red;line-height: 44px}

#ul li a{float: right;}

发表评论

发表

window.addEventListener('load',function (ev) {

$('btn').addEventListener('click',function (ev1) {

var my_textarea = $('my_textarea');

// 1. 获取输入框中的内容

var content = my_textarea.value;

// 2. 判断

if (content.length===0){

alert('请输入评论的内容');

return;

}

// 3. 创建li标签放入ul

var li = document.createElement('li');

var ul = $('ul');

li.innerHTML = content + '删除'

ul.insertBefore(li,ul.children[0]);

// 4. 清楚输入框内容

my_textarea.value = '';

// 5. 删除评论

var remove = ul.getElementsByTagName('a');

for (var i = 0; i < remove.length; i++) {

var r = remove[i];

r.addEventListener('click',function (evt) {

this.parentNode.remove();

})

}

});

/**

* 根据id返回标签元素

* @param {string}id

* @returns {any}

*/

function $(id) {

return typeof id === 'string' ? document.getElementById(id) : null;

}

})

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