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 相关文章推荐
JavaScript Event学习第十章 一些可替换的事件对
Feb 10 Javascript
Javascript在IE下设置innerHTML时出现未知的运行时错误的解决方法
Jan 12 Javascript
JQuery实现超链接鼠标提示效果的方法
Jun 10 Javascript
jQuery实现判断滚动条到底部
Jun 23 Javascript
jQuery控制控件文本的长度的操作方法
Dec 05 Javascript
JS实现的自动打字效果示例
Mar 10 Javascript
详解Vue中使用v-for语句抛出错误的解决方案
May 04 Javascript
在react-router4中进行代码拆分的方法(基于webpack)
Mar 08 Javascript
ES6 系列之 WeakMap的使用示例
Aug 06 Javascript
javascript中一些奇葩的日期换算方法总结
Nov 14 Javascript
Vue.js组件间通信方式总结【推荐】
Nov 23 Javascript
15个值得收藏的JavaScript函数
Sep 15 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
使用PHPMYADMIN操作mysql数据库添加新用户和数据库的方法
2010/04/02 PHP
使用Smarty 获取当前日期时间和格式化日期时间的方法详解
2013/06/18 PHP
php递归获取目录内文件(包含子目录)封装类分享
2013/12/25 PHP
分享5个非常有用的Laravel Blade指令
2018/05/30 PHP
ThinkPHP5 的简单搭建和使用详解
2018/11/15 PHP
js 判断checkbox是否选中的实现代码
2010/11/23 Javascript
js页面跳转常用的几种方式
2010/11/25 Javascript
简洁Ajax函数处理(示例代码)
2013/11/15 Javascript
javascript实现数独解法
2015/03/14 Javascript
JavaScript汉诺塔问题解决方法
2015/04/21 Javascript
谈谈对offsetleft兼容性的理解
2015/11/11 Javascript
Bootstrap多级导航栏(级联导航)的实现代码
2016/03/08 Javascript
javascript事件模型介绍
2016/05/31 Javascript
Node.js Sequelize如何实现数据库的读写分离
2016/10/23 Javascript
Bootstrap3下拉菜单的实现
2017/02/22 Javascript
微信小程序实现侧边分类栏
2019/10/21 Javascript
vue中destroyed方法的使用说明
2020/07/21 Javascript
js禁止查看源文件屏蔽Ctrl+u/s、F12、右键等兼容IE火狐chrome
2020/10/01 Javascript
vue 表单输入框不支持focus及blur事件的解决方案
2020/11/17 Vue.js
[00:12]2018DOTA2亚洲邀请赛SOLO赛 MidOne是否中单第一人?
2018/04/05 DOTA
跟老齐学Python之开始真正编程
2014/09/12 Python
python中pygame模块用法实例
2014/10/09 Python
在Python中使用全局日志时需要注意的问题
2015/05/06 Python
Python生成随机密码的方法
2017/06/16 Python
TensorFlow实现RNN循环神经网络
2018/02/28 Python
Python从list类型、range()序列简单认识类(class)【可迭代】
2019/05/31 Python
python库skimage给灰度图像染色的方法示例
2020/04/27 Python
详解Windows下PyCharm安装Numpy包及无法安装问题解决方案
2020/06/18 Python
html5指南-2.如何操作document metadata
2013/01/07 HTML / CSS
英国家居用品和家居装饰品购物网站:Cox & Cox
2019/08/25 全球购物
德国亚洲食品网上商店:asiafoodland.de
2019/12/28 全球购物
xml有哪些解析技术?区别是什么
2016/04/26 面试题
报关专员求职信范文
2014/02/22 职场文书
2015年计算机教师工作总结
2015/07/22 职场文书
2016年度师德标兵先进事迹材料
2016/02/26 职场文书
golang三种设计模式之简单工厂、方法工厂和抽象工厂
2022/04/10 Golang