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>
    

    结果如下:

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

  • 相关阅读:
    xps插入图片
    xps文件的基本操作
    大家注意:升级 win8.1 火狐浏览器 谷歌浏览器 搜狗五笔输入法 都不能用啦
    CF4C_Registration system 题解
    CF1B_Spreadsheets 题解
    CSP-J/S 初赛知识点整理
    Nodejs在centos下的安装
    sqlserver2012 表分区
    adb unknown host service 这个问题的解决,转载
    char和nchar,varchar和nvarchar的区别(转载)
  • 原文地址:https://www.cnblogs.com/superdrew/p/9141394.html
Copyright © 2011-2022 走看看