Js 转动抽奖实现
一、样本
地址：http://js.zhuamimi.cn/choujiang/index.htm
源码：https://pan.baidu.com/s/15KhesfcLf1WMOom6PhzCjA
二、实现方法
1：构建环形链表
构建环形链表主要是为了无限循环子节点
环形链表数据结构与算法里面有介绍这里就不做讲解了。
2：控制中奖概率
怎么控制中奖概率，我在前面写个控制随机数生成概率的的函数：https://www.cnblogs.com/whnba/p/10214312.html
3：控制转动速度
这里是通过设置一个 起始速度、结束速度、步涨值，来实现控制的程序结束。
4：实例
<!DOCTYPE html> <head>
<meta charset="utf8">
<title>转动抽奖</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="ChouJiang.js"></script>
</head> <body>
<div class="main">
<ul id="choujiang">
<li class="s s1">1元红包</li>
<li class="s s2">2元红包</li>
<li class="s s3">3元红包</li>
<li class="s s4">4元红包</li>
<li class="s s5">666元红包</li>
<li class="s s6">谢谢光临</li>
<li class="s s7">50元红包</li>
<li class="s s8">8元红包</li>
<li class="s s9">10元红包</li>
<li class="s s10">20元红包</li>
<li class="s s11">谢谢光临</li>
<li class="s s12">200元红包</li>
<li class="s s13">50元红包</li>
<li class="s s14">9999元红包</li>
<li class="s s15">谢谢光临</li>
<li class="s s16">88888元红包</li>
</ul>
<button id="start" onclick="start()">开始抽奖</button>
</div>
<script>
'use strict';
function start() {
let target = new ChouJiang('choujiang', new Map([
[13, 0.0001], // 设置中奖概率： [节点索引,中奖率]
[14, 0.25],
[15, 0.0001],
[10, 0.25],
[5, 0.25],
]));
//target.winning = 4; // 设置中奖节点：用于弊器
target.start(); // 开始
}
</script>
</body> </html>
Js 转动抽奖实现的更多相关文章
- js轮盘抽奖
js轮盘抽奖 需求:实现中奖是否可控 思路:通过旋转角度来实现轮盘转动,根据角度来确定是否中奖 window.onload = function(){ var oTurn = document.get ...
- C#保留2位小数几种场景总结 游标遍历所有数据库循环执行修改数据库的sql命令 原生js轮盘抽奖实例分析（幸运大转盘抽奖） javascript中的typeof和类型判断
C#保留2位小数几种场景总结 场景1: C#保留2位小数,.ToString("f2")确实可以,但是如果这个数字本来就小数点后面三位比如1.253,那么转化之后就会变成1.2 ...
- js转盘抽奖
这个是很简易的转盘,只用了html,css,js 通过css产生一个转盘上的指针,用js动态改变css中的transparent改变指针的角度.再添加一个背景图片类似于奖项的转盘 <!DOCTY ...
- js一个抽奖的例子
朋友公司开年会,帮忙写了个抽奖的demo,源码如下,github中有程序: html: <header> lottery demo </header> <div clas ...
- 原生js轮盘抽奖实例分析（幸运大转盘抽奖）
效果图: 所需图片素材: 这张图是pointer.png的位置的. turntable-bg.jpg这张是转盘背景图,在背景位置. 这张是turntable.png位置的. 需要这三张图片,如果要实现 ...
- js实现抽奖
抽奖.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- js 简单抽奖实现
大家在很多活动页面上都看到绚丽多彩的抽奖运用,网上也有比较多关于这方面的js和用as.今天我在工作的时候也要做个抽奖的运用.我之前没有写过这类的js,也不会as,就得屁颠屁颠的问度娘啦,虽然找到有js ...
- jquery.rotate.js可选抽奖次数和中奖内容的转盘抽奖demo
需求: 最多可以抽奖5次,而且,每次只会中“2000元理财金”或者“谢谢参与”,其它的不会抽中(哈哈,果然都是套路). 效果如下: 一.页面结构: <div class="g-cont ...
- JS数组抽奖程序教学实例
数组Javascript中非常重要的知识点,为了在课堂上提高学生兴趣,教学举例的选择就比较重要了. 为了提高学生兴趣,特设计一个可输入,可控制结束的,利用JS数组实现的抽奖教学实例.代码如下:
随机推荐
- 腾讯技术分享：GIF动图技术详解及手机QQ动态表情压缩技术实践
本文来自腾讯前端开发工程师“ wendygogogo”的技术分享,作者自评:“在Web前端摸爬滚打的码农一枚,对技术充满热情的菜鸟,致力为手Q的建设添砖加瓦.” 1.GIF格式的历史 GIF ( Gr ...
- Python教程：从零到大师
首先, 什么是Python? 用python作者Guido van Rossum自己的话来说,Python是这样的一门语言: "它是一门高级编程语言, 它的核心设计理念是让所有代码变得 ...
- 一篇文章读懂HTTPS及其背后的加密原理
HTTPS(全称: Hypertext Transfer Protocol Secure,超文本传输安全协议),是以安全为目标的HTTP通道,简单讲是HTTP的安全版.本文,就来深入介绍下其原理. 1 ...
- 神经网络架构PYTORCH－宏观分析
基本概念和功能: PyTorch是一个能够提供两种高级功能的python开发包,这两种高级功能分别是: 使用GPU做加速的矢量计算 具有自动重放功能的深度神经网络从细的粒度来分,PyTorch是一个包 ...
- C语言小笔记
头文件的书写 头文件实现函数声明,在使用模板后可以实现一个C文件中即使重复包含某个头文件,在系统中用于只会确认为一个包含 头文件包含可以理解为将头文件内容替换#include“...”行 模板(don ...
- [Objective-C语言教程]数组（14）
Objective-C编程语言提供了一种叫作数组的数据结构,它可以存储相同类型的固定大小顺序元素的集合.数组用于存储数据集合,但将数组视为相同类型的变量集合通常更有用. 可以声明一个数组变量(例如nu ...
- 基于Mono和VSCode打造轻量级跨平台IDE
近期Visual Studio推出Mac版本号的消息迅速在技术圈里刷屏,当project师们最喜欢的笔记本电脑Mac,邂逅地球上最强大的集成开发环境Visual Studio的时候,会碰撞出如何精 ...
- ES6之Promise的基本用法
之前多次看过阮一峰的ES6教程,对Promise也简单的理解过,但是,由于没在项目中运用过,所以记忆的并不深刻,昨天在进行项目的改良,有一个地方需要用到Promise 所以就这样写了: onload函 ...
- 【HDFS API编程】第一个应用程序的开发-创建文件夹
/** * 使用Java API操作HDFS文件系统 * 关键点: * 1)创建 Configuration * 2)获取 FileSystem * 3)...剩下的就是 HDFS API的操作了*/ ...
- 非业务 Oracle SQL 语句备份
1.创建一个将 Oracle 生成的 GUID 格式化为标准的 GUID 的函数 2.在 PLSQL 中测试并输出语句异常的语句块 3.在查询语句中日期的一种特殊表示方法 4.利用 ROWNUM 做分 ...