用原生dom实现发表评论，时间，表情，点赞，回复
时间: 2024-03-27 16:35:31 浏览: 17
好的，下面是一个使用原生DOM实现发表评论、显示时间、添加表情、点赞和回复功能的示例代码：
```html
<!DOCTYPE html>
<html>
<head>
<title>评论功能示例</title>
</head>
<body>
<h3>评论功能示例</h3>
<!-- 发表评论 -->
<input type="text" id="comment-input">
<button id="comment-btn">发表评论</button>
<!-- 评论列表 -->
<ul id="comment-list"></ul>
<script>
// 先获取相关的DOM元素
var commentInput = document.getElementById('comment-input');
var commentBtn = document.getElementById('comment-btn');
var commentList = document.getElementById('comment-list');
// 定义一个函数，用于获取当前时间字符串
function getCurrentTime() {
var date = new Date();
return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() + ' ' + date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds();
}
// 定义一个函数，用于添加表情到输入框中
function addEmoji(emoji) {
commentInput.value += emoji;
}
// 定义一个函数，用于添加一条评论
function addComment(text) {
var li = document.createElement('li');
var time = getCurrentTime();
li.innerHTML = '<div>' + text + '</div><div class="info"><span>' + time + '</span><a href="#" class="like-btn">赞</a><a href="#" class="reply-btn">回复</a></div>';
commentList.appendChild(li);
}
// 添加评论
commentBtn.onclick = function() {
var text = commentInput.value.trim();
if (text) {
addComment(text);
commentInput.value = '';
}
};
// 点赞
commentList.addEventListener('click', function(event) {
if (event.target.className === 'like-btn') {
event.preventDefault();
var likeBtn = event.target;
var count = parseInt(likeBtn.dataset.likeCount) || 0;
count++;
likeBtn.innerText = '赞 (' + count + ')';
likeBtn.dataset.likeCount = count;
}
});
// 回复
commentList.addEventListener('click', function(event) {
if (event.target.className === 'reply-btn') {
event.preventDefault();
var replyBtn = event.target;
var li = replyBtn.parentNode.parentNode;
var replyInput = document.createElement('input');
var replyBtn2 = document.createElement('button');
replyBtn2.innerText = '回复';
replyBtn2.onclick = function() {
var text = replyInput.value.trim();
if (text) {
addComment(text);
replyInput.parentNode.removeChild(replyInput);
replyBtn2.parentNode.removeChild(replyBtn2);
}
};
li.appendChild(replyInput);
li.appendChild(replyBtn2);
}
});
</script>
</body>
</html>
```
这个示例实现了以下功能：
1. 输入框输入评论内容后，点击“发表评论”按钮可以将评论添加到列表中。
2. 评论列表中每条评论的下方显示了评论的时间、点赞按钮和回复按钮。
3. 点击点赞按钮可以给评论点赞，并显示点赞数。
4. 点击回复按钮可以在该评论下方添加一个回复输入框和一个“回复”按钮，点击“回复”按钮可以将回复添加到列表中。
相关推荐
最新推荐
原生JavaScript实现连连看游戏(附源码)
原生JavaScript版连连看游戏，有源码，适合初学者学习，喜欢的朋友可以研究下
原生JavaScript实现todolist功能
该项目主要可以练习js操控dom，事件，事件触发之间的逻辑关系，以及如何写入缓存，获取缓存。 主要功能： 将用户输入添加至待办项 可以对todolist进行分类，用户勾选即将待办项分入已完成组 todolist的每一项可...
原生JS使用Canvas实现拖拽式绘图功能
2、原生JavaScript实现，不依赖任何第三方js库和插件 3、多图形绘制（支持画笔、线条、箭头、三角形、矩形、平行四边形、梯形以及多边形和圆形绘制） 4、拖拽式绘制（鼠标移动过程中不断进行canvas重绘） 5、图片...
springboot使用JPA时间类型进行模糊查询的方法
主要介绍了springboot使用JPA时间类型进行模糊查询的方法,需要的朋友可以参考下
Python+appium框架原生代码实现App自动化测试详解
step1：首先介绍下python+appium的框架结构，如下截图所示 (1)：apk目录主要放置待测app的apk资源； (2)：config目录主要放置配置文件信息，包含：数据库连接配置、UI自动化脚本中所需的页面元素信息及app启动信息...
zigbee-cluster-library-specification
最新的zigbee-cluster-library-specification说明文档。
管理建模和仿真的文件
管理Boualem Benatallah引用此版本：布阿利姆·贝纳塔拉。管理建模和仿真。约瑟夫-傅立叶大学-格勒诺布尔第一大学，1996年。法语。NNT：电话：00345357HAL ID：电话：00345357https://theses.hal.science/tel-003453572008年12月9日提交HAL是一个多学科的开放存取档案馆，用于存放和传播科学研究论文，无论它们是否被公开。论文可以来自法国或国外的教学和研究机构，也可以来自公共或私人研究中心。L’archive ouverte pluridisciplinaire
实现实时数据湖架构：Kafka与Hive集成
# 1. 实时数据湖架构概述**
实时数据湖是一种现代数据管理架构，它允许企业以低延迟的方式收集、存储和处理大量数据。与传统数据仓库不同，实时数据湖不依赖于预先定义的模式，而是采用灵活的架构，可以处理各种数据类型和格式。这种架构为企业提供了以下优势：
- **实时洞察：**实时数据湖允许企业访问最新的数据，从而做出更明智的决策。
- **数据民主化：**实时数据湖使各种利益相关者都可
2． 通过python绘制y=e-xsin(2πx)图像
可以使用matplotlib库来绘制这个函数的图像。以下是一段示例代码：
```python
import numpy as np
import matplotlib.pyplot as plt
def func(x):
return np.exp(-x) * np.sin(2 * np.pi * x)
x = np.linspace(0, 5, 500)
y = func(x)
plt.plot(x, y)
plt.xlabel('x')
plt.ylabel('y')
plt.title('y = e^{-x} sin(2πx)')
plt.show()
```
运行这段
JSBSim Reference Manual
JSBSim参考手册，其中包含JSBSim简介，JSBSim配置文件xml的编写语法，编程手册以及一些应用实例等。其中有部分内容还没有写完，估计有生之年很难看到完整版了，但是内容还是很有参考价值的。