jquery实现抽奖小游戏
在很多网站或游戏活动中我们都会看到有关抽奖的活动或界面;
下面我将给大家介绍下如何通过javascript来实现这样的一个抽奖功能,主要从下面三个步骤入手(文中着重介绍第三部分有关功能的实现):
1.先设置一个简单的抽奖页面,主要元素包括中间的抽奖按钮和周围的奖品区;
2.这个主要是通过CSS和html布局来实现(相对绝对定位就可以实现);
3.抽奖功能的设计,有关jquery.JS实现相关功能。
其中在这里我先简单的介绍下我们这次设计暂时用方块设计(原理一样,相对圆形简单些)抽奖,后续再补上大转盘抽奖的设计,思路都是相似的。
1.2之后的效果如下图所示:

要想让其跑动起来我们应该要考虑下面几个问题:
1.从哪一个地方开始,哪一个模块开始变慢,在哪一个模块进行结束?
2.跑动起来后的速度与圈数是多少?
事故实现这个功能我们要先设定好这些参数:
位置参数:初始(当前)位置index、前一位置prevIndex、结束(变慢)位置EndIndex、中奖位置(号码)random_num
轮圈参数:转到圈位置cycle、结束后总圈数EndCycle
标识与速度参数:结束标识flag,加速参数quick,初始速度speed,时间Time对象,初始化数组对象长度arr。
相关参数设置如下:

参数设计好我们先写一个主函数,在主函数里面调用跑马灯(自己定义的)函数来实现对应的功能:

在里面通过setInterval()函数来调用自定义的star函数,主要是在star函数里面写从哪个地方开始加速,转完多少圈后开始减速,结束转动后并选中对应的号码从而实现跑马灯的功能。


这就是具体的实现代码效果,要是有些不懂或有疑问的欢迎留言,谢谢!!!
jquery实现抽奖小游戏的更多相关文章
- 用jquery实现抽奖小程序
		
用jquery实现抽奖小程序 这些日子,到处都可以看到关于微信小程序的新闻或报到,在博客园中写关于微信小程序的也不少.但是今天我要说的不是微信小程序,而是用简单的jquery写的一个好玩的抽奖小程序. ...
 - HTML5小游戏-简单抽奖小游戏
		
换了新工作以后,专注前端开发,平常空闲时间也比较多,可以多钻研一下技术,写一下博客.最近在学习canvas,参考网上的slotmachine插件,用canvas实现了一个简单抽奖小游戏. ...
 - jQuery实现拼图小游戏
		
小熊维尼拼图 2017-07-23 ...
 - js、jQuery实现2048小游戏
		
2048小游戏 一.游戏简介: 2048是一款休闲益智类的数字叠加小游戏 二. 游戏玩法: 在4*4的16宫格中,您可以选择上.下.左.右四个方向进行操作,数字会按方向移动,相邻的两个数字相同就会合 ...
 - JQuery实现1024小游戏
		
最近用Jqery写了一个1024小游戏,由于是第一次写小游戏,所以就选了一个基础的没什么难度游戏.具体实现如下: 首先在开发时将整个游戏分成两层(自认为),底层是游戏的数据结构以及对数据的操作,上层是 ...
 - jQuery 打气球小游戏 点击气球爆炸效果
		
最近在学习前端,看到偶尔看到前端小游戏,就想自己写一个小游戏,奈何水平有限,只能写打气球这种简单的,所有的气球都是动态生成的,气球的颜色也是随机的 html部分 <div class=" ...
 - 基于jQuery的2048小游戏设计(网页版)
		
上周模仿一个2048小游戏,总结一下自己在编写代码的时候遇到的一些坑. 游戏规则:省略,我想大部分人都玩过,不写了 源码地址:https://github.com/xinhua6/2048game.g ...
 - jQuery之-拼图小游戏
		
在线实例:http://lgy.1zwq.com/puzzleGame/ 源代码思路分析: [一]如何生成图片网格,我想到两种方法: (1)把这张大图切成16张小图,然后用img标签的src (2)只 ...
 - 在HTML页面中有jQuery实现实现拼图小游戏
		
1.用jQuery实现拼图小游戏 2.首先获得td的点击事件.再进行交换位置 3.下面这种仅供参考 4.下面这些是HTMl标签 当这个世界变得越来越复杂的时候,内心最需保持一份简单一份纯真:
 
随机推荐
- Java 中静态方法 实例方法 具体方法区别与联系
			
在查阅JDK文档时,经常会看到某个类的方法汇总,一般会以如下的格式列出来: 这几个标签对应的方法类型分别是什么意思呢? 1. Static Method,静态方法,可以在不创建类实例的情况下,访问 ...
 - tomcat  内存大小配置
			
Tomcat本身不能直接在计算机上运行,需要依赖于硬件基础之上的操作系统和一个java虚拟机.JAVA程序启动时JVM都会分配一个初始内存和最大内存给这个应用程序.这个初始内存和最大内存在一定程度都会 ...
 - javascript Dom  编程
			
 javascript Dom 编程 知识概要: (1)Dom是什么? (2)Dom结构模型 (3)XML DOM和 HTML DOM (4)NODE接口的特性和方法 (5)DOM结点的常用属性 ...
 - Java面向对象 Object类    内部类
			
 Java面向对象 Object类 内部类 知识概要: 一:Object类 二:内部类 匿名内部类的写法 1.Object O ...
 - Kettle文本文件输出和输入控件使用中,换行符导致的问题处理
			
1.如下图通过输入控件从数据库读取数据然后生成TXT文本文件,TXT文件生成原则是每一条数据生成一行数据,第二条数据换行保存 2.如下图所示,使用文本文件输入控件读入上图生成的文件,文件读入原则是按行 ...
 - Elasticsearch分片、副本与路由(shard replica routing)
			
本文讲述,如何理解Elasticsearch的分片.副本和路由策略. 1.预备知识 1)分片(shard) Elasticsearch集群允许系统存储的数据量超过单机容量,实现这一目标引入分片策略sh ...
 - python爬虫爬取代理IP
			
# #author:wuhao # #--*------------*-- #-****#爬取代理IP并保存到Excel----#爬取当日的代理IP并保存到Excel,目标网站xicidaili.co ...
 - Linux下搭建svn服务端
			
安装 使用yum安装非常简单: yum -y install subversion (压缩包安装比这麻烦的多) Tortoise本是window下客户端工具,但也可以建仓库,作为服务端.Linux只有 ...
 - win10 uwp 右击选择 GridViewItem
			
有时候我们需要选择一个 GridView 的一项,通过我们右击. 于是我们需要在 GridView 的 SelectionMode 为 Single ,IsRightTapEnabled 为True ...
 - OpenWRT (RT5350) 使能两个串口
			
OpenWRT(RT5350) 默认使能一个串口(uartlite) ,当做console口了,另外一个串口(uartf)与gpio复用. 在查找资料的过程中,发现在新的内核中使用到了设备树(devi ...