js實(shí)現(xiàn)簡單點(diǎn)贊操作
JavaScript實(shí)現(xiàn)點(diǎn)贊操作：（練手·初級），供大家參考，具體內(nèi)容如下
前期準(zhǔn)備：
① 導(dǎo)入jQuery文件；
② 導(dǎo)入bootstrap文件；
③ 點(diǎn)贊圖片；
<!DOCTYPE html><html> <head> <meta charset='UTF-8'> <title>對span標(biāo)簽控制鼠標(biāo)點(diǎn)擊</title> <script type='text/javascript' src='http://www.4tl426be.cn/bcjs/js/jquery-3.3.1.js' ></script> <script type='text/javascript' src='http://www.4tl426be.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.4tl426be.cn/bcjs/img/good.jpg' /> </span> [<span id='good'></span>] <span onclick='sendBad()'> <img src='http://www.4tl426be.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)圖片另存為保存到本地，再使用。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. python excel和yaml文件的讀取封裝2. moment轉(zhuǎn)化時(shí)間戳出現(xiàn)Invalid Date的問題及解決3. python爬蟲實(shí)戰(zhàn)之制作屬于自己的一個(gè)IP代理模塊4. php實(shí)現(xiàn)當(dāng)前用戶在線人數(shù)5. Android中的緩存6. Android Studio插件7. .net6 在中標(biāo)麒麟下的安裝和部署過程8. Python中內(nèi)建模塊collections如何使用9. Python內(nèi)存映射文件讀寫方式10. java——Byte類/包裝類的使用說明
網(wǎng)公網(wǎng)安備