JS-案例-div随机位置（随机颜色）

最新推荐文章于 2024-06-06 14:51:09 发布

joker.ma

最新推荐文章于 2024-06-06 14:51:09 发布

阅读量5.8k

点赞数 2

分类专栏：案例文章标签： JS 随机颜色随机位置 setInterval

本文链接：https://blog.csdn.net/qq_45092792/article/details/90900177

版权

案例专栏收录该内容

32 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: aquamarine;
            position: absolute;
            border-radius: 50%;
        }
    </style>
<body>
<div id="div0"></div>
    <script>
        var bool=true;//建立开关，控制开始和停止
        init();//初始化函数，添加点击函数
        function init() {
            var div = document.getElementById("div0");
            document.onclick = function (e) {
                bool=!bool;//（取反）用来构成开关
            };
            setInterval(animation, 400, div);//添加每隔400ms执行一次的函数
        }
        function animation(div) {
            if (!bool)return;//!bool时跳出，就能停下来
            div.style.left=Math.random()*950+"px";//水平方向随机距离
            div.style.top=Math.random()*550+"px";//数值方向随机距离
            var col="rgba(";
                for(var i=0;i<3;i++){
                    col+=Math.floor(Math.random()*256)+",";
                }
                col+=Math.random().toFixed(2)+")";
            div.style.backgroundColor=col;//随机颜色
        }
    </script>
</body>
</html>

joker.ma

关注

2
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
JS-案例-div随机位置（随机颜色）

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head> <style> div{ width: 100px;...
复制链接

扫一扫