?<link?rel="stylesheet"?href="./通用樣式.css">
????<style>
????????.contain?{
????????????width:?1200px;
????????????height:?800px;
????????????margin:?50px?auto;
????????}
????????li,
????????.box?{
????????????border:?1px?solid?green;
????????????width:?150px;
????????????height:?150px;
????????????background-color:?skyblue;
????????????text-align:?center;
????????????line-height:?150px;
????????????font-weight:?bold;
????????????margin-left:?5px;
????????}
????????button?{
????????????width:?50px;
????????????height:?50px;
????????????cursor:?pointer;
????????}
????????.active?{
????????????background-color:?#cccccc;
????????}
????</style>
</head>
<body>
????<div?class="contain">
????????<ul?class="flex">
????????????<li?class="active"?roll='1'>600元優(yōu)惠卷</li>
????????????<li?roll='2'>800元優(yōu)惠卷</li>
????????????<li?roll='0'>900元優(yōu)惠卷</li>
????????</ul>
????????<ul?class="flex">
????????????<li?roll='3'>600元優(yōu)惠卷</li>
????????????<div?class="flex?j-s-a?box?a-i-c"?roll='8'>
????????????????<button?class="start">開(kāi)始</button>
????????????????<button?class="stop">停止</button>
????????????</div>
????????????<li?roll='4'>900元優(yōu)惠卷</li>
????????</ul>
????????<ul?class="flex">
????????????<li?roll='5'>600元優(yōu)惠卷</li>
????????????<li?roll='6'>800元優(yōu)惠卷</li>
????????????<li?roll='2'>900元優(yōu)惠卷</li>
????????</ul>
????</div>
????<script>
????????//獲取按鈕
????????let?start?=?document.querySelector('.start')
????????let?stop?=?document.querySelector('.stop')
????????let?list?=?document.querySelectorAll('ul>li')
????????let?index?=?0
????????//定義一個(gè)變量接收定時(shí)器
????????let?timer?=?null
????????????start.onclick?=?function?()?{
????????????????//在每次開(kāi)始時(shí)清除定時(shí)器，避免定時(shí)器的多開(kāi)
????????????????clearInterval(timer)
????????????????timer?=?setInterval(()?=>?{
????????????????????for?(let?i?=?0;?i?<?list.length;?i++)?{
????????????????????????//把所有l(wèi)i標(biāo)簽里的元素的背景顏色換成skyblue
????????????????????????list[i].style.backgroundColor?=?'skyblue'
????????????????????}
????????????????????for?(let?j?=?0;?j?<?list.length;?j++)?{
????????????????????????//利用getAttribute獲取上方的roll的字符串在利用number轉(zhuǎn)化為數(shù)字
????????????????????????//因?yàn)榘粹o里面的元素getAttribute的值為8?8除以8余數(shù)為0，
????????????????????????//?所有第一個(gè)元素背景顏色加上grey,隨后直接跳出循環(huán)
????????????????????????if?(Number(list[j].getAttribute('roll'))?==?index?%?8)?{
????????????????????????????list[j].style.backgroundColor?=?'grey'
????????????????????????????break;
????????????????????????}
????????????????????}
????????????????????//每次給初始的index的值加1
????????????????????index++
????????????????},?60);
????????????}
????????stop.onclick?=?function?()?{
????????????//當(dāng)鼠標(biāo)點(diǎn)擊停止時(shí)，直接清除定時(shí)器，從而達(dá)到停止
????????????clearInterval(timer)
????????}
????</script>
</body>
