Math.random()练习-点击生成随机颜色随机位置的div(基础+进阶)

该文章可以对Math.random()充分练习，进阶版用Math.random()实现随机颜色，随机盒子大小，随机盒子位置，该文章分为基础篇和进阶篇，适用于小白学习和大佬巩固。
基础篇：
设置一个固定位置的div点击随机变色，使用Math.random()生成随机数进行拼接。

设置div的大小和位置

 #box {
        width: 200px;
        height: 200px;
      }

 <div id="box"></div>

js代码如下：

 //产生随机颜色
    function getColor() {
        var str = "#";
        for (var i = 0; i < 6; i++) {
            str += (parseInt((Math.random() * 16)).toString(16));
        }
        console.log(str)

        return str;
    }
    document.onclick = function() {
        // box.innerHTML = getColor();
        box.style.backgroundColor = getColor();
    }

进阶版：
点击生成一个新的div，出现在随机位置，大小也随机，颜色随机生成，效果图如下：

设置一个div和一个button按钮

 <div id="divs"></div>
 <button id="bn">按钮</button>

js代码如下：

 var divs, bn;
        //init函数  ，init()运行函数
        // 函数式编程
        init();
        function init() {
            divs = document.getElementById("divs");
            bn = document.getElementById("bn");
            // 当点击bn时，执行clickHandler函数
            bn.onclick = clickHandler; //点击事件要求直接等于函数名就可以了
            // bn.οnclick=clickHandler();//这样是错误的，因为这样会立即执行函数
        }
        function clickHandler() {
            var w = getRandom(100, 20);
            // 20-100随机宽高，Math.random()*81它是0-80，20-100
            var bg = "#";
            for (var i = 0; i < 6; i++) {
                bg += getRandom(16).toString(16);
            }
            var str = "";
            str += "<div style='";
            str += "position:absolute;";
            str += "width:" + w + "px;";
            str += "height:" + w + "px;";
            str += "background-color:" + bg + ";";
            str += "left:" + getRandom(1200) + "px;";
            str += "top:" + getRandom(600) + "px;";
            str += "'></div>";
            divs.innerHTML += str;
        }
        function getRandom(max, min) {
            // 如果20-100
            if (isNaN(min)) min = 0;
            var num = Math.random() * (max - min);
            return parseInt(num + min);
        }