js手机号批量滚动抽奖实现代码


Posted in Javascript onApril 17, 2020

我们平时在看一些选秀节目或一些歌唱类比赛节目时经常会看到在现场的大屏幕上会有观众的手机号在滚动来选出谁是幸运观众或谁中了什么奖项,这些手机号都是现场观众或场外观众在给选手投票时产生的,当主持人一声开始令下,大屏幕上的手机号就会快速随机滚动,当主持人一声停令下,大屏幕上会随机出现几个停止滚动的手机号,这种手机号批量随机滚动的效果,就是我们今天要实现的效果。注意,在这个效果的实现当中最核心的就是随机和不重复。

下面,我就简单来介绍一下原理:

1、随机,我们要写一个随机数,而且这个随机数不能重复,这个不能重复的随机数说白了就是我们从数据库中取出的手机号的索引;
2、使用定时器不断的产生不重复的随机数,用这些不重复的随机数去绑定手机号并将手机号追加在一个盒子中;
3、去除中奖的手机号(这个前端貌似没法实现,只能后台去控制),当开始抽奖时再次产生不重复的随机数,再次用这些随机数去绑定手机号,直到抽奖结束。

正好我们公司最近年会上有这样的现场抽奖,于是我就做了一个这样的抽奖效果(我们的抽奖号码是用的我们每个人的邀请码,不是手机号,其实原理都一样。),而且可以控制每次中奖的人数,配上后台代码和数据库后效果还不错,接下来就把实现代码

分享出来吧。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="renderer" content="webkit">
<title>互融CLUB</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<style>
*{margin:0;padding:0;}
img{display:block;}
i{font-style:normal;}
.vetically{justify-content:center;align-items:center;display:-webkit-flex;}
.prize_con{position: absolute;width: 100%;height: 100%;background: url(images/firstp_bg.jpg) no-repeat left top / 100% 100%;overflow: hidden;}
.prize_grade{font-size:98px;color: #ffe9af;text-align: center;margin: 160px auto 0;}
.prize_list{width:55%;height:350px;margin: 20px auto 55px;text-align: center;overflow: hidden;}
.prize_list ul{width:100%;font-size:0;}
.prize_list li{display:inline-block;font-size:45px;color:#f1bf90;text-align: center;width:20%;line-height:100px;font-family:Arial;}
.start{width: 250px;height: 90px;margin:0 auto;cursor:pointer;}
.prize_set{position: absolute;right: 60px;bottom: 40px;font-size: 16px;color: #f7f3e8;line-height: 30px;}
.prize_set li{display: inline-block;margin-left: 20px;}
.set_grade select,.set_people input, .set_money input{background: #fff;width:110px;height:36px;border:1px solid #8f0000;margin-left: .1rem;color: #000;padding-left:10px;}
</style>
</head>
<body>
<div class="wrap">
 <div class="prize_con">
 <p class="prize_grade"><span>开始抽奖</span> <i>0</i>元</p>
 <div class="prize_list vetically">
  <ul>
  <li>000000</li>
  <li>000000</li>
  <li>000000</li>
  <li>000000</li>
  <li>000000</li>
  <li>000000</li>
  <li>000000</li>
  <li>000000</li>
  <li>000000</li>
  <li>000000</li> 
  </ul>
 </div>
 <p class="start"><img src="images/prize_start.png" alt=""></p>
 <ul class="prize_set">
  <li class="set_grade">奖等
  <select id="set_grade">
  <option>选择奖等</option>
  <option>特等奖</option>
  <option>一等奖</option>
  <option>二等奖</option>
  <option>三等奖</option>
  </select>
  </li>
  <li class="set_people">人数<input type="tel" placeholder="输入中奖人数" id="prizeCount"></li>
  <li class="set_money">金额<input type="tel" placeholder="输入中奖金额" id="prizeMoney"></li>
 </ul>
 </div>
</div>
<input type="hidden" value="0" id="prize_btn">
<script>
 var ran = 0;
 var myNumber;
 var arr = [];
 var code = [302610,210022,159862,158602,145635,856997,586223,546221,145213,987451,251364,854136,581698,123785,521387,752169,718954,412321,898989,121245,788565,458558,589659,455212,964632,458412,223344,112233,335566,778899];

 /*随机所有的code并且不重复*/
 function showRandomNum(num) {
 var li = "";
 for(var i = 0; i < code.length; i++){
 arr[i] = i;
 }
 arr.sort(function(){
 return 0.5 - Math.random();
 });

 for(var i = 0; i < num; i++){
 var index = arr[i];
 li += '<li>'+code[index]+'</li>';
 }

 $(".prize_list ul").html(li);
 }

 $(function () {
 $(".start").click(function(){
 if($("#prize_btn").val() == 0){ 
 if($("#set_grade").val() == "选择奖等") {
  alert("请选择奖等");
  return;
 }else if($("#prizeCount").val() == "") {
  alert("请输入中奖人数");
  return;
 }else if($("#prizeCount").val() > 10) {
  alert("单次抽奖人数不能超过10人");
  return;
 }else if($("#prizeMoney").val() == "") {
  alert("请输入中奖金额");
  return;
 }else{
  $("#prize_btn").val(1);
  var num = $("#prizeCount").val();
  $(this).find("img").attr("src","images/prize_stop.png");

  myNumber = setInterval(function(){
  showRandomNum(num);
  }, 30);
 } 
 }else{
 $("#prize_btn").val(0);
 clearInterval(myNumber);
 $(this).find("img").attr("src","images/prize_start.png");
 } 
 });

 //回车键控制开始和停止
 $(document).keydown(function (event) {
 var e = event || window.event || arguments.callee.caller.arguments[0];
 if (e && e.keyCode == 13) { // enter 键
  $(".start").click();
 }
 });

 $("#set_grade").change(function(){
 $(".prize_grade span").text($(this).val());
 });

 $("#prizeMoney").keyup(function(){
 $(".prize_grade i").text($(this).val());
 });
}); 
</script>
</body>
</html>

效果图如下:

js手机号批量滚动抽奖实现代码

以下附上源代码:js手机号批量滚动抽奖代码实现

想要学习更多关于抽奖功能的实现,请参考此专题:抽奖功能

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
一个tab标签切换效果代码
Mar 27 Javascript
JavaScript获取FCK编辑器信息的具体方法
Jul 12 Javascript
JavaScript中String.match()方法的使用详解
Jun 06 Javascript
Bootstrap精简教程
Nov 27 Javascript
使用BootStrapValidator完成前端输入验证
Sep 28 Javascript
Bootstrap基本布局实现方法详解
Nov 25 Javascript
学习vue.js表单控件绑定操作
Dec 05 Javascript
浅析Node.js非对称加密方法
Jan 29 Javascript
vue根据进入的路由进行原路返回的方法
Sep 26 Javascript
微信小程序实现两边小中间大的轮播效果的示例代码
Dec 07 Javascript
angular学习之动态创建表单的方法
Dec 07 Javascript
vue图片加载失败时用默认图片替换的方法
Aug 29 Javascript
js图片轮播手动切换特效
Jan 12 #Javascript
原生js实现倒计时功能(多种格式调用)
Jan 12 #Javascript
JavaScript定义全局对象的方法示例
Jan 12 #Javascript
Node.js制作简单聊天室
Jan 12 #Javascript
jQuery 插件实现随机自由弹跳气泡样式
Jan 12 #Javascript
微信小程序学习(4)-系统配置app.json详解
Jan 12 #Javascript
jQuery Validate 数组 全部验证问题
Jan 12 #Javascript
You might like
PHP 获取远程文件大小的3种解决方法
2013/07/11 PHP
php超快高效率统计大文件行数
2015/07/05 PHP
php如何获取文件的扩展名
2015/10/28 PHP
zen_cart实现支付前生成订单的方法
2016/05/06 PHP
PHP+Ajax异步带进度条上传文件实例
2016/11/01 PHP
Laravel实现搜索的时候分页并携带参数
2019/10/15 PHP
js或css实现滚动广告的几种方案
2010/01/28 Javascript
基于jquery的多彩百分比 动态进度条 投票效果显示效果实现代码
2011/08/28 Javascript
jQuery下的动画处理总结
2013/10/10 Javascript
jquery插件lazyload.js延迟加载图片的使用方法
2014/02/19 Javascript
window.location.href IE下跳转失效的解决方法
2014/03/27 Javascript
JavaScript常用脚本汇总(一)
2015/03/04 Javascript
JavaScript对数组进行随机重排的方法
2015/07/22 Javascript
JavaScript使用DeviceOne开发实战(四)仿优酷视频应用
2015/12/02 Javascript
微信小程序自定义组件实现tabs选项卡功能
2018/07/14 Javascript
解决Vue axios post请求,后台获取不到数据的问题方法
2018/08/11 Javascript
微信小程序中显示倒计时代码实例
2019/05/09 Javascript
JS造成内存泄漏的几种情况实例分析
2020/03/02 Javascript
深入浅析ImageMagick命令执行漏洞
2016/10/11 Python
关于Python中浮点数精度处理的技巧总结
2017/08/10 Python
python 使用sys.stdin和fileinput读入标准输入的方法
2018/10/17 Python
python 上下文管理器及自定义原理解析
2019/11/19 Python
在matplotlib中改变figure的布局和大小实例
2020/04/23 Python
Python用Jira库来操作Jira
2020/12/28 Python
美国面料纺织品商城:Fabric.com
2017/06/28 全球购物
英国建筑用品在线:Building Supplies Online(BSO)
2018/04/30 全球购物
大学生找工作推荐信范文
2013/11/28 职场文书
毕业生个人求职信范例分享
2013/12/17 职场文书
转党组织关系介绍信
2014/01/08 职场文书
预备党员政审材料
2014/02/04 职场文书
施工材料员岗位职责
2014/02/12 职场文书
2014年创先争优活动总结
2014/05/04 职场文书
国庆65周年演讲稿:回首往昔,展望未来
2014/09/21 职场文书
全国法制宣传日活动总结
2015/05/05 职场文书
风雨哈佛路观后感
2015/06/03 职场文书
小学班主任研修日志
2015/11/13 职场文书