《用JavaScript实现幸运大转盘抽奖程序》 一

2024-08-27 20:48

本文主要是介绍《用JavaScript实现幸运大转盘抽奖程序》 一,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

    前些日子开发了一个抽奖程序,这个程序百分之九十的逻辑使用JavaScript和JQuery写的,瞬间感觉能JS学到极致,也是一种境界,虽然自己继续向这种境界前进。

    首先说一下这抽奖程序的大体逻辑,首先说怎样让转盘转起来,怎样抽中某个奖品,抽中奖品后怎样转盘停在准确位置。是这样子的,当我们点击抽奖的时候,这时候转盘开始转起来,当转够了足够圈数后,我们就利用Ajax触发一个事件,这个事件就是向后台数据库抽去一个奖品,等奖品抽出来后,将奖品的标识与转盘上的图片的标识以对应,然后实现定位。下面是代码。

    1、初始化抽奖程序

window.onload = function () {loaded();lottery.init('lottery');$("#lottery a").click(function () {if (click) {return false;} else {if (iNow == 0) returnlottery.speed = 100;$("#lottery").find(".lottery-unit-" + lottery.index).removeClass("active");lottery.index = -1;roll();click = true;return false;}});};

    2、定义一个对象,这个对象负责给转盘上各个将品附加特效和初始化转盘的一些参数

var lottery = {index: -1,	//当前转动到哪个位置,起点位置count: 0,	//总共有多少个位置timer: 0,	//setTimeout的ID,用clearTimeout清除speed: 20,	//初始转动速度times: 0,	//转动次数cycle: 50,	//转动基本次数:即至少需要转动多少次再进入抽奖环节prize: -1,	//中奖位置init: function (id) {if ($("#" + id).find(".lottery-unit").length > 0) {$lottery = $("#" + id);$units = $lottery.find(".lottery-unit");this.obj = $lottery;this.count = $units.length;$lottery.find(".lottery-unit-" + this.index).addClass("active");};},roll: function () {var index = this.index;var count = this.count;var lottery = this.obj;$(lottery).find(".lottery-unit-" + index).removeClass("active");if ($(".lottery-unit-" + (index + 1)).find("img").length!=0) {                 index += 1;if (index > count - 1) {index = 0;};$(lottery).find(".lottery-unit-" + index).addClass("active");} else {                   index += 1;if (index > count - 1) {index = 0;};}this.index = index;return false;},stop: function (index) {this.prize = index;return false;}};

    3、最后由下一段代码进行逻辑判断,包括抽奖逻辑,以及定位逻辑。  

function roll() {lottery.times += 1;lottery.roll();if (lottery.times > lottery.cycle + 10 && lottery.prize == lottery.index || $("#lottery img").length==1) {clearTimeout(lottery.timer);if ($("#lottery img").length == 1) {$.ajax({url: "DrawDetail",data: {向后台传递的参数},type: "get",dataType: "json",success: function (data) {console.log(data)console.log(data.CnName)iNow--;$("#countClass").text('您还有' + iNow + "次抽奖机会!");lottery.prize = data.SortNo;//这就是最终抽到的奖品标识},error: function (error) {console.log(error);if (error) {alert("网络超时,请检查您的网络设置!");location.replace(location.href);}}})}setTimeout(function () {                var index1 = lottery.prize;                   $("#alert-div").show(500);			     $("#alert-div img").attr("src", $(".lottery-unit-" + index1).attr("imgSrc"));$("#lottery").find(".lottery-unit-" + index1).html('');$("#lottery").find(".lottery-unit-" + index1).removeClass("active");$("#lottery").find(".lottery-unit-" + index1).removeClass("lottery-unit-" + index1);},600);lottery.times = 0;click = false;} else {if (lottery.times < lottery.cycle) {lottery.speed = 30;} else if (lottery.times == lottery.cycle) {$.ajax({url: "DrawDetail",data: {userId: "f4048590-feec-4c15-990d-2f7693146937",gameId: "FDFCB4C4-0865-4B33-BD31-BACF9B8A7EA7"},type: "get",dataType: "json",success: function (data) {console.log(data)console.log(data.CnName)iNow--;$("#countClass").text('您还有' + iNow + "次抽奖机会!");//获取随机数(奖品个数范围内)// var index = data[0].number;lottery.prize = data.SortNo;},error: function (error) {console.log(error);if (error) {alert("网络超时,请检查您的网络设置!");location.replace(location.href);}}})} else {if (lottery.times > lottery.cycle + 10 && (($("#lottery img").length >= 12) || lottery.prize == lottery.index + 1)) {lottery.speed += 50;} else if(lottery.times > lottery.cycle + 10 && ($("#lottery img").length < 12)){lottery.speed += 10;} }                            lottery.timer = setTimeout(roll, lottery.speed);}return false;}

     当程序启动后,转盘的速度靠着setTimeout()这个函数转动起来,将setTimeout()这个函数封装在转动函数roll()内部,这就实现了递归,使转盘不断转动起来,知道最终确定奖品的位置。


这篇关于《用JavaScript实现幸运大转盘抽奖程序》 一的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1112747

相关文章

HTML5 getUserMedia API网页录音实现指南示例小结

《HTML5getUserMediaAPI网页录音实现指南示例小结》本教程将指导你如何利用这一API,结合WebAudioAPI,实现网页录音功能,从获取音频流到处理和保存录音,整个过程将逐步... 目录1. html5 getUserMedia API简介1.1 API概念与历史1.2 功能与优势1.3

Java实现删除文件中的指定内容

《Java实现删除文件中的指定内容》在日常开发中,经常需要对文本文件进行批量处理,其中,删除文件中指定内容是最常见的需求之一,下面我们就来看看如何使用java实现删除文件中的指定内容吧... 目录1. 项目背景详细介绍2. 项目需求详细介绍2.1 功能需求2.2 非功能需求3. 相关技术详细介绍3.1 Ja

springboot项目中整合高德地图的实践

《springboot项目中整合高德地图的实践》:本文主要介绍springboot项目中整合高德地图的实践,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一:高德开放平台的使用二:创建数据库(我是用的是mysql)三:Springboot所需的依赖(根据你的需求再

spring中的ImportSelector接口示例详解

《spring中的ImportSelector接口示例详解》Spring的ImportSelector接口用于动态选择配置类,实现条件化和模块化配置,关键方法selectImports根据注解信息返回... 目录一、核心作用二、关键方法三、扩展功能四、使用示例五、工作原理六、应用场景七、自定义实现Impor

SpringBoot3应用中集成和使用Spring Retry的实践记录

《SpringBoot3应用中集成和使用SpringRetry的实践记录》SpringRetry为SpringBoot3提供重试机制,支持注解和编程式两种方式,可配置重试策略与监听器,适用于临时性故... 目录1. 简介2. 环境准备3. 使用方式3.1 注解方式 基础使用自定义重试策略失败恢复机制注意事项

使用Python和OpenCV库实现实时颜色识别系统

《使用Python和OpenCV库实现实时颜色识别系统》:本文主要介绍使用Python和OpenCV库实现的实时颜色识别系统,这个系统能够通过摄像头捕捉视频流,并在视频中指定区域内识别主要颜色(红... 目录一、引言二、系统概述三、代码解析1. 导入库2. 颜色识别函数3. 主程序循环四、HSV色彩空间详解

PostgreSQL中MVCC 机制的实现

《PostgreSQL中MVCC机制的实现》本文主要介绍了PostgreSQL中MVCC机制的实现,通过多版本数据存储、快照隔离和事务ID管理实现高并发读写,具有一定的参考价值,感兴趣的可以了解一下... 目录一 MVCC 基本原理python1.1 MVCC 核心概念1.2 与传统锁机制对比二 Postg

SpringBoot整合Flowable实现工作流的详细流程

《SpringBoot整合Flowable实现工作流的详细流程》Flowable是一个使用Java编写的轻量级业务流程引擎,Flowable流程引擎可用于部署BPMN2.0流程定义,创建这些流程定义的... 目录1、流程引擎介绍2、创建项目3、画流程图4、开发接口4.1 Java 类梳理4.2 查看流程图4

一文详解如何在idea中快速搭建一个Spring Boot项目

《一文详解如何在idea中快速搭建一个SpringBoot项目》IntelliJIDEA作为Java开发者的‌首选IDE‌,深度集成SpringBoot支持,可一键生成项目骨架、智能配置依赖,这篇文... 目录前言1、创建项目名称2、勾选需要的依赖3、在setting中检查maven4、编写数据源5、开启热

C++中零拷贝的多种实现方式

《C++中零拷贝的多种实现方式》本文主要介绍了C++中零拷贝的实现示例,旨在在减少数据在内存中的不必要复制,从而提高程序性能、降低内存使用并减少CPU消耗,零拷贝技术通过多种方式实现,下面就来了解一下... 目录一、C++中零拷贝技术的核心概念二、std::string_view 简介三、std::stri