html随机抽奖程序

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

大数据架构师Pony

6801人浏览 · 2021-04-14 16:36:20

大数据架构师Pony · 2021-04-14 16:36:20 发布

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>