《用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

相关文章

SpringBoot3实现Gzip压缩优化的技术指南

《SpringBoot3实现Gzip压缩优化的技术指南》随着Web应用的用户量和数据量增加,网络带宽和页面加载速度逐渐成为瓶颈,为了减少数据传输量,提高用户体验,我们可以使用Gzip压缩HTTP响应,... 目录1、简述2、配置2.1 添加依赖2.2 配置 Gzip 压缩3、服务端应用4、前端应用4.1 N

Java编译生成多个.class文件的原理和作用

《Java编译生成多个.class文件的原理和作用》作为一名经验丰富的开发者,在Java项目中执行编译后,可能会发现一个.java源文件有时会产生多个.class文件,从技术实现层面详细剖析这一现象... 目录一、内部类机制与.class文件生成成员内部类(常规内部类)局部内部类(方法内部类)匿名内部类二、

SpringBoot实现数据库读写分离的3种方法小结

《SpringBoot实现数据库读写分离的3种方法小结》为了提高系统的读写性能和可用性,读写分离是一种经典的数据库架构模式,在SpringBoot应用中,有多种方式可以实现数据库读写分离,本文将介绍三... 目录一、数据库读写分离概述二、方案一:基于AbstractRoutingDataSource实现动态

Python FastAPI+Celery+RabbitMQ实现分布式图片水印处理系统

《PythonFastAPI+Celery+RabbitMQ实现分布式图片水印处理系统》这篇文章主要为大家详细介绍了PythonFastAPI如何结合Celery以及RabbitMQ实现简单的分布式... 实现思路FastAPI 服务器Celery 任务队列RabbitMQ 作为消息代理定时任务处理完整

Springboot @Autowired和@Resource的区别解析

《Springboot@Autowired和@Resource的区别解析》@Resource是JDK提供的注解,只是Spring在实现上提供了这个注解的功能支持,本文给大家介绍Springboot@... 目录【一】定义【1】@Autowired【2】@Resource【二】区别【1】包含的属性不同【2】@

springboot循环依赖问题案例代码及解决办法

《springboot循环依赖问题案例代码及解决办法》在SpringBoot中,如果两个或多个Bean之间存在循环依赖(即BeanA依赖BeanB,而BeanB又依赖BeanA),会导致Spring的... 目录1. 什么是循环依赖?2. 循环依赖的场景案例3. 解决循环依赖的常见方法方法 1:使用 @La

Java枚举类实现Key-Value映射的多种实现方式

《Java枚举类实现Key-Value映射的多种实现方式》在Java开发中,枚举(Enum)是一种特殊的类,本文将详细介绍Java枚举类实现key-value映射的多种方式,有需要的小伙伴可以根据需要... 目录前言一、基础实现方式1.1 为枚举添加属性和构造方法二、http://www.cppcns.co

使用Python实现快速搭建本地HTTP服务器

《使用Python实现快速搭建本地HTTP服务器》:本文主要介绍如何使用Python快速搭建本地HTTP服务器,轻松实现一键HTTP文件共享,同时结合二维码技术,让访问更简单,感兴趣的小伙伴可以了... 目录1. 概述2. 快速搭建 HTTP 文件共享服务2.1 核心思路2.2 代码实现2.3 代码解读3.

Elasticsearch 在 Java 中的使用教程

《Elasticsearch在Java中的使用教程》Elasticsearch是一个分布式搜索和分析引擎,基于ApacheLucene构建,能够实现实时数据的存储、搜索、和分析,它广泛应用于全文... 目录1. Elasticsearch 简介2. 环境准备2.1 安装 Elasticsearch2.2 J

Java中的String.valueOf()和toString()方法区别小结

《Java中的String.valueOf()和toString()方法区别小结》字符串操作是开发者日常编程任务中不可或缺的一部分,转换为字符串是一种常见需求,其中最常见的就是String.value... 目录String.valueOf()方法方法定义方法实现使用示例使用场景toString()方法方法