zoukankan      html  css  js  c++  java
  • 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=" 25px; height: 25px;" /> 
    		</span>
    		[<span id="good"></span>]
    		   
    		<span id="badSpan" onclick="sendBad()">
    			<img src="img/good.jpg" style=" 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>
    

    结果如下:

    下面是点赞图片:可直接拖动图片另存为保存到本地,再使用。

  • 相关阅读:
    Ehcache(04)——设置缓存的大小
    Ehcache(03)——Ehcache中储存缓存的方式
    Ehcache(02)——ehcache.xml简介
    Ehcache(01)——简介、基本操作
    linux 下开机自动启动tomcat服务
    Git_常用链接
    Android_listview点击失效
    Android_Drawable Bitmap Canvas Paint之间区别[转]
    Android_广播
    Notification(Notification的通知栏常驻、Notification的各种样式、Notification点击无效)
  • 原文地址:https://www.cnblogs.com/superdrew/p/9141394.html
Copyright © 2011-2022 走看看