js實現簡單點贊操作
JavaScript實現點贊操作：（練手·初級），供大家參考，具體內容如下
前期準備：
① 導入jQuery文件；
② 導入bootstrap文件；
③ 點贊圖片；
<!DOCTYPE html><html> <head> <meta charset='UTF-8'> <title>對span標簽控制鼠標點擊</title> <script type='text/javascript' src='http://www.wxshucaidpc.com/bcjs/js/jquery-3.3.1.js' ></script> <script type='text/javascript' src='http://www.wxshucaidpc.com/bcjs/js/bootstrap.min.js' ></script> </head> <body> <h5 style='font-family: ’微軟雅黑’;'>圖片文字并排擺放，文字局域圖片腰部</h5> <!--<span style='font-family: ’微軟雅黑’;color: orangered;font-size: 10px; '>注意：有些瀏覽器不支持旋轉的特性transform:正如你所看到的<br/></span>--> <span onclick='sendGood()'> <img src='http://www.wxshucaidpc.com/bcjs/img/good.jpg' /> </span> [<span id='good'></span>] <span onclick='sendBad()'> <img src='http://www.wxshucaidpc.com/bcjs/img/good.jpg' /> </span> [<span id='bad'></span>] <script> /*點贊的數量：*/ 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;} } /*點贊的數量：*/ function sendGood(){good = parseInt(good) + 1;document.getElementById('good').innerText = good; document.getElementById('goodSpan').onclick = function(e){ e.preventDefault(); e.stopImmediatePropagation();} } /*踩的數量：*/ function sendBad(){bad = parseInt(bad) + 1;document.getElementById('bad').innerText = bad;document.getElementById('badSpan').onclick = function(e){ e.preventDefault(); e.stopImmediatePropagation();} } </script> </body></html>
結果如下：
下面是點贊圖片：可直接拖動圖片另存為保存到本地，再使用。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。
相關文章：
網公網安備