碰撞运动 crash.html

最新推荐文章于 2023-01-05 10:32:15 发布

大海和云朵

最新推荐文章于 2023-01-05 10:32:15 发布

阅读量277

点赞数 1

本文链接：https://blog.csdn.net/qq_29592901/article/details/52371200

版权

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        #div1{width:100px;height:100px;background: red;position:absolute;}
    </style>
    <script>
        function startMove(){
            var oDiv=document.getElementById('div1');
            var iSpeedX=30;
            var iSpeedY=8;
            setInterval(function(){
                iSpeedY+=3;
                var l=oDiv.offsetLeft+iSpeedX;
                var t=oDiv.offsetTop+iSpeedY;
                if(t>=document.documentElement.clientHeight-oDiv.offsetHeight){
                    iSpeedY*=-0.8;
                    iSpeedX*=0.8;
                    t=document.documentElement.clientHeight-oDiv.offsetHeight;
                }else if(t<=0){
                    iSpeedY*=-1;
                    iSpeedX*=0.8;
                    t=0;
                }
                if(l>=document.documentElement.clientWidth-oDiv.offsetWidth){
                    iSpeedX*=-0.8;
                    l=document.documentElement.clientWidth-oDiv.offsetWidth;
                }else if(l<=0){
                    iSpeedX*=-0.8;
                    l=0;
                }
                if(Math.abs(iSpeedX)<1){
                    iSpeedX=0;
                }
                if(Math.abs(iSpeedY)<1){
                    iSpeedY=0;
                }
                oDiv.style.left=l+'px';
                oDiv.style.top=t+'px';
            },30);
        }
    </script>
</head>
<body>
<input id="ipt1" type="button" value="开始运动" οnclick="startMove()">
<div id="div1"></div>
</body>
</html>

大海和云朵

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
碰撞运动 crash.html

html>html>head lang="en"> meta charset="UTF-8"> title>title> style> #div1{width:100px;height:100px;background: red;position:absolute;} style> script> function sta
复制链接

扫一扫