html随机抽奖程序

小灰灰 2022-11-19 04:28 336阅读 0赞

# html随机抽奖程序 #

<!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>html随机抽奖</title>
    <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
    <style>
    .content {
    	width:456px;
    	margin:0 auto;
    	text-align:center;
    	font-weight:800;
    }
    .kuai {
    	width:150px;
    	height:150px;
    	float:left;
    	line-height:150px;
    	border:1px solid #666;
    }
    .button {
    	width:456px;
    	margin:0 auto;
    	text-align:center;
    }
    .choujiang {
    	border:none;
    	color:#fff;
    	background-color:#5cb85c;
    	border-radius:4px;
    	font-size:20px;
    	color:#fff;
    	padding:5px 20px;
    	margin-top:20px;
    	cursor:pointer;
    }
    .choujiang:hover {
    	background-color:red;
    }
    </style>
    </head>
    <body>
    <div class="content">
    
    </div>
    <div class="button">
        <button type="button" class="choujiang">抽奖</button>
    </div>
    
    <script>
    //请在此段代码前引用jq,否则代码无效
    $(document).ready(function() {
        var name = ['飞机', '大炮', '火箭', '游艇', '电脑', '键盘', '鼠标', '谢谢参与', '三年模拟两年高考']
        for (var i = 1; i <= name.length; i++) {
            $(".content").append('<div id="' + i + '" class="kuai">' + name[i - 1] + '</div>');
        }
        $('.choujiang').on('click', function() {
            $(this).attr("disabled", true); //点击按钮后,按钮进入不可编辑状态
            var sum = name.length;
            var le = 3 //设置滚动多轮
            var hh = sum * le;
            var y = 1;
            var x = hh;
            var times = 12; //调节滚动速度
            var rand = parseInt(Math.random() * (x - y + 1) + y); //获取随机数
            var i = Math.ceil(rand / sum); //向上取整
            for (var i = i; i < le; i++) {
                rand = rand + sum
            }
            time(1, rand, times, sum, times) //点击按钮后触发time事件
        })
    });
    
    function time(shu, sums, tie, sum, tis) { //倒计时
        var tie = tie + tis //滚动速度
        setTimeout(function() {
            if (shu <= sums) {
                $('.kuai').css({
                    'background-color': '',
                    'color': ''
                }) //清除css
                $('#' + shu + '').css({
                    'background-color': 'aqua',
                    'color': '#fff'
                }) //添加css样式
                if (shu == sum) {
                    sums = sums - shu
                    shu = 0;
                }
                shu++
                text(shu, sums, tie, sum, tis)
            } else {
                $('.choujiang').attr("disabled", false); //抽奖完毕,按钮重新进入可编辑状态
            }
        }, tie);
    }
    
    function text(shu, sums, tie, sum, tis) {
        time(shu, sums, tie, sum, tis) //执行time事件
    }
    </script>
    
    </body>
    </html>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTExMTAzMDE_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTExMTAzMDE_size_16_color_FFFFFF_t_70]: /images/20221022/6c89670578ff48c48b7e0e5aa4deafa3.png