JS添加随机颜色20-100宽度正方形（两种方法）

点击按钮添加随机颜色20-100宽度正方形
第一种：使用innerHTML

div>
button>

js代码

<script>
	var divs,bn;
	init();
	function init(){
     
		divs=document.getElementById("divs");
		bn=document.getElementById("bn");
		bn.onclick=addElement;
	}

	function addElement(){
     
	//调用函数生成20-100随机数
		var w=randomNumber(100,20);
		var str="";
		str+="
";
		divs.innerHTML+=str;
	}
	//随机数函数，两个参数，最大值和最小值，未设置最小值时，最小值为0
	function randomNumber(max,min){
     
		if(isNaN(min)) min=0;
		var num=Math.floor(Math.random()*(max-min));
		return num+min;
	}	
	//写一个生成随机颜色函数，用的时候直接调用
	function randomColor(){
     
	var bg="#";
	for(var i=0;i<6;i++){
     
	bg+=randomNumber(16).toString(16);
	}
	return bg;
	}
</script>

第二种，使用DOM添加元素方法

<botton>按钮botton>

JS代码

<script>
        init();
        //初始化函数
        function init(){
     
            var bn=document.querySelector("button");
            //给bn添加点击事件
            bn.onclick=clickHandler;
        }

        function clickHandler(){
     
        	//创建一个div标签元素
            var div=document.createElement("div");
            //设置div样式，宽高取20-100随机数
            div.style.width=div.style.height=Math.floor(Math.random()*80+20)+"px";
            div.style.backgroundColor=randomColor();
            div.style.position="absolute";
            div.style.left=Math.floor(Math.random()*1000)+"px";
            div.style.top=Math.floor(Math.random()*600)+"px";
            //将创建的div添加至父元素body的尾部
            document.body.appendChild(div);
        }

		//生成随机颜色函数
        function randomColor(){
     
            var bg="#";
            for(var i=0;i<6;i++){
     
                bg+=Math.floor(Math.random()*16).toString(16);
            }
            return bg;
        }
</script>