JavaScript实现点赞操作:(练手·初级)
前期准备:
① 导入jQuery文件;
② 导入bootstrap文件;
③ 点赞图片;
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>对span标签控制鼠标点击</title><script type="text/javascript" src="js/jquery-3.3.1.js" ></script><script type="text/javascript" src="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 id="goodSpan" onclick="sendGood()"><img src="img/good.jpg" style="width: 25px; height: 25px;" /> </span>[<span id="good"></span>] <span id="badSpan" onclick="sendBad()"><img src="img/good.jpg" style="width: 25px; height: 25px; transform: rotate(180deg);" /> </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>
结果如下:
下面是点赞图片:可直接拖动图片另存为保存到本地,再使用。
JS简单实现点赞操作
原文地址:https://www.cnblogs.com/superdrew/p/9141394.html