抽奖程序：根据时间抽奖的前端js程序

原创已于 2022-11-27 20:33:02 修改 · 693 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #web #脚本语言

于 2022-09-23 21:05:23 首次发布

这是一个用于新店开业抽奖的前端HTML页面，用户可以选择指定日期范围，程序将根据用户输入的开始和结束日期，随机生成一个介于8点到21点之间的抽奖时间。页面包含日期选择器和开始/结束抽奖按钮，使用JavaScript进行交互逻辑处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

抽奖程序：根据时间抽奖的前端html静态页+js程序

**使用背景：**新店开业，营业时间为早8点至晚9点，根据用户购买小票结算时间进行抽奖，时间最接近的中奖。
**用户要求：**指定日期范围，进行随机轮动。

<html>

<head>
    <meta charset="utf-8">
    <title>下单时间抽奖程序</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        body {
            background: url('image/bg.jpg') no-repeat;
            background-size: cover;
        }
        
        .container {
            width: 400px;
            height: 200;
            position: fixed;
            top: 80%;
            left: 50%;
            margin: -100px 0 0 -200px;
            text-align: center;
        }
        
        .result-box {
            background-color: #fff;
            text-align: center;
            line-height: 60px;
            font-size: 34px;
        }
        
        button {
            width: 200px;
            height: 50px;
            line-height: 50px;
            margin-top: 30px;
            border: none;
            color: #fff;
            font-size: 24px;
        }
        
        button:focus {
            outline: none;
        }
        
        .start {
            background-color: #428bca;
        }
        
        .end {
            background-color: #d9534f;
        }
    </style>

</head>

<body>
    <form name=form1>
        <select name="M1"></select><!--开始月份-->
        <select name="D1"></select><!--开始日期--> 至
        <select name="M2"></select><!--结束月份-->
        <select name="D2"></select><!--结束日期-->
    </form>
    <div class="container">
        <div class="result-box">
            0000-00-00 00:00:00
        </div>
        <button class="start" onClick="start()">开始抽奖</button>
    </div>
    <script type="text/javascript" src="image/jquery.min.js"></script>
    <script type="text/javascript">
        window.onload = function() {
            var str = "<select name=M1><option>月</option>";
            for (var i = 1; i < 13; i++) {
                str += "<option value=" + i
                if (i == 10) {
                    str += " selected"
                }
                str += "> " + i + "</option>\r\n";
            }
            document.form1.M1.outerHTML = str + "</select>";

            var str = "<select name=D1><option>日</option>";
            for (var i = 1; i < 32; i++) {
                str += "<option value=" + i
                if (i == 1) {
                    str += " selected"
                }
                str += "> " + i + "</option>\r\n";
            }
            document.form1.D1.outerHTML = str + "</select>";
            var str = "<select name=M2><option>月</option>";
            for (var i = 1; i < 13; i++) {
                str += "<option value=" + i
                if (i == 10) {
                    str += " selected"
                }
                str += "> " + i + "</option>\r\n";
            }
            document.form1.M2.outerHTML = str + "</select>";

            var str = "<select name=D2><option>日</option>";
            for (var i = 1; i < 32; i++) {
                str += "<option value=" + i
                if (i == 10) {
                    str += " selected"
                }
                str += "> " + i + "</option>\r\n";
            }
            document.form1.D2.outerHTML = str + "</select>";
        }

        var btn = true;
        var time = 0;


        function runTime() {
            clearInterval(time);
            time = setInterval('trunNum()', 10);
        }

        function start() {
            if (btn) {
                btn = false;
                $("button").removeClass("start").addClass("end").text("结束抽奖");
                startTrun();
            } else {
                btn = true;
                $("button").removeClass("end").addClass("start").text("开始抽奖");
                endTrun();
            }
        }

        function trunNum() {

            var keymo = new Array();
            if (document.form1.M1.value > document.form1.M2.value) {
                alert("结束时间不能在开始时间之前");
                btn = true;
                $("button").removeClass("end").addClass("start").text("开始抽奖");
                endTrun();
                return false;
            }else if (document.form1.M1.value == document.form1.M2.value){
                k = 0;
                if (document.form1.D1.value > document.form1.D2.value) {
                    alert("结束时间不能在开始时间之前");
                    btn = true;                                                        //标记为可用
                    $("button").removeClass("end").addClass("start").text("开始抽奖");//按钮设定
                    endTrun();
                    return false;
                }
                for (i = document.form1.D1.value; i <= document.form1.D2.value; i++) {
                    keymo[k] =fmt(document.form1.M1.value)+"-"+fmt(i);
                    k++;
                }
            } else {
                k = 0;
                if (document.form1.M1.value > document.form1.M2.value) {
                    alert("结束时间不能在开始时间之前");
                    btn = true;
                    $("button").removeClass("end").addClass("start").text("开始抽奖");
                    endTrun();
                    return false;
                }

                for (i = document.form1.D1.value; i <= 31; i++) {
                    keymo[k]=fmt(document.form1.M1.value)+"-"+fmt(i);
                    k++;
                }
                for (i = 1; i <= document.form1.D2.value; i++) {
                    keymo[k]=fmt(document.form1.M2.value)+"-"+fmt(i);
                    k++;
                }

            }

            keym = Math.floor(Math.random() * keymo.length);

            keyho = Math.floor(Math.random() * 13) + 8;    //此为时间为早8点开始，晚9点结束，共13小时
            keyho=fmt(keyho);
            keymi = Math.floor(Math.random() * 60);         //取60分钟的随机
            keymi = fmt(keymi);
            keynu = Math.floor(Math.random() * 60);          //取60秒之随机
            keynu = fmt(keynu);
            key = "2022" + "-" + keymo[keym] + " " + keyho + ":" + keymi + ":" + keynu  //合成日期格式
            var tel = key.toString();
            $(".result-box").text(tel);
        }

        function startTrun() {
            runTime();
        }

        function endTrun() {
            clearInterval(time);
        }

        function fmt(vk){   //标准化日期位数，小于10的，前加0占位，避免显示时抖动
            if (vk<10){
                return ("0"+vk);
            }else{
                return (vk);
            }
            }
    </script>
</body>

</html>