介绍：

　　前端九宫格是一种常见的抽奖方式，js实现如下，掌握其原理，不论多少宫格，都可以轻松应对。（代码可复制直接运行看效果）。

　　该案例以四宫格入门，可扩展多宫格，奖品模块的布局可自由设置。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>四宫格抽奖</title>

</head>

	<style>

		html,body{

			width: 100%;

			height: 100%;

			max-width: 750px;

			margin: auto;

		}

		.outBox{

			width: 100%;

			height: 60%;

			background: gray;

			position: relative;

			display: flex;

			flex-flow: row wrap;

		}

		.prize{

			width: 44%;

			height: 40%;

			margin: 5% 3%;

			text-align: center;

			font-size: xx-large;

			color: #fff;

			padding-top: 15%;

			box-sizing: border-box;

			border: 6px double #AB945E;

		}

		.prize.active{

			background: goldenrod;

		}

		.btn{

			position: absolute;

			left:30%;

			bottom:-20%;

			width: 40%;

			text-align: center;

			height: 12%;

			font-size: xx-large;

		}

	</style>

<body>

	<div class="outBox" id="lotteryBoxs">

		<div class="prize prize-0 one">一等奖</div>

		<div class="prize prize-1 two">二等奖</div>

		<div class="prize prize-3 four">谢谢参与</div>

		<div class="prize prize-2 three">三等奖</div>

		<button class="btn">开启好运</button>

	</div>

</body>

		<script src="http://code.jquery.com/jquery-2.2.4.min.js"></script>

		<script>

					$(document).ready(function() {

					    // 转盘的初定义

					    var lottery = {

					        index: 0, //当前转动到哪个位置，起点位置

					        count: 0, //总共有多少个位置

					        timer: 0, //setTimeout的ID，用clearTimeout清除

					        speed: 10, //初始转动速度

					        times: 0, //转动次数

					        cycle: 30, //转动基本次数：即至少需要转动多少次再进入抽奖环节

					        prize: 0, //中奖位置

					        init: function(id) {

					            if ($("#" + id).find(".prize").length > 0) {

					                $lottery = $("#" + id);

					                $units = $lottery.find(".prize");

					                this.obj = $lottery;

					                this.count = $units.length;

					            }

					        },

					        roll: function() {

					            var index = this.index;

					            var count = this.count;

					            var lottery = this.obj;

					            $(lottery).find(".prize").removeClass("active");

					            index += 1;

					            if (index > count - 1) {

					                index = 0;

					            }

					            $(lottery).find(".prize-" + this.index).addClass("active");

					            this.index = index;

					            return false;

					        },

					        stop: function(index) {

					            this.prize = index;

					            return false;

					        }

					    };

					    // 中奖转动事件

					    function roll() {

					        lottery.times += 1;

					        lottery.roll();

					        var prize_site = $("#lotteryBoxs").attr("prize_site");

					        if (lottery.times > lottery.cycle + 10 && lottery.index == prize_site) {

					            var prize_id = $("#lotteryBoxs").attr("prize_id");

					            var prize_name = $("#lotteryBoxs").attr("prize_name");

								console.log(prize_site+"结果")

					            //中奖情况的判断--模态框

					            if(prize_site == 1 || prize_site == 2 || prize_site == 3){

					                //已中奖

					                setTimeout(function(){

					                    console.log("恭喜你获得" + prize_name)

					                },500)

					            }else{

					                //未中奖

					                setTimeout(function(){

					                    console.log("中奖结果：" + prize_name)

					                },500)

					            }

					            clearTimeout(lottery.timer);

					            lottery.prize = -1;

					            lottery.times = 0;

					            click = false;

					        } else {

					            if (lottery.times < lottery.cycle) {

					                lottery.speed -= 20;

					            } else if (lottery.times == lottery.cycle) {

					                var index = Math.random() * (lottery.count) | 0;

					                lottery.prize = index;

					            } else {

					                if (lottery.times > lottery.cycle + 10 && ((lottery.prize == 0 && lottery.index == lottery.count - 1) || lottery.prize == lottery.index + 1)) {

					                    lottery.speed += 90;

					                } else {

					                    lottery.speed += 30;

					                }

					            }

					            if (lottery.speed < 30) {

					                lottery.speed = 30;

					            }

					            lottery.timer = setTimeout(roll, lottery.speed);

					        }

					        return false;

					    }

					    var click = false;

					    // 后台数据的调用

					    $(function() {

					        lottery.init('lotteryBoxs');

					        $(".btn").click(function() {

					            if (click) {

					                return false;

					            } else {

					                lottery.speed = 100;

					                //此处数据应该从接口获取

					                var prizeArr=["谢谢参与","一等奖","二等奖","三等奖"]

					                var prizeId = Math.floor(Math.random()*(3-0+1)+0);

					                var prize_site = prizeId;

					                console.log("位置"+prizeId);

					                $("#lotteryBoxs").attr("prize_site", prize_site );

					                $("#lotteryBoxs").attr("prize_name", prizeArr[prizeId]);

					                roll();

					                click = true;

					                return false;

					            }

					        });

					    })

					});

		</script>

</html>

　　页面效果如下：

　　

前端js实现九宫格模式抽奖（多宫格抽奖）的更多相关文章

  1. 微信小程序多宫格抽奖

    最近闲来无事,做了一个多宫格抽奖的例子,有什么需要改进或者错误的地方,请留言,谢谢 首先看效果 思路是先让其转动2圈多,然后再进行抽奖,格子运动用的是setTimeout,让其运行的时间间隔不一样,然 ...

  2. 【Vue.js游戏机实战】- Vue.js实现九宫格水果机抽奖游戏总结

    大家好!先上图看看本次案例的整体效果. 完整版实战课程附源码:[Vue.js游戏机实战]- Vue.js实现九宫格水果机抽奖 实现思路: Vue component实现九宫格水果机组件,可以嵌套到任意 ...

  3. php+lottery.js制作九宫格抽奖实例

    php+lottery.js制作九宫格抽奖实例,本抽奖功能效果表现好,定制方便简单,新手学习跟直接拿来用都非常不错,兼容IE.火狐.谷歌等浏览器. 引入抽奖插件lottery.js <scrip ...

  4. 前端Js框架汇总

    概述: 有些日子没有正襟危坐写博客了,互联网飞速发展的时代,技术更新迭代的速度也在加快.看着Java.Js.Swift在各领域心花路放,也是煞是羡慕.寻了寻.net的消息,也是振奋人心,.net co ...

  5. 闲聊——浅谈前端js模块化演变

    function时代 前端这几年发展太快了,我学习的速度都跟不上演变的速度了(门派太多了,后台都是大牛公司支撑类似于facebook的react.google的angular,angular的1.0还 ...

  6. 2015 前端[JS]工程师必知必会

    2015 前端[JS]工程师必知必会 本文摘自:http://zhuanlan.zhihu.com/FrontendMagazine/20002850 ,因为好东东西暂时没看懂,所以暂时保留下来,供以 ...

  7. [ 学习路线 ] 2015 前端(JS)工程师必知必会 (2)

    http://segmentfault.com/a/1190000002678515?utm_source=Weibo&utm_medium=shareLink&utm_campaig ...

  8. 前端js,css文件合并三种方式,bat命令

    前端js,css文件合并三种方式,bat命令 前端js文件该如何合并三个方式如下:1. 一个大文件,所有js合并成一个大文件,所有页面都引用它.2. 各个页面大文件,各自页面合并生成自己所需js的大文 ...

  9. 前端JS模版库kino.razor - 原理流程分析 - 改进版轮子RazorJs

    1.前言 从后台获取数据,在前端JS里面拼接字符串,不累吗?敢不敢找一款前端使使... 现在这种模板库比较多了,我用过的jquery-template .JsRender .听说过的一堆,还有各种MV ...

随机推荐

  1. Spring第二天，你必须知道容器注册组件的几种方式！学废它吊打面试官！

    ​ 前一篇<不要再说不会Spring了!Spring第一天,学会进大厂!>文章可点击下方链接进行回看. 不要再说不会Spring了!Spring第一天,学会进大厂! 今天将继续讲解Spri ...

  2. [web安全原理分析]-SSRF漏洞入门

    SSRF漏洞 SSRF漏洞 SSRF意为服务端请求伪造(Server-Side Request Forge).攻击者利用SSRF漏洞通过服务器发起伪造请求,就这样可以访问内网的数据,进行内网信息探测或 ...

  3. 【Camtasia教学】如何添加光标效果

    随着网络技术的快速发展,手机等移动工具越来越普及,我们的生活也发生了很大的变化,例如我们以前必须去到学校才能学习知识,但是现在躺在床上都可以看国外的教学视频.所以在网上录制教学或者演示视频变得越来越常 ...

  4. 攻克弹唱第七课（如何弹奏neon）

    在本期文章中,笔者将通过Guitar Pro 7来跟大家研究一下neon的曲谱,顺便复习一下之前文章中说过的和弦技巧. 在<如何在指板上寻找特殊和弦(二)>这一期课程中,我们分析过如何使用 ...

  5. 解决Tuxera NTFS for Mac软件安装问题

    在听到小凡的电话说"Tuxera NTFS for Mac软件安装失败,怎么办"的时候,小编心里真像有一万头草泥马在奔腾--苹果软件还能安装失败!? 挥手把一万头草泥马赶走,脑补着 ...

  6. guitar pro系列教程（九）：Guitar Pro音谱“编辑”讲解

    对广大音乐人来说,guitar pro不只是一款看谱软件,更是制谱辅助创作的好搭档 打开guitar pro创作软件的 主界面,你会看到"编辑"的字样,单击一下,会弹出下面的界面, ...

  7. Java线程池一：线程基础

    最近精读Netty源码,读到NioEventLoop部分的时候,发现对Java线程&线程池有些概念还有困惑, 所以深入总结一下 线程创建 Java线程创建主要有三种方式:继承Thread类.实 ...

  8. nameServer路由发现

    RocketMQ路由发现是非实时的,当Topic路由出现变化时,NameServer不主动推动给客户端,而是客户端定时拉取主题最新的路由 总结: topic路由的是brokername

  9. 阿里云云开发平台助力风变科技Serverless架构升级实战

    阿里云云开发平台助力风变科技Serverless架构升级实战 背景 风变科技 一个希望通过技术去推动下一代基础教育的组织.旗下产品包括第一代的熊猫书院(读书类产品).第二代的熊猫小课(泛学科综合学习平 ...

  10. ModelViewSet基础操作

    1 安装DjangoRestFramework pip install djangorestframework==3.11.1 2.在settings.py中注册 INSTALLED_APPS = [ ...