无规则运动的球体(纯js)

基本信息

源码名称：无规则运动的球体(纯js)

源码大小：1.37KB

文件格式：.html

开发语言：js

更新时间：2018-07-25

友情提示：（无需注册或充值，赞助后即可获取资源下载链接）

嘿，亲！知识可是无价之宝呢，但咱这精心整理的资料也耗费了不少心血呀。小小地破费一下，绝对物超所值哦！如有下载和支付问题，请联系我们QQ(微信同号)：813200300

本次赞助数额为： 2 元　

源码介绍

js创建一个小球，小球在窗口内进行无规则运动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    window.onload = function(){
        function creatDiv(){
            var div = document.createElement('div');
            div.style.cssText = 'width: 40px; height: 40px; background-color: mediumaquamarine; border-radius: 50%; position: absolute;';
            document.body.appendChild(div);
            div.style.left = Math.floor(Math.random()*1100)   'px';
            div.style.top = Math.floor(Math.random()*600)   'px';
            var iSpeedLeft = Math.floor(Math.random()*10);
            var iSpeedTop = Math.floor(Math.random()*10);
            setInterval(function(){
                if(div.offsetLeft >= document.documentElement.clientWidth - div.offsetWidth - 10 || div.offsetLeft <0){
                    iSpeedLeft = -iSpeedLeft;
                }
                if(div.offsetTop >= document.documentElement.clientHeight - div.offsetHeight -10 || div.offsetTop < 0){
                    iSpeedTop = -iSpeedTop;
                }
                div.style.left = div.offsetLeft   iSpeedLeft   'px';
                div.style.top = div.offsetTop   iSpeedTop   'px';
            },30)
        }
        //同时创建多个小球球
        for(var i=0;i<30;i  ){
            creatDiv();
        }
    }
</script>


</body>
</html>