您好,登錄后才能下訂單哦!
js實(shí)現(xiàn)點(diǎn)贊按鈕功能,包括只能點(diǎn)贊一次,超過(guò)一次時(shí)提示文字(3秒后消失),點(diǎn)擊時(shí)次數(shù)加一(給后端傳值在這里解決)。
沒(méi)有按鈕加圖片,只用了改變顏色來(lái)表示
首先明確html頁(yè)面代碼
<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標(biāo)簽并進(jìn)行區(qū)分時(shí)需要費(fèi)點(diǎn)勁。我是根據(jù)button的id來(lái)標(biāo)記和他一起的另外兩個(gè)sapn標(biāo)簽,js中是這樣實(shí)現(xiàn)的
var i=2;//評(píng)論條數(shù) var Atixing=new Array(); //存儲(chǔ)提示字的id名 var Acishu=new Array(); //存儲(chǔ)次數(shù)的id名 var count=new Array();//限制每次按鈕只可以單擊一次 window.onload = function(){//頁(yè)面加載出來(lái)后實(shí)現(xiàn)下列方法 bianliButtonCount();//獲取所有按鈕id button1();//根據(jù)button 不同id進(jìn)入不同標(biāo)簽 chushizhi();//將數(shù)據(jù)初始化 } function bianliButtonCount(){ for(var j = 0;j<i;j++){ Atixing[j] = String("tixing"+j); Acishu[j] = String("cishu"+j); //alert(Atixing[j]); } }
這樣便將一條評(píng)論的button標(biāo)簽和另外兩個(gè)span標(biāo)簽合并了
類似:button id = 0;
span id= tixing0;
span id = cishu0;
這樣就可以實(shí)現(xiàn)一個(gè)三者的捆綁,不會(huì)錯(cuò)亂。
接下來(lái)就是點(diǎn)擊按鈕式進(jìn)入一個(gè)函數(shù)
第一次實(shí)現(xiàn)次數(shù)+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);//根據(jù)button id,通過(guò)這個(gè)函數(shù)改變次數(shù)、提示字 } } } 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);//提示字三秒消失 } }
還有一點(diǎn),評(píng)論條數(shù)是從后端傳來(lái)的,我們這里只是模擬了兩條,已經(jīng)評(píng)論的次數(shù)都是模擬的。
完整代碼如下:HTML
<!--評(píng)論1--> <div class="content_2_box1"> <div class="content_2_box1_1"> <img src="images/001.gif" > <font class="content_2_box1_1_font">網(wǎng)絡(luò)用戶</font> <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> </div> <div class="content_2_box1_2"> <font>阿斯達(dá)四大撒大所,愛(ài)仕達(dá)撒所大所所大所,阿斯達(dá)薩達(dá)薩達(dá)!阿斯達(dá)四大撒大所 奧術(shù)大師大所!啊啊撒大所大所</font> </div> </div> <!--評(píng)論1--> <div class="content_2_box1"> <div class="content_2_box1_1"> <img src="images/001.gif" > <font class="content_2_box1_1_font">網(wǎng)絡(luò)用戶</font> <span id="tixing1" ></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>阿斯達(dá)四大撒大所,愛(ài)仕達(dá)撒所大所所大所,阿斯達(dá)薩達(dá)薩達(dá)!阿斯達(dá)四大撒大所 奧術(shù)大師大所!啊啊撒大所大所</font> </div> </div>
js代碼
var i=2;//評(píng)論條數(shù) var Atixing=new Array(); //存儲(chǔ)提示字的id名 var Acishu=new Array(); //存儲(chǔ)次數(shù)的id名 var count=new Array();//限制每次按鈕只可以單擊一次 window.onload = function(){//頁(yè)面加載出來(lái)后實(shí)現(xiàn)下列方法 bianliButtonCount();//獲取所有按鈕id button1();//根據(jù)button 不同id進(jìn)入不同標(biāo)簽 chushizhi();//將數(shù)據(jù)初始化 } 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);//根據(jù)button id,通過(guò)這個(gè)函數(shù)改變次數(shù)、提示字 } } } 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);//提示字三秒消失 } }
總結(jié)
到此這篇關(guān)于js實(shí)現(xiàn)點(diǎn)贊按鈕功能的文章就介紹到這了,更多相關(guān)js實(shí)現(xiàn)點(diǎn)贊按鈕功能內(nèi)容請(qǐng)搜索億速云以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持億速云!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。