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

相关文章

Spring Boot 整合 SSE的高级实践(Server-Sent Events)

《SpringBoot整合SSE的高级实践(Server-SentEvents)》SSE(Server-SentEvents)是一种基于HTTP协议的单向通信机制,允许服务器向浏览器持续发送实... 目录1、简述2、Spring Boot 中的SSE实现2.1 添加依赖2.2 实现后端接口2.3 配置超时时

Spring Boot读取配置文件的五种方式小结

《SpringBoot读取配置文件的五种方式小结》SpringBoot提供了灵活多样的方式来读取配置文件,这篇文章为大家介绍了5种常见的读取方式,文中的示例代码简洁易懂,大家可以根据自己的需要进... 目录1. 配置文件位置与加载顺序2. 读取配置文件的方式汇总方式一:使用 @Value 注解读取配置方式二

一文详解Java异常处理你都了解哪些知识

《一文详解Java异常处理你都了解哪些知识》:本文主要介绍Java异常处理的相关资料,包括异常的分类、捕获和处理异常的语法、常见的异常类型以及自定义异常的实现,文中通过代码介绍的非常详细,需要的朋... 目录前言一、什么是异常二、异常的分类2.1 受检异常2.2 非受检异常三、异常处理的语法3.1 try-

Java中的@SneakyThrows注解用法详解

《Java中的@SneakyThrows注解用法详解》:本文主要介绍Java中的@SneakyThrows注解用法的相关资料,Lombok的@SneakyThrows注解简化了Java方法中的异常... 目录前言一、@SneakyThrows 简介1.1 什么是 Lombok?二、@SneakyThrows

Java中字符串转时间与时间转字符串的操作详解

《Java中字符串转时间与时间转字符串的操作详解》Java的java.time包提供了强大的日期和时间处理功能,通过DateTimeFormatter可以轻松地在日期时间对象和字符串之间进行转换,下面... 目录一、字符串转时间(一)使用预定义格式(二)自定义格式二、时间转字符串(一)使用预定义格式(二)自

Spring 请求之传递 JSON 数据的操作方法

《Spring请求之传递JSON数据的操作方法》JSON就是一种数据格式,有自己的格式和语法,使用文本表示一个对象或数组的信息,因此JSON本质是字符串,主要负责在不同的语言中数据传递和交换,这... 目录jsON 概念JSON 语法JSON 的语法JSON 的两种结构JSON 字符串和 Java 对象互转

JAVA保证HashMap线程安全的几种方式

《JAVA保证HashMap线程安全的几种方式》HashMap是线程不安全的,这意味着如果多个线程并发地访问和修改同一个HashMap实例,可能会导致数据不一致和其他线程安全问题,本文主要介绍了JAV... 目录1. 使用 Collections.synchronizedMap2. 使用 Concurren

Java Response返回值的最佳处理方案

《JavaResponse返回值的最佳处理方案》在开发Web应用程序时,我们经常需要通过HTTP请求从服务器获取响应数据,这些数据可以是JSON、XML、甚至是文件,本篇文章将详细解析Java中处理... 目录摘要概述核心问题:关键技术点:源码解析示例 1:使用HttpURLConnection获取Resp

python实现svg图片转换为png和gif

《python实现svg图片转换为png和gif》这篇文章主要为大家详细介绍了python如何实现将svg图片格式转换为png和gif,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录python实现svg图片转换为png和gifpython实现图片格式之间的相互转换延展:基于Py

Python利用ElementTree实现快速解析XML文件

《Python利用ElementTree实现快速解析XML文件》ElementTree是Python标准库的一部分,而且是Python标准库中用于解析和操作XML数据的模块,下面小编就来和大家详细讲讲... 目录一、XML文件解析到底有多重要二、ElementTree快速入门1. 加载XML的两种方式2.