html+js实现点赞
2版 2021-10-07
实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--评论1-->
<!--content n.所容纳之物; 所含之物; 内容; (书的)目录-->
<div class="content_2_box1">
<div class="content_2_box1_1">
<img src="images/001.jpeg" height="200" width="200">
<font class="content_2_box1_1_font">网络用户</font>
<span id="tixing0" style="font-size:30px;color:red;position:relative;left:200px;top:-40px;"></span>
<div class="dianzan_11">
<div class="dianzan_font">
<center><span id="cishu0">18</span></center>
</div>
<button class="btn" id="0" onclick=""></button>
</div>
</div>
<div class="content_2_box1_2">
<font>阿斯达四大撒大所，爱仕达撒所大所所大所，阿斯达萨达萨达！阿斯达四大撒大所
奥术大师大所！啊啊撒大所大所</font>
</div>
</div>
<!--评论2-->
<div class="content_2_box1">
<div class="content_2_box1_1">
<img src="images/001.jpeg" height="200" width="200">
<font class="content_2_box1_1_font">网络用户</font>
<span id="tixing1" style="font-size:30px;color:red;position:relative;left:200px;top:-40px;"></span>
<div class="dianzan_11">
<div class="dianzan_font">
<center><span id="cishu1"></span></center>
</div>
<button class="btn" id="1" onclick=""></button>
</div>
</div>
<div class="content_2_box1_2">
<font>阿斯达四大撒大所，爱仕达撒所大所所大所，阿斯达萨达萨达！阿斯达四大撒大所
奥术大师大所！啊啊撒大所大所</font>
</div>
</div>
</body>
<script>
var i=2;//评论条数
var Atixing=new Array(); //存储提示字的id名
var Acishu=new Array(); //存储次数的id名
var count=new Array();//限制每次按钮只可以单击一次
window.onload = function(){//页面加载出来后实现下列方法
bianliButtonCount();//获取所有按钮id
button1();//根据button 不同id进入不同标签
chushizhi();//将数据初始化
}
function bianliButtonCount(){
for(var j = 0;j<i;j++){
Atixing[j] = String("tixing"+j);
Acishu[j] = String("cishu"+j);
//alert(Atixing[j]);
}
}
function chushizhi(){
for(var m = 0;m<i;m++){
document.getElementById(Atixing[m]).innerHTML="";
document.getElementById(Acishu[m]).innerHTML="13";
}
}
function button1(){
var arr = document.getElementsByTagName('button');
for(var i = 0;i<arr.length;i++){
arr[i].onclick = function(){
var btn = document.getElementById(this.id);
btn.style.background="red";
change(this.id);//根据button id，通过这个函数改变次数、提示字
}
}
}
function change(id){
if(count[id]!=1){
document.getElementById(Acishu[id]).innerHTML="14";
count[id]=1;
}else{
document.getElementById(Atixing[id]).innerHTML="亲，您的赞太多了~";
setTimeout(function(){document.getElementById(Atixing[id]).innerHTML="";},3000);//提示字三秒消失
}
}
</script>
</html>
结果：
总结：实现前端，未给后端传入数据
1版 2021-10-06
实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--评论1-->
<!--content n.所容纳之物; 所含之物; 内容; (书的)目录-->
<div class="content1">
<!--class 就像java类的修饰一样 一个名字而已-->
<div class="content1box1" >
<img src="images/001.jpeg" >
<br>
<font class="content1box1font">网络用户</font>
<br>
<br>
<br>
<br>
<!--position n.位置; 地方; 恰当位置; 正确位置; (坐、立的)姿态，姿势; 放置方式 -->
<!--relative n.相对-->
<!--提醒问题-->
<!--可以这里定义数据 也可以document设定数据-->
<span id="tixing1" style="font-size:30px;color:red;position:relative;left:0px;top:40px;"></span>
<div class="dianzan1">
<div class="dianzan1font">
<center><span id="cishu1"></span></center>
</div>
<button class="btn" id="1" onclick=""></button>
</div>
</div>
<div class="content1box2">
<font>阿斯达四大撒大所，爱仕达撒所大所所大所，阿斯达萨达萨达！阿斯达四大撒大所
奥术大师大所！啊啊撒大所大所</font>
</div>
</div>
<!--评论2-->
<div class="content2">
<div class="content2box1">
<img src="images/001.jpeg" >
<font class="content2box1font">网络用户</font>
<br>
<br>
<br>
<br>
<!--span 跨度-->
<span id="tixing2" style="font-size:60px;color:red;position: relative;left:120px;top:40px;"></span>
<br>
<br>
<br>
<br>
<div class="dianzan2">
<div class="dianzan2font">
<center><span id="cishu2"></span></center>
</div>
<button class="btn" id="2" onclick=""></button>
</div>
</div>
<div class="content2box2">
<font>阿斯达四大撒大所，爱仕达撒所大所所大所，阿斯达萨达萨达！阿斯达四大撒大所
奥术大师大所！啊啊撒大所大所</font>
</div>
</div>
</body>
<script>
//初始化变量/属性
var i=2;//评论条数
var Atixing=new Array(); //存储提醒字的id名
var Acishu=new Array(); //存储次数的id名
var count=new Array();//限制每次按钮只可以单击一次
//定义函数/方法 相当于java接口
window.onload = function(){//页面加载出来后实现下列方法
tixingAndCishu();//获取tixingAndCishu id
chushizhi();//将数据初始化
button();//根据button 不同id进入不同标签
}
//实现函数
function tixingAndCishu(){
for(var j = 1;j<=i;j++){
Atixing[j] = String("tixing"+j);
Acishu[j] = String("cishu"+j);
//alert(Atixing[j]);
}
//出来的结果 Atixing[1] =tixing1 Acishu[1] = cishu1 Atixing[2] =tixing2 Acishu[2] = cishu2
}
count[0]=0;
count[1]=1;
count[2]=2;
//实现函数
function chushizhi(){
for(var m =1;m<=i;m++){
document.getElementById(Atixing[m]).innerHTML="null"; //Atixing[1]=tixing1 and Atixing[2]=tixing2 获取标签对象 设置 值为adad
document.getElementById(Acishu[m]).innerHTML="13"; //Atixing[1]=tixing1 and Atixing[2]=tixing2 获取标签对象 设置 值为adad
}
}
//实现函数
function button(){
var arr = document.getElementsByTagName('button');//拿到button标签对象 2个对象 集合 arr.length=2
for(var i = 1;i<=arr.length;i++){
//一个对象触发onclick点击事件
arr[i].onclick = function(){
//根据id 获取button标签对象
var btn = document.getElementById(this.id);
btn.style.background="red";
//arr[i].style.background="red";
change(this.id);//根据button id，通过这个函数改变次数、提醒字
//第一遍 的时候 count[1] =1 走if
//第二遍 的时候 count[2] =2 != 1 走else
}
}
}
//实现函数
function change(id){
if(count[id] = 1){
document.getElementById(Atixing[id]).innerHTML="点赞了";
document.getElementById(Acishu[id]).innerHTML="14";
}else{
document.getElementById(Atixing[id]).innerHTML="亲，您的赞太多了~";
document.getElementById(Acishu[id]).innerHTML="14";
setTimeout(function(){document.getElementById(Atixing[id]).innerHTML="";},3000);//提示字三秒消失
}
}
</script>
</html>
结果：
总结：
未到自己的要求
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
