js實(shí)現(xiàn)簡(jiǎn)單點(diǎn)贊操作
JavaScript實(shí)現(xiàn)點(diǎn)贊操作：（練手·初級(jí)），供大家參考，具體內(nèi)容如下
前期準(zhǔn)備：
① 導(dǎo)入jQuery文件；
② 導(dǎo)入bootstrap文件；
③ 點(diǎn)贊圖片；
<!DOCTYPE html><html> <head> <meta charset='UTF-8'> <title>對(duì)span標(biāo)簽控制鼠標(biāo)點(diǎn)擊</title> <script type='text/javascript' src='http://www.cgvv.com.cn/bcjs/js/jquery-3.3.1.js' ></script> <script type='text/javascript' src='http://www.cgvv.com.cn/bcjs/js/bootstrap.min.js' ></script> </head> <body> <h5 style='font-family: ’微軟雅黑’;'>圖片文字并排擺放，文字局域圖片腰部</h5> <!--<span style='font-family: ’微軟雅黑’;color: orangered;font-size: 10px; '>注意：有些瀏覽器不支持旋轉(zhuǎn)的特性transform:正如你所看到的<br/></span>--> <span onclick='sendGood()'> <img src='http://www.cgvv.com.cn/bcjs/img/good.jpg' /> </span> [<span id='good'></span>] <span onclick='sendBad()'> <img src='http://www.cgvv.com.cn/bcjs/img/good.jpg' /> </span> [<span id='bad'></span>] <script> /*點(diǎn)贊的數(shù)量：*/ document.getElementById('good').innerText = ''; var good = document.getElementById('good').textContent; document.getElementById('bad').innerText = ''; var bad = document.getElementById('bad').textContent; window.onload = function(){if (good == '') { good = 0; document.getElementById('good').innerText = 0;}if (bad == '') { bad = 0; document.getElementById('bad').innerText = 0;} } /*點(diǎn)贊的數(shù)量：*/ function sendGood(){good = parseInt(good) + 1;document.getElementById('good').innerText = good; document.getElementById('goodSpan').onclick = function(e){ e.preventDefault(); e.stopImmediatePropagation();} } /*踩的數(shù)量：*/ function sendBad(){bad = parseInt(bad) + 1;document.getElementById('bad').innerText = bad;document.getElementById('badSpan').onclick = function(e){ e.preventDefault(); e.stopImmediatePropagation();} } </script> </body></html>
結(jié)果如下：
下面是點(diǎn)贊圖片：可直接拖動(dòng)圖片另存為保存到本地，再使用。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. ajax請(qǐng)求后臺(tái)得到j(luò)son數(shù)據(jù)后動(dòng)態(tài)生成樹(shù)形下拉框的方法2. 如何通過(guò)vscode運(yùn)行調(diào)試javascript代碼3. HTML <!DOCTYPE> 標(biāo)簽4. JS數(shù)據(jù)類(lèi)型判斷的幾種常用方法5. 用Python自動(dòng)下載網(wǎng)站所有文件6. WML語(yǔ)言的基本情況7. python中str內(nèi)置函數(shù)用法總結(jié)8. Ajax實(shí)現(xiàn)頁(yè)面無(wú)刷新留言效果9. JSP+Servlet實(shí)現(xiàn)文件上傳到服務(wù)器功能10. python爬蟲(chóng)使用requests發(fā)送post請(qǐng)求示例詳解
網(wǎng)公網(wǎng)安備