使用js实现幸运大转盘源代码

博的裤兜

3351人浏览 · 2023-08-01 09:24:59

博的裤兜 · 2023-08-01 09:24:59 发布

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>转盘抽奖</title>
    <link type="text/css" rel="stylesheet" href="css/dzp.css" />
</head>
<body>
    <div id="box">
        <div class="yhq zp">[0]600元优惠券</div>
        <div class="yhq zp">[1]800元优惠券</div>
        <div class="yhq zp">[2]1000元优惠券</div>
        <div class="yhq zp">[3]800元优惠券</div>
        <div class="yhq">
            <input type="button" value="开始" id="start" />
            <input type="button" value="停止" id="stop" />
        </div>
        <div class="yhq zp">[4]600元优惠券</div>
        <div class="yhq zp">[5]600元优惠券</div>
        <div class="yhq zp">[6]1000元优惠券</div>
        <div class="yhq zp">[7]800元优惠券</div>
    </div>

    <script type="text/javascript" src="js/dzp.js"></script>
</body>
</html>

css样式:

*{
    margin: 0;
    padding: 0;
}
#box{
    border: 1px black solid;
    height: 500px;
    width: 500px;
    margin: 50px auto;
}
#box .yhq{
    border: 1px silver solid;
    height: 150px;
    line-height: 150px;
    width: 150px;
    float: left;
    margin-left: 11px;
    margin-top: 11px;
    text-align: center;
    font-weight: bold;
    background-color: #87CEEA;
    color: white;
}
#box .yhq input{
    height: 30px;
    width: 50px;
}

js逻辑代码:


/**
 * 页面加载事件
 */
window.onload=function(){
    //开始按钮绑定点击事件
    startBtnFn();
    //停止按钮绑定点击事件
    stopBtnFn();
}

//定时器变量
var dsq;
//定义变量控制当前显示第几个
var num = 0;

/**
 * 开始按钮绑定点击事件
 */
function startBtnFn(){
    document.getElementById("start").onclick=function(){
        
        dsq = window.setInterval(function(){
            //获取八个待转区域   arr[0,1,2,3,4,5,6,7]
            var arr = document.getElementsByClassName("zp");

            //指定旋转顺序下标的数组
            //循环下标   0 1 2 3 4 5 6 7
            var order = [0,1,2,4,7,6,5,3];//旋转的下标
            //遍历数组，实现下标是指定顺序的区域变背景颜色
            for(var i=0; i<arr.length; i++){
                //默认改为蓝色
                arr[i].style.backgroundColor="#87CEEA";
            }
            //设置指定num位置的区域变色
            arr[order[num]].style.backgroundColor="#666666"; 
            
            num++;
            if(num == 8){
                num = 0;
            }  
        },500)
    }
}

/**
 * 停止按钮绑定点击事件
 */
function stopBtnFn(){
    document.getElementById("stop").onclick=function(){
        window.clearInterval(dsq);   
    }
}

2048 AI社区

有“AI”的1024 = 2048，欢迎大家加入2048 AI社区

更多推荐

3个月小白变大神！程序员必备AI学习清单（收藏版）

2048 AI社区

企业级AI编程助手选型实战：从合规到落地的完整指南

整个选型过程花了大概两周的时间，期间遇到了不少问题，比如Google Gemini Code Assist的敏感信息泄露问题，Tabnine的免费版功能不足等，但最终我们选择了TRAE作为公司的AI编程助手。TRAE不仅满足了我们的合规要求，而且功能强大，价格合理，团队适配性也很好。如果你所在的企业也在选型AI编程助手，尤其是对合规要求比较高的国内企业，不妨优先考虑TRAE。@Get。