生成随机大小颜色位置正方形

最新推荐文章于 2023-03-01 16:40:33 发布

流灬

最新推荐文章于 2023-03-01 16:40:33 发布

阅读量999

点赞数 1

分类专栏：笔记文章标签： javascript

本文链接：https://blog.csdn.net/qq_41625074/article/details/105084534

版权

笔记专栏收录该内容

9 篇文章 1 订阅

订阅专栏

<!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>
    <button id="but">点击</button>
    <div id="div1"></div>
    <script>
        // 调用初始化函数
        init();
        // 定义初始化函数
        function init(){
            // 通过document.getElementById方法获取元素并把它们赋值给变量
            var div1=document.getElementById("div1");
            var but=document.getElementById("but");
            //将产生矩形的函数赋给按钮的点击事件，每当点击一次按钮，就会产生一个随机大小、颜色、位置的正方形
            //注意点击事件的对象，可以理解成函数在被赋值的那一刻起，就已经和那个对象绑定了，只要一点击就会发生
            but.onclick=clickHeadler;
        }
        //定义产生正方形的函数
        function clickHeadler(){
            // 调用随机函数，将函数的返回值赋给正方形的边长
            var size=random(101.20);
            // 定义正方形的背景颜色值的字符串，初值为#
            var color="#";
            // 每循环一次产生一个十六进制的字符拼接在背景颜色字符串后，六次后获得一个完整的颜色值字符串
            for(i=0;i<6;i++){ 
                // 先调用随机函数产生一个0~16，不包括16的数，然后取整，最后强转字符串 这里注意：要强转成16进制
                color+=parseInt(random(16)).toString(16);
            }
            // 以下都是拼接构成一个矩形及其样式的语句  注意这里用的是内联样式 style="属性:属性值;"
            var str="<div style='";
            str+="width:"+size+"px;";
            str+="height:"+size+"px;";
            str+="background:"+color+";";
            str+="position:absolute;"
            str+="left:"+random(1000)+"px;";
            str+="top:"+random(1000)+"px;";
            str+="'>"+"</div>";
            //字符串收尾后通过对象的innerHTML属性添加进div1中
            div1.innerHTML+=(str);
        }
        //定义随机函数 这里的形参有两个是因为需要进行减法运算(a-b) 
        //当实参数少于形参数时，多出的形参值为undefined.这个函数中如果b的值为undefined的话，就手动改其值为0
        //返回的值作为函数的结果
        function random(a,b){
            if(b===undefined) b=0;
            return parseInt(Math.random()*(a-b)+b);
        }
    </script>
</body>
</html>

效果图：