毛毛虫的爱情故事-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_44109821/article/details/103677483
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>毛毛虫也有爱情</title>  
		<style type="text/css">
		  *{padding: 0;margin: 0;}
			.box{background: url(img/bg.png) no-repeat;width: 600px;height: 424px;margin: 0 auto;padding-bottom:20px ;position: relative; }
			.winnower {position: absolute;left: 35px;top: 200px;}
			.bug1{ position: absolute;transform: scaleX(-1);left: 110px;bottom: 30px;}
			.bug2{position: absolute;right: 50px;bottom: 30px;}
			.ctr button{ background-color: lightgreen;border: 1px solid lightgreen;width: 90px;height: 30px;margin-top: 20px;margin-left: 30px;margin-right: -25px; }
			.heart{position: absolute;bottom: 80px;left: 150px;display: none;}
		</style>
		
	</head>
	<body>
		<div class="box">
			<div class="winnower" id="win">
				<img src="img/winnower.png"/>
			</div>
			<div class="ctr">
				<button id="btn1" onclick="winnower()">风车旋转</button>
				<button id="btn2" onclick="caterpillar()">毛毛虫移动</button>
			</div>
			<div class="bug1">
				<img src="img/bug.png"/>
			</div>
			<div class="bug2" id="bug2">
				<img src="img/bug.png"/>
			</div>
			<div class="heart" id="heart">
				<img src="img/heart.png"/>
			</div>
		</div>
		<script type="text/javascript">
//		按钮点击时的状态:	
		var clickstatus=true;
//		风车旋转的初始值:
        var rnum=0;
//      毛毛虫移动的初始值
        var cnum=0;
//      红心缩放的初始值
        var snum=1;
//       定时器
        var timer=null;
        function winnower()
        {
        	var win=document.getElementById("win")
        	var btn1=document.getElementById("btn1")
        }
        
		</script>
		<script type="text/javascript">
        var clickstatus=true;
        var rnum=0;
         var cnum=0;
          var snum=1;
           var timer=null;
        function winnower()
        {
        	var win=document.getElementById("win")
        	var btn1=document.getElementById("btn1")
        	clickstatus=false;
        	if (clickstatus==false)
        	{
        		btn1.disabled=true;
        	}
        	setInterval(function(){
        		rnum+=3;
        		win.style.webkitTransform="rotate("+rnum+"deg)";
        		if(rnum>360){
        			rnum=3;
        		}
        	},10)
        	}
        function caterpillar(){
         	var caterpillar=document.getElementById("bug2");
         	var heart=document.getElementById("heart");
         	clickstatus=false;
          	if(clickstatus==false){
          		btn2.disabled=true;
          	}
          	timer=setInterval(function(){
          		cnum-=1;
          	caterpillar.style.webkitTransform="translateX("+cnum+"px)";
          	if(cnum<-300){
          		clearInterval(timer);
          		heart.style.display="block";
          		myheart();
          	}
          	},20)
         }
         function myheart(){
         	var heart=document.getElementById("heart");
         	setInterval(function(){
         		snum+=0.1;
         		if(snum>2){
         			snum=0.4
         		}
         		else{
         			heart.style.webkitTransform="scale("+snum+")";
         			heart.style.display="block";
         		}
         	},30)
         }
		</script>
	</body>
</html>