jQuery随机抽中手机号码抽奖代码
程序员文章站
2022-03-27 09:27:21
...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery随机抽中手机号码抽奖代码</title>
<style type="text/css">
*{
padding: 0;margin:0;
}
html,body{
width: 100%;
height: 100%;
background: -webkit-radial-gradient(#f50607,#800807);
background: -moz-radial-gradient(#f50607,#800807);
background: -o-radial-gradient(#f50607,#800807);
background: radial-gradient(#f50607,#800807);
}
.container{
width: 500px;
padding:100px;
margin:0 auto;
overflow: hidden;
}
.left{width: 250px;float: left;}
.left h2{line-height: 50px;text-align: center;color: #fff;}
.level,.result-box,button{ width: 250px;
height: 40px;}
.level{
border-radius: 4px;
font-size:18px;
}
.result-box{
margin:15px 0;
border-radius: 4px;
background-color:#fff;
text-align:center; line-height:36px; font-size:18px;
}
button{
border:none; color:#fff;font-size:18px;
border-radius: 4px;
cursor: pointer;
}
button:focus{outline:none;}
.start{ background-color:#428bca;}
.end{ background-color:#d9534f;}
.list{width: 200px;
min-height: 250px;
background: #fff;
float: right;
border-radius: 4px;
padding: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="left">
<h2>抽奖活动</h2>
<select class="level">
<option value="3">三等奖</option>
<option value="2">二等奖</option>
<option value="1">一等奖</option>
</select>
<div class="result-box">150****0000</div>
<button class="start" onClick="start()">开始抽奖</button>
</div>
<div class="list"></div>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
var data = [02161606967, 13020266595, 13062886092, 13120856800, 13166203899, 13222286768, 13260155466, 13311859605, 13321953155, 13386035991, 13386279355, 13391041349, 13402005209, 13501955354, 13524377621, 13566884393, 13585583394, 13601652353, 13601750621, 13601957822, 13611717363, 13611808088, 13621842513, 13636608228, 13651744987, 13671548893, 13671715448, 13671743121, 13671938567, 13701612351, 13770050005, 13774415457, 13774468122, 13795220723, 13816648396, 13817074750, 13817603172, 13817864803, 13818156777, 13818478999, 13818608945, 13818676915, 13818708665, 13870620815, 13901647848, 13901757122, 13901765884, 13916054638, 13916130704, 13916230340, 13916320794, 13917046040, 13917082161, 13917376187, 13917519790, 13917822024, 13918015694, 15000239160, 15000858139, 15000863267, 15001966112, 15021654427, 15026688058, 15162775605, 15201931885, 15262790618, 15366970333, 15692116261, 15800762285, 15801777839, 15836932000, 15900711818, 15901868745, 15921081152, 15921913369, 17721460897, 18017628227, 18202119713, 18502746988, 18516214869, 18521502523, 18521531099, 18606387979, 18616988816, 18621373309, 18621607551, 18621768758, 18621831973, 18621939488, 18817373997, 18817619376, 18818010115, 18857881532, 18901731168, 18910877917, 18916172890, 18918588802, 18930362020, 18939786089, 15001963100, 15001963101, 15001963102, 15001963103, 15001963104, 15001963105, 15001963106, 15001963107, 15001963108, 15001963109, 15001963110, 15001963111, 15001963112, 15001963113, 15001963114, 15001963115, 15001963116, 15001963117, 15001963118, 15001963119, 15001963120, 15001963121, 15001963122, 15001963123, 15001963124, 15001963125, 15001963126, 15001963127, 15001963128, 15001963129, 15001963130, 15001963131, 15001963132, 15001963133, 15001963134, 15001963135, 15001963136, 15001963137, 15001963138, 15001963139, 15001963140, 15001963141, 15001963142, 15001963143, 15001963144, 15001963145, 15001963146, 15001963147, 15001963148, 15001963149, 15001963150, 15001963151, 15001963152, 15001963153, 15001963154, 15001963155, 15001963156, 15001963157, 15001963158, 15001963159, 15001963160, 15001963161, 15001963162, 15001963163, 15001963164, 15001963165, 15001963166, 15001963167, 15001963168, 15001963169, 15001963170, 15001963171, 15001963172, 15001963173, 15001963174, 15001963175, 15001963176, 15001963177, 15001963178, 15001963179, 15001963180, 15001963181, 15001963182, 15001963183, 15001963184, 15001963185, 15001963186, 15001963187, 15001963188, 15001963189, 15001963190, 15001963191, 15001963192, 15001963193, 15001963194, 15001963195, 15001963196, 15001963197, 15001963198, 15001963199, 15001963200, 15001963201, 15001963202, 15001963203, 15001963204, 15001963205, 15001963206, 15001963207, 15001963208, 15001963209, 15001963210, 15001963211, 15001963212, 15001963213, 15001963214, 15001963215, 15001963216, 15001963217, 15001963218, 15001963219, 15001963220, 15001963221, 15001963222, 15001963223, 15001963224, 15001963225, 15001963226, 15001963227, 15001963228, 15001963229, 15001963230, 15001963231, 15001963232, 15001963233, 15001963234, 15001963235, 15001963236, 15001963237, 15001963238, 15001963239, 15001963240, 15001963241, 15001963242, 15001963243, 15001963244, 15001963245, 15001963246, 15001963247, 15001963248, 15001963249, 15001963250, 15001963251, 15001963252, 15001963253, 15001963254, 15001963255, 15001963256, 15001963257, 15001963258, 15001963259, 15001963260, 15001963261, 15001963262, 15001963263, 15001963264, 15001963265, 15001963266, 15001963267, 15001963268, 15001963269, 15001963270, 15001963271, 15001963272, 15001963273, 15001963274, 15001963275, 15001963276, 15001963277, 15001963278, 15001963279, 15001963280, 15001963281, 15001963282, 15001963283, 15001963284, 15001963285, 15001963286, 15001963287, 15001963288, 15001963289, 15001963290, 15001963291, 15001963292, 15001963293];//参与人员
//内定中奖人员
var initP = [13870620815, 13901647848, 13901757122];
var p1Num = 3;//一等奖数量
var p2Num = 5;//二等奖数量
var p3Num = 10;//三等奖数量
var p1Winner = new Array();//一等奖中奖者
var p2Winner = new Array();//二等奖中奖者
var p3Winner = new Array();//三等奖中奖者
var btn =true;//按钮状态未开始还是结束
var key =0;//中奖下标
var time=0;//定时器
//点击按钮
function start(){
if(btn){
if((p1Num<=0) && (p2Num<=0) && (p3Num<=0)){
$("button").hide();
alert("所有抽奖已结束");
}else if($('select').val() == 3 && (p3Num<=0)){
alert('三等奖已抽取完毕，请选择其他奖项...');
}else if($('select').val() == 2 && (p2Num<=0)){
alert('二等奖已抽取完毕，请选择其他奖项...');
}else if($('select').val() == 1 && (p1Num<=0)){
alert("一等奖已抽取完毕，请选择其他奖项...");
}else{
btn = false;
$('button').removeClass('start').addClass('end').text("结束抽奖");
startTrun();
}
}else{
btn = true;
$('button').removeClass("end").addClass("start").text("开始抽奖");
endTrun();
console.log(p3Num,p2Num,p1Num);
}
}
function runTime(){
//$("button").show();
clearInterval(time);
time=setInterval('trunNum()',10);
}
function trunNum(){
key=Math.floor(Math.random()*(data.length-1));
var tel=data[key].toString().substr(0, 3)+'****'+data[key].toString().substr(7);
$(".result-box").text(tel);
}
function startTrun(){
runTime();
}
//停止转动数字
function endTrun(){
clearInterval(time);
if($("select").val() == 3){
data.splice(key,1);
p3Winner.push(data[key]);
$(".list").prepend("<p>第"+p3Num+"名："+data[key]+"</p>");
p3Num--;
if(p3Num == 0){
$(".list").prepend("<p>三等奖获得者</p>");
}
}else if($('select').val() == 2){
data.splice(key,1);
p2Winner.push(data[key]);
$(".list").prepend("<p>第"+p2Num+"名："+data[key]+"</p>");
p2Num--;
if(p2Num == 0){
$(".list").prepend("<p>二等奖获得者</p>");
}
}else{
data.splice(key,1);
p1Winner.push(data[key]);
$(".list").prepend("<p>第"+p1Num+"名："+data[key]+"</p>");
p1Num--;
if(p1Num == 0){
$(".list").prepend("<p>一等奖获得者</p>");
}
}
}
</script>
</body>
</html>
上一篇： 指针的后移-第一部分