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数组实现的抽奖教学实例.代码如下:
随机推荐
- MapReduce多种join实现实例分析（二）
上一篇<MapReduce多种join实现实例分析(一)>,大家可以点击回顾该篇文章.本文是MapReduce系列第二篇. 一.在Map端进行连接使用场景:一张表十分小.一张表很大.用法: ...
- 老罗最新发布了“子弹短信”这款IM，主打熟人社交能否对标微信？
1.引言 2018年8月20日,锤子科技在北京召开了夏季新品发布会.除了新手机,发布会上还正式推出了主打语音功能的即时通讯IM聊天工具:子弹短信.这款工具此前今年早些时候在「鸟巢」发布会上初次亮相,在 ...
- Android WebView 打印 Console Log
通常状况下,添加如下代码即可: mWebView.setWebViewClient(new WebChromeClient { /*android 低版本 Desperate*/ @ ...
- PHP删除当前目录及其目录下的所有文件
使用PHP遍历一个目录下的所有目录及文件,并删除该目录及其目录下的所有子目录和文件,本次代码通过递归的方式来实现. 用到的函数: scandir($path) 遍历一个目录下所有文件并返回数组. un ...
- Tomcat 的 ManagerApp 简单使用
当启动Tomcat的时候,直接访问http://localhost:8080会直接进入下面页面,原因是Tomcat的默认项目是部署在webapps目录下的ROOT目录下的,这个manager项目就在R ...
- C#遍历文件夹下面所有指定格式文件
C#遍历指定文件夹中的所有文件 DirectoryInfo TheFolder=new DirectoryInfo(folderFullName);//遍历文件夹foreach(DirectoryIn ...
- Group By Grouping Sets
Group by分组函数的自定义,与group by配合使用可更加灵活的对结果集进行分组,Grouping sets会对各个层级进行汇总,然后将各个层级的汇总值union all在一起,但却比单纯的g ...
- Struts2框架(4)---Action类访问servlet
Action类访问servlet Action类有三种方式servlet: (1)间接的方式访问Servlet API ---使用ActionContext对象 (2) 实现接口,访问Action ...
- Redis主从同步原理-PSYNC【转】
Reids复制数据主要有2种场景: 1. 从服务器从来第一次和当前主服务器连接,即初次复制 2. 从服务器断线后重新和之前连接的主服务器恢复连接,即断线后重复制 对于初次复制来说使用SYNC命令进 ...
- ⑤早起的鸟儿有虫吃-JSTL核心标签库[收藏]
介绍 JSTL 全名为Java Server Pages Standard Tag Library(JSP Standard Tag Library),它的中文名称为JSP 标准标签函数库. Web ...