js原生使body变色

最新推荐文章于 2023-02-21 20:56:18 发布

IT_Bired

最新推荐文章于 2023-02-21 20:56:18 发布

阅读量603

点赞数

文章标签： javascript

本文链接：https://blog.youkuaiyun.com/IT_Bired/article/details/53436647

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button>开始</button><span>0</span><br>
<button>开始</button><span>0</span><br>
<button>开始</button><span>0</span>
<script type="text/javascript">
var abtn = document.getElementsByTagName('button');
var aspan = document.getElementsByTagName('span');
var arr = ['1','2','3'];
for(var i = 0; i < abtn.length; i++) {
abtn[i].index = i;

abtn[i].onclick = function () {
var d = aspan[this.index];
if(this.innerHTML == '开始') {
arr[this.index] = setInterval(function () {
d.innerHTML = parseInt(Math.random()*256);
},30);
this.innerHTML = '结束';
}else{
clearInterval(arr[this.index]);
this.innerHTML = '开始';
if(abtn[0].innerHTML == '开始' && abtn[1].innerHTML == '开始' && abtn[2].innerHTML == '开始'){
document.body.style.background = 'rgb(' + aspan[0].innerHTML + ',' + aspan[1].innerHTML + ',' + aspan[2].innerHTML + ')';
}
}

}
}

</script>
</body>
</html>