核心方法:
获取n->m的随机整数
function getNum(n,m){
return Math.floor(Math.random()*(m-n+1))+n
}
整体思路分析:
- 通过js给页面背景一个颜色
- document.body 可以获取到页面中body
- document.body.style.backgroundColor = "rgb(0,0,0)"
- n~m的随机整数
代码如下:
<button id="btn">点击切换背景颜色</button>
<script>
function getNum(n,m){
return Math.floor(Math.random()*(m-n+1))+n
}
//实现点击切换背景色
// 获取按钮给定点击事件
//btn.onclick = function(){
// // 1. 拼接一个随机颜色的rgb
// var str = 'rgb('+ getNum(0,255) +','+ getNum(0,255) +','+ getNum(0,255) +')';
// // console.log(str);
// // 将随机的颜色字符串给到body的背景颜色属性
// document.body.style.backgroundColor = str
// }
// 实现自动切换背景颜色
// 定时器
// setInterval(函数,时间) 每过一段时间就执行一次函数
// 时间是毫秒级
setInterval(function(){
var str = 'rgb('+ getNum(0,255) +','+ getNum(0,255) +','+ getNum(0,255) +')';
document.body.style.backgroundColor = str
},1000)
</script>