<style>
body {
background-color: darksalmon;
}
div {
width: 100px;
height: 100px;
border: 1px solid #000;
display: inline-block;
line-height: 80px;
text-indent: 20px;
margin: 50px 20px;
}
/*div的触摸事件*/
div:hover {
background-color: lightsalmon;
transition-duration: 3s;
opacity: 0.6;
}
</style>
<body>
<div>天明</div>
<div>css</div>
<div>js</div>
<div>html</div>
<div>css</div>
<div>js</div>
<div>html</div>
<div>css</div>
<div>js</div>
<div>html</div>
<div>css</div>
<div>js</div>
<div>html</div>
<div>css</div>
<div>jquery</div>
<div>Es6</div>
<div>Bootstop</div>
<div>jquery</div>
<div>Es6</div>
<div>Bootstop</div>
<div>jquery</div>
<div>Es6</div>
<div>Bootstop</div>
<div>jquery</div>
<div>Es6</div>
<div>Bootstop</div>
<div>jquery</div>
<div>Es6</div>
<div>Bootstop</div>
<div>Bootstop</div>
<script>
//获取div元素
var divs = document.querySelectorAll("div");
//设置定时器
setInterval(function () {
//设置循环
for (var i = 0; i < divs.length; i++) {
divs[i].style.backgroundColor = "lawngreen";
//判断根据自己的需求
if (i == 1) {
//给div加一个背景颜色为红色,后面也是但是就是变了一下颜色;
divs[i].style.backgroundColor = "red";
}
if (i == 4) {
divs[i].style.backgroundColor = "gold";
}
if (i == 12) {
divs[i].style.backgroundColor = "cyan";
}
if (i == 15) {
divs[i].style.backgroundColor = "navy";
}
if (i == 18) {
divs[i].style.backgroundColor = "steelblue";
}
if (i == 21) {
divs[i].style.backgroundColor = "orange";
}
if (i == 24) {
divs[i].style.backgroundColor = "yellow";
}
if (i == 26) {
divs[i].style.backgroundColor = "purple";
}
if (i == 28) {
divs[i].style.backgroundColor = "indigo";
}
if (i == 30) {
divs[i].style.backgroundColor = "gray";
}
//让里面的元素又变成初始值
setTimeout(function () {
location.reload();
}, 1000);
}
}, 1000);
</script>
</body>
</html>
一个比较有趣的小网页,又做的不好的地方,请大佬们指出来
最新推荐文章于 2024-09-08 21:17:37 发布