如图所示,在我们每次刷新网页的时候,盒子的颜色都不一样,是随机的,要用到js里面的随机数函数Math.random(),可以用rgb 或者十六进制两种方式输出
首先 我们先定义一个盒子
.box {
width: 400px;
height: 400px;
margin: 40px auto;
}
js部分代码:
let RGBColor = function(N,M) {
return Math.floor(Math.random() * (M - N + 1)) + N
}
// RGBColor(0,255)
let arr = ['0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f']
function getRandomColor(flag = true){
if(flag){
return `rgb(${RGBColor(0,255)},${RGBColor(0,255)},${RGBColor(0,255)})`
}
else{
let str = '#'
for(let i = 0 ; i < 6; i++){
str += arr[Math.floor(Math.random() * arr.length)]
}
return str
// return `#${arr[Math.floor(Math.random() * arr.length)]}${arr[Math.floor(Math.random() * arr.length)]}${arr[Math.floor(Math.random() * arr.length)]}${arr[Math.floor(Math.random() * arr.length)]}${arr[Math.floor(Math.random() * arr.length)]}${arr[Math.floor(Math.random() * arr.length)]}`
}
}
const div = document.querySelector('div')
div.style.backgroundColor = getRandomColor(true)
console.log(getRandomColor(true))
console.log(getRandomColor(false))
大概是这样一个效果,每次刷新网页,盒子的颜色都是完全随机的