jQuery姓名电话随机抽奖代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery姓名电话随机抽奖代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery姓名电话随机抽奖代码</title>
<link rel="stylesheet" type="text/css" href="style/style.css">
</head>
<body>
<div class="bg">
	<img src="style/bg.jpg">
</div>
<div class="box">
	<div class="jz">
		<p><b>抽奖活动</b></p>
		<span class="name">姓名</span><br />
		<span class="phone">电话</span><br />
		<div class="start" id="btntxt" onclick="start()">开始</div>
	</div>
	<div class="zjmd">
		<p class="p1">中奖者名单</p>
		<div class="list">
		</div>
	</div>
</div>
<script type="text/javascript" src="style/jquery-1.8.0.js.js"></script>
<script type="text/javascript" src="style/cj.js"></script>
</body>
</html>

JS代码(cj.js):

var xinm = new Array();
	xinm[0] = "白金香"xinm[1] = "白应梅"xinm[2] = "柏仁燕"xinm[3] = "包颜琳"xinm[4] = "鲍学梅"xinm[5] = "鲍 颖"xinm[6] = "站长素材"xinm[7] = "蔡 艳"xinm[8] = "蔡 玉"xinm[9] = "曹发敏"var phone = new Array();
	phone[0] = "13800138001"phone[1] = "13800138002"phone[2] = "13800138003"phone[3] = "13800138004"phone[4] = "13800138005"phone[5] = "13800138006"phone[6] = "13800138007"phone[7] = "13800138008"phone[8] = "13800138009"phone[9] = "13800138010"var nametxt = $('.name');
	var phonetxt = $('.phone');
	var pcount = xinm.length-1;
	//参加人数var runing = true;
	var td = 10;
	//内定中奖,从最小奖开始，共10个名额var num = 0;
	var t;
	//开始停止function start(){
	if (runing){
	runing = false;
	$('#btntxt').removeClass('start').addClass('stop');
	$('#btntxt').html('停止');
	startNum()}
else{
	runing = true;
	$('#btntxt').removeClass('stop').addClass('start');
	$('#btntxt').html('开始');
	stop();
	zd();
	//内定中奖}
}
//循环参加名单function startNum(){
	num = Math.floor(Math.random() * pcount);
	nametxt.html(xinm[num]);
	phonetxt.html(phone[num]);
	t = setTimeout(startNum,0);
}
//停止跳动function stop(){
	pcount = xinm.length-1;
	clearInterval(t);
	t = 0;
}
//从一等奖开始指定前3名function zd(){
	if(td <= 3){
	if (td == 1){
	nametxt.html('周一一');
	phonetxt.html('15112345678');
	$('.list').prepend("<p>"+td+' '+"周一一 -- 15112345678</p>");
}
if (td == 2){
	nametxt.html('李二二');
	phonetxt.html('151000000000');
	$('.list').prepend("<p>"+td+' '+"李二二 -- 151000000000</p>");
}
if (td == 3){
	nametxt.html('张三三');
	phonetxt.html('1511111111');
	$('.list').prepend("<p>"+td+' '+"张三三 -- 1511111111</p>");
}
}
else if(td > 3){
	//打印中奖者名单$('.list').prepend("<p>"+td+' '+xinm[num]+" -- "+phone[num]+"</p>");
	if(pcount <= 0){
	alert("投票结束");
}
//将已中奖者从数组中"删除",防止二次中奖xinm.splice($.inArray(xinm[num],xinm),1);
	phone.splice($.inArray(phone[num],phone),1);
}
td = td - 1;
}

CSS代码(style.css):

*{margin:0;padding:0;}
.bg{width:100%;max-width:1920px;height:auto;position:relative;}
.bg img{width:100%;}
.box{width:80%;max-width:1000px;margin:auto;text-align:center;position:absolute;top:25%;left:0;right:0;}
.jz{float:left;width:420px;height:auto;margin:auto;padding-left:200px;}
.jz p{line-height:80px;text-align:center;font-size:50px;color:#ffffff;}
.jz span{display:block;width:420px;height:80px;line-height:80px;margin:20px 0;text-align:left;font-size:60px;background:#ffffff;}
.start,.stop{width:200px;height:80px;line-height:80px;text-align:center;font-size:64px;border-radius:10px;margin:auto;color:#ffffff;cursor:pointer;}
.start{background:#24ADD7;}
.stop{background:#FC6666;}
.zjmd{float:left;width:300px;height:500px;background:#666;margin-top:30px;margin-left:30px;background:#ffffff;overflow:hidden;}
.zjmd .p1{line-height:40px;text-align:center;font-size:20px;padding:0;}
.zjmd p{line-height:30px;text-align:left;text-align:justify;padding-left:30px;}

附件:下载该文件资源,减少时间成本(增值服务)