<style>
* {
margin: 0;
padding: 0;
}
ul {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 700px;
height: 620px;
display: flex;
flex-wrap: wrap;
align-content: space-around;
/* display: none;s */
}
ul li {
margin-left: 3px;
list-style: none;
width: 200px;
height: 200px;
background-color: palevioletred;
border: 1px solid black;
text-align: center;
line-height: 200px;
font-size: 30px;
font-weight: bold;
color: #fff;
}
</style>
</head>
<body>
<ul class="box">
<li class="aa">600元优惠券</li>
<li class="aa">800元优惠券</li>
<li class="aa">1000元优惠券</li>
<li class="aa">800元优惠券</li>
<li class="bb">
<button>开始</button>
<button>停止</button>
</li>
<li class="aa">600</li>
<li class="aa">600</li>
<li class="aa">600</li>
<li class="aa">600</li>
</ul>
<script>
var id = null;
var len = 0;
var star = document.getElementsByTagName("button")[0];
var stop = document.getElementsByTagName("button")[1];
var ul = document.querySelector("ul");
var li = document.getElementsByTagName("li");
var bb = document.getElementsByClassName("bb")[0];
var aa = document.getElementsByClassName("aa");
star.onclick = function () {
id = setInterval(function () {
for (var i = 0; i < aa.length; i++) {
aa[i].style.background = "pink"
}
var num = Math.floor(Math.random() * (7 - 0 + 1))
aa[num].style.background = "#333"
}, 200)
}
stop.onclick = function () {
clearInterval(id)
}
</script>
</body>
9095
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
