js實現(xiàn)簡單點贊操作
JavaScript實現(xiàn)點贊操作：（練手·初級），供大家參考，具體內(nèi)容如下
前期準(zhǔn)備：
① 導(dǎo)入jQuery文件；
② 導(dǎo)入bootstrap文件；
③ 點贊圖片；
<!DOCTYPE html><html> <head> <meta charset='UTF-8'> <title>對span標(biāo)簽控制鼠標(biāo)點擊</title> <script type='text/javascript' src='http://www.intensediesel.com/bcjs/js/jquery-3.3.1.js' ></script> <script type='text/javascript' src='http://www.intensediesel.com/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.intensediesel.com/bcjs/img/good.jpg' /> </span> [<span id='good'></span>] <span onclick='sendBad()'> <img src='http://www.intensediesel.com/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)文章：
1. Spring如何集成ibatis項目并實現(xiàn)dao層基類封裝2. IDEA 2020.1.2 安裝教程附破解教程詳解3. idea設(shè)置提示不區(qū)分大小寫的方法4. 使用AJAX（包含正則表達式）驗證用戶登錄的步驟5. 利用ajax+php實現(xiàn)商品價格計算6. IntelliJ IDEA導(dǎo)出項目的方法7. Java利用TCP協(xié)議實現(xiàn)客戶端與服務(wù)器通信(附通信源碼)8. Java PreparedStatement用法詳解9. django queryset相加和篩選教程10. JS圖片懶加載庫VueLazyLoad詳解
網(wǎng)公網(wǎng)安備