【JS运动追逐】学习作业DOM

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body><style type="text/css">
.a{position:absolute;width:100px;height:100px;}
.b{left:500px;top:200px;url(http: //img142.poco.cn/mypoco/myphoto/20130729/13/5692517620130729134644050.png)}
.c{ url(http: //img142.poco.cn/mypoco/myphoto/20130729/13/5692517620130729134702061.png)}
.d{position:absolute;left:0;top:0;background:#effbbb;height:750px;width:100%}
</style>
<div class="d">
    <div class="a b" id="b" ></div>
    <div class="a c" id="a" ></div>   
  <input id="showtime" style="color:#f00;width:200px;"  type="text" value="0时0分0秒">
    </div>
<script>
var timer=null;
alert('开始,别让粉色球追上');
document. bunnyRun(){
    var b=document.getElementById('b');
    b.style.left =  event.clientX-50+'px';
    b.style.top  =  event.clientY-50+'px';
    }
var se,m=0,h=0,s=0,ss=1;
function second(){
if((ss%100)==0){s+=1;ss=1;}
if(s>0 && (s%60)==0){m+=1;s=0;}
if(m>0 && (m%60)==0){h+=1;m=0;}
t=h+"时"+m+"分"+s+"秒"+ss+"毫秒";
document.getElementById("showtime").value=t;
ss+=1;
}
window. init(){
    clearInterval(timer);
    se=setInterval("second()",1);
    timer=setInterval(function as(speed){
        var a=document.getElementById('a'),
            b=document.getElementById('b'),
            speed=5;
        if(a.offsetLeft > b.offsetLeft) 
            a.style.left = a.offsetLeft - speed+'px';
        else if(a.offsetLeft < b.offsetLeft)
        a.style.left = a.offsetLeft + speed+'px';
        if(a.offsetTop > b.offsetTop)   
            a.style.top = a.offsetTop - speed+'px';
        else if(a.offsetTop < b.offsetTop)
            a.style.top = a.offsetTop + speed+'px';
                   
        if(Math.abs(a.offsetLeft-b.offsetLeft)<speed && Math.abs(a.offsetTop-b.offsetTop)<speed)
        {a.style.left=b.offsetLeft+'px';
        a.style.top=b.offsetTop+'px';}
        if(Math.abs(a.offsetLeft-b.offsetLeft)<speed && Math.abs(a.offsetTop-b.offsetTop)>speed )
        a.style.left=b.offsetLeft+'px';
        if(Math.abs(a.offsetLeft-b.offsetLeft)>speed && Math.abs(a.offsetTop-b.offsetTop)<speed )
        a.style.top=b.offsetTop+'px';
               
        if(a.offsetTop==b.offsetTop&&a.offsetLeft==b.offsetLeft)
        {clearInterval(se);ss=1;m=h=s=0;
        alert('失败,所用时间:'+'\n'+'\n'+t+'\n'+'\n'+'按F5重新挑战');
        clearInterval(timer);
        clearInterval(se);}},1);
}
</script>
</body>
</html>

演示http://getlove.7ta.cn/Article/5515576/1361888/

本文出自 “学我所用” 博客,谢绝转载!

你可能感兴趣的:(追逐,js运动)