JS入门实例弹力球

最新推荐文章于 2022-03-30 18:24:34 发布

卢晶晶

最新推荐文章于 2022-03-30 18:24:34 发布

阅读量489

点赞数

分类专栏： Web前端 JS

本文链接：https://blog.youkuaiyun.com/Lucrecia666/article/details/81158379

版权

Web前端同时被 2 个专栏收录

14 篇文章

订阅专栏

9 篇文章

订阅专栏

<!DOCTYPE html>
<html>
<head>
   <title></title>
   <style type="text/css">
       #bold{
           border: 1px solid #0F0;
           border-radius: 100px;
           top: 0px;
           height: 0px;
           position: absolute;
           width: 100px;
           height: 100px;
           background: yellow;
           position: absolute;
           overflow: hidden;
       }
   </style>
</head>
<body>
   <div id="bold"></div>
</body>
<script type="text/javascript">
   boldobj=document.getElementById('bold');
   screenHeight=document.documentElement.clientHeight;
   boldobjHeight=105;   //不能加px,比实际多5px就没有下拉框；
   boldobjWidth=105;
   diffHeight=screenHeight-boldobjHeight;
   screenWidth=document.documentElement.clientWidth;
   diffWidth=screenWidth-boldobjWidth;
   ys=0;
   yv=10;
   xs=0;
   xv=10;
   setInterval(function(){
       ys+=yv;
       if(ys>=diffHeight){
           ys=diffHeight;
           yv=-yv;
       }
       if (ys<=0) {
           yv=-yv;
       }
       //document.title=ys+'-'+diffHeight;
       boldobj.style.top=ys+'px';
       xs+=xv;
       if(xs>=diffWidth){
           xs=diffWidth;
           xv=-xv;
       }
       if (xs<=0) {
           xv=-xv;
       }
       boldobj.style.left=xs+'px';
       },10);
</script>
</html>