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数组实现的抽奖教学实例.代码如下:
随机推荐
- GitHubPopular运行记录
运行前准备: Android SDK 23.0.3 2.gradle-2.14.1-all 网盘地址 开始运行 按照项目描述中所说 npm i ------- ok react-native run- ...
- 再谈spring的循环依赖是怎么造成的？
老生常谈,循环依赖!顾名思义嘛,就是你依赖我,我依赖你,然后就造成了循环依赖了!由于A中注入B,B中注入A导致的吗? 看起来没毛病,然而,却没有说清楚问题!甚至会让你觉得你是不清楚spring的循环依 ...
- Apache Lucene全局搜索引擎入门教程
Lucene简介 Lucent:Apache软件基金会Jakarta项目组的一个子项目,Lucene提供了一个简单却强大的应用程式接口,能够做全文索引和搜寻.在Java开发环境里Lucene是一个成熟 ...
- 如何实现一个基于 jupyter 的 microservices
零.背景: 现有基于 Node.js 的项目,但需要整合 Data Science 同事的基于 python(jupyter) 的代码部分,以实现额外的数据分析功能.于是设想实现一个 microser ...
- SpringBoot中集成redis
转载:https://www.cnblogs.com/zeng1994/p/03303c805731afc9aa9c60dbbd32a323.html 不是使用注解而是代码调用 需要在springbo ...
- 数据库占用cpu较高的查询
近来看到别人的有关数据库查询cpu占用较高的sql语句(本人sql并不好),所以查询了一下资料,记录一下,便于理解和应用. 首先,将语句贴在这里 SELECT TOP 10 --平均cpu时间 tot ...
- 微软Cloud+AI本地化社区贡献指南
本文主要介绍微软Cloud+AI本地化社区,以及通过多种途径贡献本地化的操作指南. 什么是本地化社区 Cloud+AI本地化社区是微软技术社区的组成部分之一,负责对微软官方技术文档本地化的支持工作.微 ...
- VC连接MySql
VC连接MySql 一丶MySql 需要了解的知识 VC连接MySql 需要了解几个关键的API: MYSQL * stdcall mysql init (MYSQL *mysql): 初始化一个数 ...
- MFC 控件编程之水平滚动条跟垂直滚动条
MFC 控件编程之水平滚动条跟垂直滚动条 一点水平滚动条的操作 首先在操作滚动条的时候.我们要知道滚动条的一些属性. 比如我们要设置 最大值 最小值. 以及每次递增的值是多少.都要设置. 所有就有一个 ...
- ElasticSearch实战：Linux日志对接Kibana
本文由云+社区发表 ElasticSearch是一个基于Lucene的搜索服务器.它提供了一个分布式多用户能力的全文搜索引擎,基于RESTFul web接口.ElasticSearch是用Java开发 ...