jQuery自定义数值抽奖活动代码

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

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

以下是 jQuery自定义数值抽奖活动代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta charset="UTF-8">
<title>jQuery自定义数值抽奖活动代码 </title>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="pjs_01.js"></script>
<style type="text/css">
	#bigDiv{
		width: 1080px;;
		margin: 0px auto;/*div网页居中*/
		background-color: #494949;
		color:#FFFFFF
	}
	h1{
		text-align: center;/*文本居中*/
		padding-top: 10px;
	}
	#first,#second,#third{
		width: 360px;
		height: 360px;
		font-size: 150px;
		line-height: 360px;
		text-align: center;
		float: left;/*让三个盒子左浮动*/
	}
	#first{
background-color: #009BFF;
opacity: 0.9;
	}
	#second{
background-color: #007CCC;
	}
	#third{
background-color: #005388;
	}
	input {

		font-size: 30px;
		font-weight: 900;
	}
	#start{
		margin-left: 40%;
		margin-right: 5%;
	}
</style>

</head>
<body>
<div id="bigDiv">
	<h1>玩家幸运抽奖活动</h1>
	<div id="first"></div>
	<div id="second"></div>
	<div id="third"></div>
	<input type="button" value="开始" id="start">
	<input type="button" value="停止" id="stop" disabled="disabled">
</div>
</body>
</html>

JS代码(pjs_01.js):

/** * Created by 午后的阳光 on 2016/5/14. */
var ran=0;
	var range=0;
	var myNumber;
	/*将产生随机数的方法进行封装*/
function sjs(range){
	ran=Math.random()*range;
	//[0,range)的随机数 var result=parseInt(ran);
	//将数字转换成整数 return result;
}
/*对显示随机数的方法进行封装*/
function showRandomNum(){
	var figure=sjs(range);
	$("#first").html(figure);
	var figure2=sjs(range);
	$("#second").html(figure2);
	var figure3=sjs(range);
	$("#third").html(figure3);
}
$(function (){
	/*点击开始按钮,产生的事件*/
 $("#start").click(function (){
	/*将开始标签禁用，停止标签启用*/
 $("#start")[0].disabled=true;
	$("#stop")[0].disabled=false;
	range=prompt("请输入随机数范围：","");
	myNumber=setInterval(showRandomNum,1);
	//多长时间运行一次}
);
	/*点击结束按钮*/
 $("#stop").click(function (){
	/*将开始标签启用，停止标签禁用*/
 $("#start")[0].disabled=false;
	$("#stop")[0].disabled=true;
	clearInterval(myNumber);
}
);
}
);

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