<!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>