随机给一个盒子添加一个十六进制的颜色
注意:1、随机生成数组下标时,需要『使用 parseInt 转换为整数』(将字符串转换成整数:‘15.98’->15)
2、Math.random() 生成的值是 0-1(不含1),所以乘以 16 能得到 1-16且不包含16的值
<style>
div {
width: 300px;
height: 200px;
background-color: pink;
}
</style>
<script>
function getColor() {
var str = "#";
var arr = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f"];
for (var i = 0; i < 6; i++) {
// 『在需要整数时,优先使用 parseInt』
// 『这里需要的是 0-15 而不是 16,因为 arr 的 index 是 0-15』
var num = parseInt(Math.random() * 16);//0-15
str += arr[num];
}
return str;
}
// 页面加载完毕后执行的事件 『onload - 函数』
window.onload = function () {
// 获取到 DOM 元素后,可以直接使用 style 设置样式
document.getElementById("dv").style.backgroundColor = getColor();
};
</script>
<body>
<div id="dv"></div>
</body>