在很多网站或游戏活动中我们都会看到有关抽奖的活动或界面;

下面我将给大家介绍下如何通过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实现抽奖小游戏的更多相关文章

  1. 用jquery实现抽奖小程序

    用jquery实现抽奖小程序 这些日子,到处都可以看到关于微信小程序的新闻或报到,在博客园中写关于微信小程序的也不少.但是今天我要说的不是微信小程序,而是用简单的jquery写的一个好玩的抽奖小程序. ...

  2. HTML5小游戏-简单抽奖小游戏

    换了新工作以后,专注前端开发,平常空闲时间也比较多,可以多钻研一下技术,写一下博客.最近在学习canvas,参考网上的slotmachine插件,用canvas实现了一个简单抽奖小游戏.       ...

  3. jQuery实现拼图小游戏

    小熊维尼拼图                                                                                    2017-07-23 ...

  4. js、jQuery实现2048小游戏

    2048小游戏 一.游戏简介:  2048是一款休闲益智类的数字叠加小游戏 二. 游戏玩法: 在4*4的16宫格中,您可以选择上.下.左.右四个方向进行操作,数字会按方向移动,相邻的两个数字相同就会合 ...

  5. JQuery实现1024小游戏

    最近用Jqery写了一个1024小游戏,由于是第一次写小游戏,所以就选了一个基础的没什么难度游戏.具体实现如下: 首先在开发时将整个游戏分成两层(自认为),底层是游戏的数据结构以及对数据的操作,上层是 ...

  6. jQuery 打气球小游戏 点击气球爆炸效果

    最近在学习前端,看到偶尔看到前端小游戏,就想自己写一个小游戏,奈何水平有限,只能写打气球这种简单的,所有的气球都是动态生成的,气球的颜色也是随机的 html部分 <div class=" ...

  7. 基于jQuery的2048小游戏设计(网页版)

    上周模仿一个2048小游戏,总结一下自己在编写代码的时候遇到的一些坑. 游戏规则:省略,我想大部分人都玩过,不写了 源码地址:https://github.com/xinhua6/2048game.g ...

  8. jQuery之-拼图小游戏

    在线实例:http://lgy.1zwq.com/puzzleGame/ 源代码思路分析: [一]如何生成图片网格,我想到两种方法: (1)把这张大图切成16张小图,然后用img标签的src (2)只 ...

  9. 在HTML页面中有jQuery实现实现拼图小游戏

    1.用jQuery实现拼图小游戏 2.首先获得td的点击事件.再进行交换位置 3.下面这种仅供参考 4.下面这些是HTMl标签 当这个世界变得越来越复杂的时候,内心最需保持一份简单一份纯真:

随机推荐

  1. YYHS-Super Big Stupid Cross(二分+扫描线+平衡树)

    题目描述 “我是超级大沙茶”——Mato_No1 为了证明自己是一个超级大沙茶,Mato 神犇决定展示自己对叉(十字型)有多么的了 解. Mato 神犇有一个平面直角坐标系,上面有一些线段,保证这些线 ...

  2. 【转】HTTP Header 详解

    HTTP(HyperTextTransferProtocol)即超文本传输协议,目前网页传输的的通用协议.HTTP协议采用了请求/响应模型,浏览器或其他客户端发出请求,服务器给与响应.就整个网络资源传 ...

  3. zoj 1081 Points Within (判断点是否在多边形内)

    http://blog.csdn.net/zxy_snow/article/details/6339621先保存,搞懂了再来写

  4. PHP多进程编之僵尸进程问题

    上一篇说到了使用pcntl_fork函数可以让PHP实现多进程并发或者异步处理的效果.那么问题是我们产生的进程需要去控制,而不能置之不理.最基本的方式就是fork进程和杀死进程. 通过利用pcntl_ ...

  5. c#字符编码,System.Text.Encoding类,字符编码大全:如Unicode编码、GB18030、UTF-8,UTF-7,GB2312,ASCII,UTF32,Big5

    本页列出来目前window下所有支持的字符编码  ---c#通过 System.Text.Encoding.GetEncodings()获取,里面可以对其进行查询,筛选,对同一个字符,在不同编码进行查 ...

  6. 使用svn与maven管理的项目导入Eclipse,但是与本地svn客户端关联不上?

    因为这个问题,导致我的项目导了删,删了导.现在终于弄明白了. 首先,需求场景是:    1.使用svn进行版本控制;    2.使用maven进行项目管理.    3.使用Tortoise svn将项 ...

  7. [转载]AI教师正来势汹汹,教师饭碗堪优

    (原文标题:开门,机器人老师来了) 一. 开门,机器人老师到了 国庆几天,河南刚刚上演一幕新科技的大戏: 计算机和人展开了为期四天的人机大战.这一次,对垒的双方不再是李世乭和阿尔法狗,而是教师和人工智 ...

  8. win10 uwp 异步进度条

    本文主要讲我设计的几个进度条,还有如何使用异步控制进度条,如何使用动画做进度. 进度条可以参见:http://edi.wang/post/2016/2/25/windows-10-uwp-modal- ...

  9. RT-thread 利用Scons 工具编译提示python编码错误解决办法

    错误信息: scons: Reading SConscript files ...UnicodeDecodeError: 'ascii' codec can't decode byte 0xbd in ...

  10. PHP中如何定义类及其成员属性与操作

    1.类的定义: i. 类的关键字定义使用class 1.定义一个空类 Class Person{}; 2.定义一个有成员属性和操作的类 Class Person{ 成员属性........ 操    ...