JavaScript-评论回复_删除_发表_显示时间_js留言板显示留言时间

作者：不正经 | 2024-05-31 05:25:11

踩

js留言板显示留言时间

在这里插入图片描述

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>回复评论</title>
	<style type="text/css">
		*{
			margin: 0px;
			padding: 0px;
			border: 0px;
		}
		.box{
			width: 500px;
			margin: 100px auto;
			border: 1px solid #C0C0C0FF;
		}
		.box textarea{
			/*作用是去掉文本输入框中右下角的标记*/
			resize: none;
			width: 300px;
			/*作用是去掉外表框的蓝色边线*/
			outline: none;
			border: 1px solid #A0A0A0FF;
		}
		.box ul{
			list-style: none;
		}
		.box ul li{
			width: 300px;
			margin-left: 70px;
			border-bottom: 1px dotted #404040FF;
			font: 15px/25px "微软雅黑";
		}
		.box ul li a{
			font: 15px/25px "微软雅黑";
			color: #A0A0A0FF;
			text-decoration: none;
			float: right;
		}
		.box input{
			outline: none;
			cursor: pointer;
		}
		.box ul li .time{
			color: #FFD800FF;
		}
	</style>
	<script type="text/javascript">
		function $(id){
			return document.getElementById(id);
		}
	   	window.onload=function(){
	   		var ul = document.createElement("ul");
	   		$("di").appendChild(ul);
	   		
	   		$("btn").onclick=function(){//点击按钮;
	   			var txt1 = $("txt").value;//获取内容;
	   			if(txt1 == "")
	   			{
	   				alert("评论为空，请重新输入！");
	   			}
	   			else{
	   				txt1=txt1+"<span class='time'>"+new Date().toLocaleTimeString()+"</span>"+"<a href='javascript:void(0);'>删除</a>";//void(0)的作用是取消后续操作;
	   				var first = ul.getElementsByTagName("li");
	   				var newli = document.createElement("li");//创建一个li标签;
	   				newli.innerHTML=txt1;//.innerText这个属性兼容性不好;
	   				ul.insertBefore(newli, first[0]);//insertBefor(newchild,oldchild);
	   				var del = ul.getElementsByTagName("a");//找到所有的a标签；
	   				for (var i = 0; i < del.length; i++) {
	   					del[i].onclick=function(){
	   						ul.removeChild(this.parentNode);
	   					}
	   				}
	   			}
	   		}
	   	}
	</script>
</head>
<body>
	<div class="box" id="di">
		<span>发表评论:</span>
		<textarea name="" id="txt" cols="30" rows="10"></textarea>
		<input type="button" id="btn" value="发表评论"  		
	</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/不正经/article/detail/650553