要求: 点击按钮，随机生成一个20px-100px宽度正方形，随机颜色，随机位置，不能出可视区域外
思路：（1）创建按钮，为按钮添加事件侦听
（2）触发事件，创建一个元素
（3）设置元素样式，包括大小，位置，颜色
基础HTML代码：
<!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>添加</button>
<script>
</script>
</body>
</html>
JS代码：
init();
function init() {
var bn = document.getElementById("bn"); //通过id获取按钮bn
bn.addEventListener("click",clickHandler); //为按钮添加点击事件
}
function clickHandler(e) {
var wid = document.documentElement.clientWidth; //获取视口宽度
var hei = document.documentElement.clientHeight; //获取视口高度
var div = document.createElement("div"); //创建一个div
//定义一个局部变量divWidth 存放当前创建的div的大小
var divWidth = Math.floor(Math.random() * 80 + 20);
//设置div的样式,包括 宽 高 定位 背景颜色
div.style.position = "absolute";
div.style.width=divWidth+"px";
div.style.height=divWidth+"px";
//div的位置应该是当前视口宽高减去创建div的宽高 然后取随机值,才能保证div不会超出视口
div.style.left = Math.floor(Math.random() * (wid - divWidth))+"px";
div.style.top = Math.floor(Math.random() * (hei - divWidth))+"px";
div.style.backgroundColor =randomColor();
//将元素添加到body中
document.body.appendChild(div);
}
//定义一个函数,执行返回一个代表颜色的字符串
function randomColor() {
return "#"+Math.floor(Math.random()*0x1000000).toString(16).padStart(6,"0");
}
效果展示：
看完上面的代码，你是不是觉得它看起来有一些 繁杂 也许我们可以将它 “美化” 一下，让代码看起来更漂亮，更加赏心悦目
我们可以将代码中的一些类似的部分摘取出来，用一个函数来完成这些内容，比如为元素添加style 样式
我们可以这么写
// createNewElement 创建一个元素, 函数内有两个参数第一个参数是要创建的元素类型,第二个参数是样式
//通过Object.assign()方法将style内的属性添加给创建的元素的style上
//最后将处理好的元素返回
function createNewElement(elem,style){
var elem=document.createElement(elem);
Object.assign(elem.style,style);
return elem;
}
注： Object.assign(target, source_1, ···)
用于将源对象的所有可枚举属性复制到目标对象中。
我们怎么使用这个函数呢
var elem(用于接收函数return的元素)=createNewElement("div(要创建的元素类型)",{
属性:属性值; //第二个参数为对象,将这个对象传入,并将对象的属性复制到元素的style属性上完成样式的添加.
"100px",
backgroundColor:"green"
});
这个函数不仅可以用于这里,还可以用于创建其他元素
init();
function init() {
var bn = document.getElementById("bn"); //通过id获取按钮bn
bn.addEventListener("click",clickHandler); //为按钮添加点击事件
}
function clickHandler(e) {
var wid = document.documentElement.clientWidth; //获取视口宽度
var hei = document.documentElement.clientHeight; //获取视口高度
//定义一个变量divWidth 存放当前创建的div的大小
var divWidth = Math.floor(Math.random() * 80 + 20);
var div=createNewElement("div",{
position : "absolute",
divWidth+"px",
height:divWidth+"px",
left: Math.floor(Math.random() * (wid - divWidth))+"px",
top:Math.floor(Math.random() * (hei - divWidth))+"px",
backgroundColor:randomColor()
})
document.body.appendChild(div);
}
// createNewElement 创建一个元素, 函数内有两个参数第一个参数是要创建的元素类型,第二个参数是样式
//通过Object.assign()方法将style内的属性添加给创建的元素的style上
//最后将处理好的元素返回
function createNewElement(elem,style){
var elem=document.createElement(elem);
Object.assign(elem.style,style);
return elem;
}
//定义一个函数,执行返回一个代表颜色的字符串
function randomColor() {
return "#"+Math.floor(Math.random()*0x1000000).toString(16).padStart(6,"0");
}
--