原生js写篮球的运动轨迹！

首先写css样式

html,body,#box{
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
        #app{
            width: 100px;
            height: 100px;
            position: absolute;
            top: 0;
            left: 0;
            background: url('./img/timg.jpg');
            background-size:100% 100%;
            border-radius: 50% 
        }

html 布局简单布局



重点 js代码

window.onload = function () {
			// js 第一步先获取元素
            var oApp = document.getElementById('app');
            var oWidth = document.documentElement.clientWidth-100;
            var oHeight = document.documentElement.clientHeight-100;
            // 设置一个开关，防止点击两次
            var flog = true;
            //事件绑定到body
            document.body.onclick = function (){ 
            // 开关为 true的时候执行函数
                if(flog){
                   drag();
                }
                flog = false;
            }

                function drag(){
                //开始 left top都是为0的  创建一个对象 x 为left y为 top；
                    var arr ={
                                x:0,
                                y:0,
                                oSeedx:ran(-5,5),//left 随机的运动方向 
                                oSeedy:ran(-5,5);//top 随机的运动方向
                            };
                    setInterval(() => {
                        arr.y+=arr.oSeedy;
                        arr.x+=arr.oSeedx;
                        // 当left的值小于0的，就数去屏幕了 所以把oSeedx的值 乘以-1 正的就便成负的 负的话就便成正的
                            if(arr.x<=0){
                                arr.x = 0;
                                arr.oSeedx *=-1;
                            }
                            if(arr.y <= 0){
                                arr.y = 0;
                                arr.oSeedy *= -1;
                            }
                            if(arr.x >=oWidth ){
                                arr.x = oWidth;
                                arr.oSeedx *= -1
                            }
                            if(arr.y >= oHeight){
                                arr.y = oHeight;
                                arr.oSeedy *=-1;
                            }
                        //把每次改变后的值 添加到盒子里
                       oApp.style.top = arr.y +'px';
                       oApp.style.left = arr.x +'px'; 
                    } , 30)
                }
			
			// 随机数的函数
            function ran(m,n){
                return parseInt(Math.random()*(m-n)+n);
            }
        }

全部代码

本文章为个人写的 没有转载！！！！