提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其他

当前栏目

躁动的小球

2023-03-14 22:35:40 时间 

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
 div{
     width: 200px;
     height: 200px;
     background: blue;
     border-radius: 50%;
     position:fixed;
 }
 span{
     width: 100px;
     height: 100px;
     text-align: center;
     line-height: 100px;
     border-radius: 50%;
     position: absolute;
     background:#ccc;
     margin-left: 50px;
     margin-top:50px;
 }

    </style>
</head>
<body>
    <div style="left:0;top:0"><span>X</span></div>
</body>
</html>
<script>

var oDiv=document.getElementsByTagName('div')[0];
var ospan=document.getElementsByTagName("span")[0];
var i=1,j=1;
var timer=setInterval(fn,30)
function fn(){

 oDiv.style.left=oDiv.offsetLeft+10*i+"px";
 oDiv.style.top=oDiv.offsetTop+10*j+"px";
var ymWidth=document.documentElement.clientWidth||document.body.clientWidth;
var ymHeight=document.documentElement.clientHeight||document.body.clientHeight;
if (oDiv.offsetLeft>=ymWidth-200&&i>0||oDiv.offsetLeft<=0&&i<0) {
    i*=-1;

}

if (oDiv.offsetTop>=ymHeight-200&&j>0||oDiv.offsetTop<=0&&j<0) {
    j*=-1;

    };

}

oDiv.onmouseover=function(){
    clearInterval(timer)
}
oDiv.onmouseout=function(){
    timer=setInterval(fn,30)
}
ospan.onclick=function(){
    oDiv.style.display="none"
}
var timer2=setInterval(function(){
    oDiv.style.display="block"

},2000)
</script>

相关文章