html简单易懂的随机抽奖

Html

Css

.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;
}

//请在此段代码前引用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 text(shu, sums, tie, sum, tis) {
    time(shu, sums, tie, sum, tis) //执行time事件
}

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

html简单易懂的随机抽奖



代码描述：html简单易懂的随机抽奖

本段代码所给的概率是相同的，如有需求请自行修改概率算法，如有不懂请提问。

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

破晓天明

相关代码

html简单易懂的随机抽奖

最新