js實現(xiàn)簡單點贊操作
JavaScript實現(xiàn)點贊操作：（練手·初級），供大家參考，具體內(nèi)容如下
前期準備：
① 導(dǎo)入jQuery文件；
② 導(dǎo)入bootstrap文件；
③ 點贊圖片；
<!DOCTYPE html><html> <head> <meta charset='UTF-8'> <title>對span標簽控制鼠標點擊</title> <script type='text/javascript' src='http://m.lshqa.cn/bcjs/js/jquery-3.3.1.js' ></script> <script type='text/javascript' src='http://m.lshqa.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://m.lshqa.cn/bcjs/img/good.jpg' /> </span> [<span id='good'></span>] <span onclick='sendBad()'> <img src='http://m.lshqa.cn/bcjs/img/good.jpg' /> </span> [<span id='bad'></span>] <script> /*點贊的數(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;} } /*點贊的數(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é)果如下：
下面是點贊圖片：可直接拖動圖片另存為保存到本地，再使用。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
網(wǎng)公網(wǎng)安備