原生js-抽奖系统（简易版）

最新推荐文章于 2024-08-24 17:30:53 发布

轻尘C

最新推荐文章于 2024-08-24 17:30:53 发布

阅读量468

点赞数

文章标签： js javascript css html

本文链接：https://blog.csdn.net/qq_49507936/article/details/107941312

版权

原生js-抽奖系统（简易版）

- 实例地址
- 原文地址

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>原生js实现抽奖系统-简易版</title>
    <style type="text/css">
        .spanbox{
            width: 650px;
            height: 400px;
            margin: 20px auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
        }
        .spanbox span{
            width: 60px;
            height: 60px;
            text-align: center;
            line-height: 60px;
            font-size: 28px;
            border-radius: 50%;
            background-color: #DDDDDD;
        }
        .active{
            background-color: crimson !important;
            color: #fff;
        }
    </style>
</head>
<body>

<div class="spanbox">

</div>

<button type="button" id="action" style="display:block;margin: 10px auto;">开始</button>

<script>
    var spanbox=document.getElementsByClassName("spanbox")[0]

    //创建60个span标签并且添加到 spanbox 中
    for(let i=0;i<60;i++){
        // 创建span标签
        var span = document.createElement('span');
        span.innerText=i+1
        spanbox.appendChild(span)
    }

    //获取到spanbox 中的span标签集，并将第一个span添加active这个类
    var spanbox_span=spanbox.getElementsByTagName("span")
    spanbox_span[0].classList.add("active")

    //获取spanbox 中的span标签个数
    var spanbox_length=spanbox.getElementsByTagName("span").length

    //用来判断定时器是否开启状态
    var keep_num=-1

    //用来记录产生的随机数
    var randomArr=[]

    //指定范围的随机数
    function randomNum(minNum,maxNum){
        //arguments.length 判断传入参数的个数
        switch(arguments.length){
            case 1:
                return parseInt(Math.random()*minNum+1,10);
                break;
            case 2:
                return parseInt(Math.random()*(maxNum-minNum+1)+minNum,10);
                break;
            default:
                return 0;
                break;
        }
    }

    function setT(){
        var random=randomNum(1,spanbox_length)
        randomArr.push(random)

        if(randomArr.length>1)
        {
            for(var i=1;i<randomArr.length;i++){
                //如果随机到的数和前一个数相同，则清除定时器
                if(randomArr[i]==randomArr[i-1]){
                    action.innerHTML="开始"
                    clearInterval(keep)
                    keep_num=-keep_num
                    alert(randomArr[i]+1)
                }
            }
        }



        for(var i=0;i<spanbox_length;i++){
            //全部的span删除active这个类
            spanbox_span[i].classList.remove("active")
        }
        //随机到的span添加active这个类
        spanbox_span[random].classList.add("active")
    }


    //创建定时器
    var keep=setInterval(setT,100)

    //清除定时器
    clearInterval(keep)

    //手动点击开始或者结束
    var action=document.getElementById("action")
    action.onclick=function(){
        //每次点击都清空randomArr
        randomArr=[]

        keep_num=-keep_num

        if(keep_num===1){
            keep=setInterval(setT,100)
            action.innerHTML="结束"
        }
        if(keep_num===-1){
            action.innerHTML="开始"
            clearInterval(keep)
        }
    }
</script>
</body>
</html>