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

一时失言乱红尘 2022-01-16 15:17 307阅读 0赞

<!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" style="width: 200px;height:270px;overflow: hidden;" 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>

转载于:https://blog.51cto.com/10927283/2396341