这个是偶然打开JS 时，看到了这个界面，然后想加点东西上去，便做了这个小功能
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网页追加评论</title>
<style type="text/css">
#outside {
width: 1000px;
margin: 0 auto;
border: 1px solid #E7EAEE;
overflow: hidden;
padding-bottom: 15px;
}
#outside h3 {
width: 95%;
margin: 15px auto;
padding-bottom: 10px;
border-bottom: 1px solid #E7EAEE;
font-family: "宋体", sans-serif;
}
#outside .comment1 {
width: 95%;
margin: 10px auto;
color: #BBBBBB;
font-size: 12px;
border-bottom: 1px dashed #E7EAEE;
font-family: "宋体", sans-serif;
position: relative;
}
#outside .comment1 time {
float: right;
}
#outside .comment1 span {
color: #5979B2;
margin-left: 5px;
font-weight: bold;
}
#outside .comment1 p {
font-size: 16px;
color: black;
}
#zan{
width: 60px;
position: absolute;
right: 65px;
bottom: 16px;
}
#zan img {
width: 16px;
height: 16px;
position: absolute;
bottom: 0;
}
#zan span {
color: #97D6C0;
font-size: 12px;
font-weight: bold;
position: absolute;
left: 21px;
bottom: 0;
}
#comment1 #span11{
font-size: 12px;
letter-spacing: 2px;
color: #BBBBBB;
cursor: pointer;
position: absolute;
right: 35px;
bottom: 17px;
}
#outside h4 {
width: 95%;
margin: 15px auto;
color: #404E73;
font-size: 16px;
font-weight: bold;
font-family: "宋体", sans-serif;
}
#outside #addComment {
width: 95%;
margin: 0 auto;
font-size: 12px;
color: #BBBBBB;
}
#outside #name {
width: 200px;
border: 1px solid #D9E2EF;
}
#outside #comContent {
width: 800px;
height: 100px;
resize: none;
border: 1px solid #D9E2EF;
vertical-align: text-top;
}
#outside button {
width: 100px;
height: 30px;
background-color: #2D46A3;
color: white;
border: hidden;
float: right;
margin: 15px 100px;
}
</style>
</head>
<body>
<div id="outside">
<h3>最新平均</h3>
<div id="comment">
<div id="comment1" class="comment1">
腾讯网友
<span>123</span>
<time>2010年10月5日 19:21:12</time>
<p>
123
</p>
<div id="zan" class="zan1" onclick="test(this)">
<img src="img/zanb.png" class="img1"/>
<span id="span1"></span>
<!--<span id="span11" class="span11">回复</span>-->
</div>
<span id="span11" class="span11">回复</span>
</div>
</div>
<h4>发表评论</h4>
<div id="addComment">
昵 称：<input type="text" id="name" />
<br /><br /> 评论内容:
<textarea id="comContent"></textarea>
<button onclick="addComment()">提交评论</button>
</div>
</div>
<script type="text/javascript">
var id = 1;
var span1 = document.getElementById("span1");
function addComment() {
var name = document.getElementById("name").value;
var comContent = document.getElementById("comContent").value;
if(name == "" || comContent == "") {
alert("用户名和评论内容不可为空!");
return;
}
id++;
var dates = new Date();
var year = dates.getFullYear();
var month = dates.getMonth();
var date1 = dates.getDate();
var hours = dates.getHours() < 10 ? "0" + dates.getHours() : dates.getHours();
var minutes = dates.getMinutes() < 10 ? "0" + dates.getMinutes() : dates.getMinutes();
var seconds = dates.getSeconds() < 10 ? "0" + dates.getSeconds() : dates.getSeconds();
var comment1 = document.getElementById("comment1");
var comments = document.getElementById("comment");
var clone = comment1.cloneNode(true);
clone.getElementsByTagName("span")[0].innerText = name;
clone.getElementsByTagName("time")[0].innerText = year + "年" + (month + 1) + "月" + date1 + "日 " + hours + ":" + minutes + ":" + seconds;
clone.getElementsByTagName("p")[0].innerText = comContent;
clone.getElementsByTagName("span")[1].setAttribute("id", "span" + id);
clone.getElementsByTagName("span")[1].innerText = 0;
clone.getElementsByTagName("img")[0].setAttribute("class", "img" + id);
clone.getElementsByTagName("img")[0].setAttribute("src", "img/zanb.png");
clone.getElementsByTagName("img")[0].parentNode.setAttribute("class", "zan" + id);
clone.setAttribute("id", "comment" + id);
comments.appendChild(clone);
document.getElementById("name").value = "";
document.getElementById("comContent").value = "";
}
//点赞
var span1 = document.getElementById("span1");
window.onload = function(){
span1.innerText = this.localStorage.count?this.localStorage.count:0;
}
var count=0;
function test(that){
count++;
if(count%2!=0) {
that.getElementsByTagName("img")[0].setAttribute("src","img/zanh.png");
that.getElementsByTagName("span")[0].innerText = parseInt(that.getElementsByTagName("span")[0].innerText)+1;
}
else{
that.getElementsByTagName("img")[0].setAttribute("src","img/zanb.png");
that.getElementsByTagName("span")[0].innerText = parseInt(that.getElementsByTagName("span")[0].innerText)-1;
}
}
</script>
</body>
</html>
这个可以动态获取用户评论时间，一个简单的点赞功能
时间： 2024-11-08 01:13:23