js实现走马灯效果-----大屏幕滚动抽奖

2025-01-18 技术教程

<!DOCTYPE html>
<html>

<head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> var intervalOne = null; window.onload = function() { let arr = [ "@------四等奖---", "@------二等奖---", "@------三等奖---", "@------再来一次---", "@------一等奖---", "@------三等奖---", "@------四等奖---", "@------四等奖---", "@------再来一次---", "@------四等奖---" ]; show(arr); intervalOne = setInterval(function() { scroll(); }, 10); } function show(arr) { for(item in arr) { let inner_div = document.createElement("div"); inner_div.id = "item" + item; inner_div.style.height = "40px"; inner_div.style.backgroundColor = item % 2 == 0 ? "#B9E3FB" : "#FFFFCC"; inner_div.innerText = arr[item]; inner_div.onclick = function() { document.getElementById("show_data").innerText = "中奖情况：" + inner_div.innerText; } let out_div = document.getElementById("out_div"); out_div.appendChild(inner_div); } } function scroll() { let scrollTop = document.getElementById("out_div").scrollTop; document.getElementById("out_div").scrollTop = scrollTop + 10; if(39 <= scrollTop) { let one_inner_div = document.getElementById("out_div").firstChild; document.getElementById("out_div").removeChild(one_inner_div); document.getElementById("out_div").appendChild(one_inner_div); } } function mouseover1() { clearInterval(intervalOne); } function onmouseleave1() { intervalOne = setInterval(function() { scroll(); }, 10); } function click1(flag) { debugger if(flag) { clearInterval(intervalOne); let one_inner_div = document.getElementById("out_div").firstChild; document.getElementById("show_data").innerText = "中奖情况：" + one_inner_div.innerText; } else { intervalOne = setInterval(function() { scroll(); }, 10); } } </script></head><body> <div id="out_div" onmouseover="mouseover1()" onmouseleave="onmouseleave1()"> </div> <input id="stop" type="button" value="***停***" onclick="click1(true)"> </input> <input id="stop" type="button" value="***继续***" onclick="click1(false)"> </input> <div id="show_data"> </div></body>

</html>