<script>
window.onload = function() {
var clock = document.getElementById('clock')
var color = ['red', 'green', 'yellow', 'blue', 'black', 'gold', 'orange', 'gray', 'pink', 'maroon'] //钟表颜色数组
setInterval(function() {
var now = new Date()
clock.innerHTML = now.getFullYear() + '年' + (now.getMonth()+1) + '月' + now.getDate() + '日' + now.getHours() + ':' + now.getMinutes() + ':' + now.getSeconds()
var radom = Math.floor(Math.random() * color.length + 1) - 1 //随机数
clock.style.color = color[radom] //设置随机颜色
}, 1000)
}
</script>
<body>
<span id="clock" style="font-size:20px"></span>
</body>
</html>
差不多一样的做法。我试着写了一下先获取到整个class元素，
var oDiv1=document.getElementsByClassName('change1')
然后就是加个定时器并调用控制它的backgroundColor
oDiv1[0].style.backgroundColor=colors[n]
js新手，不妥之处，见谅。
<!DOCTYPE html>
<html>
<head lang="zh-CN">
<meta charset="UTF-8">
<title></title>
<script src="../script/mymode.js"></script>
<style>
.change1{
border: 1px,solid,sandybrown
width: 200px
height: 200px
background-color: red
position: absolute
top: 200px
left: 200px
}
</style>
<script>
window.onload=function(){
var oDiv1=document.getElementsByClassName('change1')
var colors=["sandybrown","yellow","green","gray"]
var n=0
function ac () {
n++
if (n==(colors.length)){
n=0
}
oDiv1[0].style.backgroundColor=colors[n]
time=setTimeout(ac,1000)
}
ac()
}
</script>
</head>
<body>
<div class ='change1'> </div>
</body>
</html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）