JS简单实现点赞操作

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简单实现点赞操作

猜你喜欢