popup

最新推荐文章于 2022-07-08 08:03:55 发布

liugang0605

最新推荐文章于 2022-07-08 08:03:55 发布

阅读量285

点赞数

分类专栏： js 随机颜色文章标签：布局 js

本文链接：https://blog.csdn.net/power8988/article/details/74775396

版权

js 同时被 2 个专栏收录

122 篇文章 2 订阅

订阅专栏

随机颜色

2 篇文章 0 订阅

订阅专栏

随机跳出大小颜色不一样的div。
实现后的效果如下
这里写图片描述
以下是基本布局的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>popupBall</title>
</head>
<body>
<div id="box">
</div>

提前写一下基本的样式

<style>
        #box {
            width: 555px;
            height: 555px;
            background: #e4393c;
            position: relative;
        }
        #box div {
            position: absolute;
        }
    </style>

下来就是要写js脚本，首先定义全局变量box,num，其中num用来记录div的数量；

 window.onload = function () {
        var box = document.getElementById("box");
        var num = 1;
  }

准备一个生成随机数的函数

function randomN(min, max) {
            return Math.floor(Math.random() * (max - min) + min)
        }

一个生成随机颜色的函数

function randomColor() {
            return '#' +
                (function (color) {
                    return (color += '0123456789abcdef'[Math.floor(Math.random() * 16)]) && (color.length == 6) ? color : arguments.callee(color);
                })('');
        }

一个生成随机div的函数

function newDiv() {
            var doc = document;
            box.appendChild(doc.createDocumentFragment().appendChild(doc.createElement("div")));
            var that = doc.querySelector("#box>div:last-child");
            that.style.width = randomN(5, 50) + "px";
            that.style.height = randomN(5, 50) + "px";
            that.style.borderRadius = randomN(5, 50);
            that.style.top = randomN(30, 500) + "px";
            that.style.left = randomN(30, 500) + "px";
            that.style.backgroundColor = randomColor();
            that.style.borderRadius = randomN(5, 50) + "%";
            num++;
        }

一个删除随机某个div的函数

function removeDiv() {
            var doc = document;
            var child = "#box>div:nth-child(" + randomN(1, num) + ")";
            if (child) {
                var del = doc.querySelector(child);
                box.removeChild(del);
                num--;
            }
        }

如何启动呢？给box添加一个点击开始的函数

 box.onclick = function(){}

在这个函数里面，加一个定时器，定时器内部利用num进行判断，只要num小于10，就只添加。。。。

box.onclick = function () {
            setInterval(function () {
                if (num < 10) {
                    newDiv();
                    newDiv();
                    newDiv();
                    newDiv();
                    newDiv();
                    newDiv();
                    newDiv();
                    newDiv();
                }
                if (num > 50) {
                    removeDiv();
                    newDiv();
                    removeDiv();
                    newDiv();
                    removeDiv();
                    removeDiv();
                    newDiv();
                    removeDiv();
                    newDiv();
                    removeDiv();
                }
                else {
                    newDiv();
                    removeDiv();
                    newDiv();
                    removeDiv();
                    newDiv();
                    newDiv();
                    removeDiv();
                    newDiv();
                    removeDiv();
                    newDiv();
                }
            }, 100)
        }