The code segment starting from a fixed position, can also be used to generate a random number from an arbitrary start position, the trigger request may be determined by the backend data transmission stop time by clicking
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <!-- <link rel="stylesheet" href="./static/aaa.css"> --> <style> *{margin:0px;padding:0px;} ol,li{list-style:none;} .box{width:600px;margin:200px auto;background:peachpuff;} .box li{width:180px;line-height: 50px;font-size:20px;margin:4px 4px;float:left;background:papayawhip;text-align: center;border-radius:20px;color:#fff;} .box li.active{background:paleturquoise;} .box li.start{background:#e6162e;} </style> </head> <body> <div class="box"> <ul> <li class="prize prize-1">奖品一</li> <li class=" Prize Prize-2 " > Prizes two </ Li> <Li class = " Prize Prize-. 3 " > Prizes three </ Li> <Li class = " Prize Prize-. 8 " > Thank you for participating </ Li> <Li class = " start " > start lottery </ Li> <Li class = " prize prize-. 4 " > prizes four </ Li> <Li class = " prize prize-. 7 " > prizes seven </ Li> <Li class = "Prize. 6-Prize " > six prizes </ Li> <Liclass="prize prize-5">奖品五</li> </ul> </div> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript"> $(function () { var speed = 100; var now = 1 var end = 5 $('.start').click(function () { time() change() }) function change() { $('.prize').removeClass('active') $('.prize-' + now).addClass('active') now++; if (now > 9) { now = 1 } else { return false } } var a; function time() { a = setTimeout(function () { change() time() }, speed) setTimeout(function () { if (now == end) { clearTimeout(a) } }, 3000) } }) </script> </body> </html>