评论功能JS_js评论区-优快云博客

本文链接：https://blog.youkuaiyun.com/AfeiyuO/article/details/120810504

这是一个使用HTML5, CSS和JavaScript实现的评论功能示例。页面包含一个评论输入区，用户可以输入名字和评论内容，点击按钮后，评论将被添加到页面上显示。已预设了两条静态评论数据，并通过JavaScript动态生成。同时，提供了删除评论的功能，虽然未实现具体删除操作。" 139090868,8253669,Android数据库操作详解：SQLiteOpenHelper与SQLiteDatabase,"['Android开发', '数据库', 'SQLite', '数据存储']

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>

<head>

<title>大家来吐槽</title>

<style>

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

ul {

list-style: none;

}

.main {

width: 800px;

margin: 0 auto;

}

textarea {

resize: none;

}

.opt {

padding: 10px;

}

.opt input:nth-child(1){

width: 200px;

height: 40px;

border-radius: 4px;

border:1px solid #ffa200;

outline: none;

padding: 4px;

}

.opt textarea {

border-radius: 4px;

outline: none;

margin-top: 10px;

margin-bottom: 10px;

width: 100%;

padding: 10px;

height: 100px;

border-color: #ffa200;

}

.opt input:nth-child(3){

width: 100px;

height: 40px;

border-radius: 4px;

border: 0 none;

outline: none;

padding: 4px;

background-color: #ffa200;

color: #fff;

}

.coments {

padding: 10px;

}

li {

border: 1px dashed #ccc;

padding: 10px;

margin-bottom: 10px;

}

.comment-content {

margin: 10px 0;

text-indent: 2em;

border-bottom: 1px dashed #ccc;

line-height: 24px ;

}

.date {

text-align: right;

padding-right: 10px;

}

.delete {

text-align: right;

line-height: 30px;

padding-right: 10px;

}

.del {

cursor: pointer;

color: #ccc;

}

</style>

</head>

<body>

</div>

</div>

<ul>

<!-- <li>

<div class="comment-content">今天的天气真好呀</div>

</li> -->

</ul>

</div>

// 1:一开始的时候，就有二条数据，动态生成的

// 2：点击按钮，生成一条评论

// 思路：

// 1：先写二条假的数据，循环生成二条评论数据

// 2：获取元素，把二个输入框的数据拿到，生成新的评论

// 步骤：

// 1.1：声明一个数组，数组里面有多个对象，对象里面有人名，内容，时间

// 1.2：循环遍历数组，把里面的数据动态放到ul里面

// 生成li li里面有多个div

// 2.1获取元素，注册点击事件

// 2.2：获取用户和内容生成一个当前的时间

// 2.3：把上面的内容创建生成一个li

// 动态生成已存在的评论

// 1.1：声明一个数组

var comments = [

{

user : '小宇',

content : '今天你很帅哦',

time : '2021-10-17 08:10:10'

{

user : '小玲',

content : '今天看起来很漂亮',

time : '2021-10-16 22:10:10'

}

]

// 1.2 遍历生成li

var str = ''

comments.forEach(function(e){

str += '<li>'+

'<div class="user">'+ e.user +'</div>'+

'<div class="comment-content">'+ e.content +'</div>'+

'<div class="date">' + e.time + '</div>'+

'<div class="delete"><span class="del">删除</span></div>'+

'</li>'

})

// 获取ul后代元素

var ul = document.querySelector('.coments ul');

ul.innerHTML = str;

// 2.1：获取相关元素

var btn = document.querySelector('.ta input:nth-child(3)');

// var btn = document.querySelector('.ta input[type:button]');

// console.log(btn);

var username = document.getElementById('username');

var coment = document.querySelector('.coment');

// 2.2注册时间

btn.onclick = function(){

// 获取用户和内容

user = username.value;

content = coment.value;

// 要验证用户的输入是否为空 trim()[作用是去掉二端的空格]

if(user.trim().length ===0){

alert("用户名不能为空");

return;

}

if(content.trim().length ===0){

alert("内容不能为空");

return;

}

// 获取当前时间

date = new Date();

// 得到当前时间应该加8个小时

date.setHours(date.getHours()+8);

var time = date.toJSON();

// 用空格代替T 利用substring去掉点后面的

time = time.replace('T',' ').substring(0,time.indexOf('.'));

// console.log(time);

// 2.5：生成li（不能覆盖先用 document.create 生成一个li 放入ul）

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

li.innerHTML = '<div class="user">'+ user +'</div>'+

'<div class="comment-content">'+ content +'</div>'+

'<div class="date">' + time + '</div>'+

'<div class="delete"><span class="del">删除</span></div>';

// 放入ul里面去

ul.appendChild(li);

// 清空内容

username.value = '';

coment.value = '';

}

</script>

</body>

</html>