js 点击生成div随机（宽高，颜色，位置）

最新推荐文章于 2021-06-18 12:24:46 发布

打螺丝的小尹

最新推荐文章于 2021-06-18 12:24:46 发布

阅读量1.4k

点赞数 2

分类专栏： JavaScript 函数式编程文章标签： js html5 javascript

本文链接：https://blog.csdn.net/u012120710/article/details/105082430

版权

JavaScript 函数式编程专栏收录该内容

0 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="divs"></div>
    <button id="bn">按钮</button>
    <script>
        
        var divs,bn;

        init();

        function init(){
            divs=document.getElementById("divs");
            bn=document.getElementById("bn");
            //点击bn时；执行clickHander函数
            bn.onclick=clickHandler;
        }
        function clickHandler(){
            //生成随机宽高
            var w=getRandom(100,20);
            //生成随机颜色
            var bg="#";
            for(var i=0;i<6;i++){
                bg+=getRandom(16).toString(16);
            }

            //生成div并赋随机颜色随机宽高随机位置
            var str="";
            str+="<div style='";
            str+="position:absolute;"
            str+="left:"+getRandom(1200)+"px;"
            str+="top:"+getRandom(600)+"px;"
            str+="width:"+w+"px;"
            str+="height:"+w+"px;"
            str+="background-color:"+bg+";";
            str+="'></div>";
            divs.innerHTML+=str;
        }
        //随机数生成器  输入值生成随机数
        function getRandom(max,min){
            if(isNaN(min)) min=0;
            var num=Math.random()*(max-min);
            return parseInt(num+min);
        }
    </script>
</body>
</html>