jquery实现数字抽奖（版本1）
2015-12-01 14:08
661 查看
实现数字抽奖，首先给用户一个设置抽奖个数和抽奖数字范围的设置页面
STEP1：【HTML+Jquery代码】
此处需要用到jquery实现页面的跳转和参数传递
location.href = "/group/tool/choujiang?num="+num+"&min="+min+"&max="+max;
页面跳转choujiang函数
STEP2：设置页面展示
STEP3：抽奖页面的【HTML+jquery代码】
抽奖页面的【PHP函数：function data() 】
STEP4：抽奖页面的效果预览
STEP1：【HTML+Jquery代码】
此处需要用到jquery实现页面的跳转和参数传递
location.href = "/group/tool/choujiang?num="+num+"&min="+min+"&max="+max;
<!DOCTYPE html>
<span style="font-size:14px;"><html>
<head>
<? $this->load->view('meta'); ?>
<script>
require(["jquery", "bootstrap"], function($) {
$(function() {
$('#save').on('click', function() {
var num=$('input[name="form[num]"]').val();
var min=$('input[name="form[min]"]').val();
var max=$('input[name="form[max]"]').val();
location.href = "/group/tool/choujiang?num="+num+"&min="+min+"&max="+max;//jquery实现页面的跳转和参数传递
});
});
});
</script>
<style>
body{
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
}
.demo{width:800px; margin:60px auto;height:500px;position: relative;padding: 3% 0;}
#roll{padding: 3% 0;}
.h1{font-size:6em; color: #ffb400;margin-bottom: 10px;}
.col-sm-3{ font-size:3.8em; color: #fff;}
.col-sm-12{ font-size:4em; color: #fff; line-height: 2em;}
.huge{font-size:8em; margin-top: 60px;}
#save{color: #fff;font-size:1.5em; }
#stop{display:none;color: red;}
#result{margin-top:20px; line-height:24px; font-size:16px; text-align:center}
.label{color:#fff;}
</style>
</head>
<body background="http://school.guzheng.name/statics/img/choujiang.jpg">
<div class="container-fluid">
<div class="demo">
<h1 class="center h1">新生音乐会现场抽奖</h1>
<div id="roll">
<div class="form-group">
<h1 style="color:#fff">抽奖个数</h1>
<input type="text" class="form-control" name="form[num]" value="1" required>
</div>
<div class="form-group">
<h1 style="color:#fff">起始编号</h1>
<input type="text" class="form-control" name="form[min]" value="1" required>
</div>
<div class="form-group">
<h1 style="color:#fff">截止编号</h1>
<input type="text" class="form-control" name="form[max]" value="1000" required>
</div>
<div class="form-group mt40">
<a href="#" type="button" class="btn btn-warning btn-lg btn-block" id="save" value="确认保存进入抽奖页面"> 确认保存进入抽奖页面</a>
</div>
</div>
</div>
</body>
</html></span>页面跳转choujiang函数
<span style="font-size:14px;">public function choujiang() {
$num=$this->input->get('num')?$this->input->get('num'):1;
$min=$this->input->get('min')?$this->input->get('min'):1;
$max=$this->input->get('max')?$this->input->get('max'):1;
$this->load->view('tool/choujiang',array(
'num'=>$num,
'min'=>$min,
'max'=>$max,
</span>));
}STEP2：设置页面展示
STEP3：抽奖页面的【HTML+jquery代码】
<!DOCTYPE html>
<html>
<head>
<? $this->load->view('meta'); ?>
<script>
count = <? echo $num ?>;
min = <? echo $min ?>;
max = <? echo $max ?>;
require(["jquery", "bootstrap"], function($) {
$(function() {
var _gogo;
var start_btn = $("#start");
var stop_btn = $("#stop");
var json = {};
$('#start').on('click', function() {
$("#hiden").hide();
//此处调用的是一个函数，也可以直接调用php文件，具体方法：略。
$.post('/group/tool/data',{min:min,max:max},function(data) {
if(data){
var obj = eval(data);//将JSON字符串转化为对象
var len = obj.length;
_gogo = setInterval(function(){
var form = 0;//结合json[]避免重复性，已经中奖的数字加上标签1
for(i=1;i<=count;i++){
var num = Math.floor(Math.random()*(len-form))+form;//获取随机数
if(!json[num])
{
json[num]=1;
$("#roll"+i).html(obj[num]['number']);
}
}
},100); //每隔0.1秒执行一次
stop_btn.show();
start_btn.hide();
}else{
$(".roll").html('系统找不到数据源，请先导入数据。');
}
});
});
$('#stop').on('click', function() {
clearInterval(_gogo);
stop_btn.hide();
start_btn.show();
});
});
});
</script>
<style>
body{
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
}
.demo{width:800px; margin:60px auto; text-align:center;height:500px;position: relative;padding: 3% 0;}
#roll{padding: 3% 0;}
.h1{font-size:6em; color: #ffb400;margin-bottom: 10px;}
.col-sm-3{ font-size:3.8em; color: #fff;}
.col-sm-12{ font-size:4em; color: #fff; line-height: 2em;}
.huge{font-size:8em; margin-top: 60px;}
.btn{width:150px; height:55px; line-height:26px;border:1px solid #d3d3d3; cursor:pointer;font-weight: bold;font-size: 2em;}
#start{color: green;}
#stop{display:none;color: red;}
#result{margin-top:20px; line-height:24px; font-size:16px; text-align:center}
</style>
</head>
<body background="http://school.guzheng.name/statics/img/choujiang.jpg">
<div class="container-fluid">
<div class="demo">
<h1 class="center h1">新生音乐会现场抽奖</h1>
<div id="roll">
<span class="col-sm-12 huge" id="hiden">准 备 !</span>
<div class="child">
<?if($num==1):?>
<span class="col-sm-12 huge" id="roll1"></span>
<input type="hidden" id="mid1" value="">
<?elseif($num<=4):?>
<?for($i=1;$i<=$num;$i++):?>
<span class="col-sm-12" id="roll<?echo $i?>"></span>
<input type="hidden" id="mid<?echo $i?>" value="">
<?endfor;?>
<?else:?>
<?for($i=1;$i<=$num;$i++):?>
<span class="col-sm-3" id="roll<?echo $i?>"></span>
<input type="hidden" id="mid<?echo $i?>" value="">
<?endfor;?>
<?endif;?>
</div>
</div>
</div>
<div class="pull-right">
<p class="mt40" style="margin-right:50px;">
<input type="button" class="btn" id="start" value="开 始">
<input type="button" class="btn" id="stop" value="停 止">
</p>
</div>
</div>
</body>
</html>抽奖页面的【PHP函数：function data() 】
<span style="font-size:14px;">public function data() {
$min=$this->input->post('min');
$max=$this->input->post('max');
$arr = array();
for($i=$min;$i<$max;$i++){
$arr[] = array(
'number' =>str_pad($i, 4, 0, STR_PAD_LEFT) ,//控制显示数字固定位四位数
);
}
echo json_encode($arr);
}</span>STEP4：抽奖页面的效果预览
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- js 列表 基于jquery
- jQuery 文档操作 - detach() 方法
- jquery-qrcode生成二维码
- JQuery - 提交表单
- jQuery中的bind(), live(), on(), delegate()
- jQuery Validate扩展验证方法
- jquery mobile用代码弹出dialog
- 快速学习jQuery插件 Form表单插件使用方法
- jquery checkbox change click事件的执行顺序
- jQuery学习笔记之Ajax用法实例详解
- 易操作的jQuery表单提示插件
- 轻松学习jQuery插件EasyUI EasyUI表单验证
- jQuery-1.9.1源码分析系列（十一） DOM操作续——克隆节点
- 把jQuery的类、插件封装成seajs的模块的方法
- 关于jQuery实现CheckBox全选只能生效一次的问题
- jQuery EasyUI使用教程之动态添加标签
- JQuery的html元素捕获、设置、元素添加与删除
- Eclipse引入jquery报错如何解决
- JavaScript图片加载和JQuery图片加载问题
- jquery 加载等待效果