<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="btn">点击切环背景色</button>
<script>
var btn = document.getElementById("btn");
btn.onclick = function () {
document.body.style.backgroundColor = getRanColor()
}
// // rgb 方式定义
// function getRanColor() {
// var r = parseInt(Math.random() * 255);
// var g = parseInt(Math.random() * 255);
// var b = parseInt(Math.random() * 255);
// return "rgb(" + r + "," + g + "," + b + ")"
// }
// 使用 十六进制的方式修改
function getRanColor() {
var arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, "a", "b", "c", "d", "e", "f"];
// 声明一个变量来接收得到的每一个 十六进制数
var str = "#";
// 循环六次
for (var i = 0; i < 6; i++) {
// 每一次都获取一个随机的值
// 想要获取随机的值,首先要获取随机索引
var ranIdx = parseInt(Math.random() * arr.length);
// console.log(ranIdx);
// 拼接 六位
str += arr[ranIdx];
console.log(str, "str");
}
return str
}
</script>
</body>
</html>
js设置随机背景色
最新推荐文章于 2022-07-19 16:14:00 发布