js随机背景色 并显示色号
今天重新看了一般原生js教程，看到一个例子 是点击按钮改变背景色。
我就改进了一下 点击按钮换一个颜色 并把色号给显示出来
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<input type="button"
onclick="changeColor()"
value="修改背景颜色">
<p id="demo">
</p>
<script>
function changeColor(){
var x1 = Math.random()*10
var y1 = Math.floor(x1)
var x2 = Math.random()*10
var y2 = Math.floor(x2)
var x3 = Math.random()*10
var y3 = Math.floor(x3)
var x4 = Math.random()*10
var y4 = Math.floor(x4)
var x5 = Math.random()*10
var y5 = Math.floor(x5)
var x6 = Math.random()*10
var y6 = Math.floor(x6)
var z = '#' + y1 + y2 + y3 + y4 + y5 + y6
document.getElementById('demo').innerHTML=z
document.body.style.background=z
}
</script>
</body>
</html>
改进：
实际操作色号只会在0-9间随机产生 不符合16进制色号，修改一下JS
function changeColor(){
var colors = [0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F']
var x1 = Math.random()*16
var y1 = Math.floor(x1)
var x2 = Math.random()*16
var y2 = Math.floor(x2)
var x3 = Math.random()*16
var y3 = Math.floor(x3)
var x4 = Math.random()*16
var y4 = Math.floor(x4)
var x5 = Math.random()*16
var y5 = Math.floor(x5)
var x6 = Math.random()*16
var y6 = Math.floor(x6)
var z = '#' + colors[y1] + colors[y2] + colors[y3] + colors[y4] + colors[y5] + colors[y6]
document.getElementById('demo').innerHTML=z
document.body.style.background=z
}
这样就完美实现所有色号实现。
2021年1月 再改进 一个随机方法获取色号
const RandomColor = () => "#" + Math.floor(Math.random() * 0xffffff).toString(16).padEnd(6, "0");
const color = RandomColor();
document.getElementById('demo').innerHTML=color
document.body.style.background=color
