js實現點贊按鈕功能,包括只能點贊一次,超過一次時提示文字(3秒後消失),點擊時次數加一(給後端傳值在這裏解決)。
沒有按鈕加圖片,只用了改變顏色來表示
首先明確html頁面代碼
<span id="tixing0" ></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>
首先我們要知道。在DOM中id是唯一的,這就表明我們獲取span標籤並進行區分時需要費點勁。我是根據button的id來標記和他一起的另外兩個sapn標籤,js中是這樣實現的
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]);
}
}
這樣便將一條評論的button標籤和另外兩個span標籤合併了
類似:button id = 0;
span id= tixing0;
span id = cishu0;
這樣就可以實現一個三者的捆綁,不會錯亂。
接下來就是點擊按鈕式進入一個函數
第一次實現次數+1,並向後端傳值
其他的都是顯示提示字(提示字3秒消失)
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);//提示字三秒消失
}
}
還有一點,評論條數是從後端傳來的,我們這裏只是模擬了兩條,已經評論的次數都是模擬的。完整代碼如下:HTML
<!--評論1-->
<div class="content_2_box1">
<div class="content_2_box1_1">
<img src="images/001.gif" >
<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>
<!--評論1-->
<div class="content_2_box1">
<div class="content_2_box1_1">
<img src="images/001.gif" >
<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>
js代碼
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);//提示字三秒消失
}
}