原生JS实现简易转盘抽奖
我爱撸码，撸码使我感到快乐。
大家好，我是Counter。
本章带大家来简单的了解下原生JS实现转盘抽奖。
因为主要涉及到JS，在这里HTML和CSS起到的功能就没有那么重要，
因此，没有过多的阐述HTML与CSS，而JS基本每行都有注释，但这里CSS
也是起到了至关重要的一步，那就是控制背景色，以及结果的显示与隐藏，效果先给出，如下:
代码给出:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>turntable</title>
/*<link rel="stylesheet" href="css/index.css">*/
<!-- css -->
<style>
body, table, tr, td {
margin: 0;
padding: 0;
}
.wrapper {
position: relative;
width: 300px;
height: 300px;
margin: 100px auto 0;
text-align: center;
}
table {
display: inline-block;
}
td, th {
width: 100px;
height: 100px;
border: 1px solid #ccc;
border-radius: 20px;
}
th {
cursor: pointer;
user-select: none;
}
/* 设置标识样式 */
tr .active {
background-color: #ff6700;
}
/* 设置中奖结果 */
.results {
display: none;
position: absolute;
top: 0;
left: 50px;
width: 200px;
height: 100px;
border: 1px solid black;
border-radius: 30px;
text-align: center;
line-height: 100px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="wrapper">
<table>
<tr>
<td class="active">今</td>
<td>天</td>
<td>吃</td>
</tr>
<tr>
<td>什</td>
<th id="play">开始</th>
<td>么</td>
</tr>
<tr>
<td>来</td>
<td>抽</td>
<td>下</td>
</tr>
</table>
<div class="results">今天吃火锅</div>
</div>
<!-- <script src="js/index.js"></script> -->
<!-- js -->
<script>
// 获取开始元素
var playBtn = document.getElementById('play');
// 获取所有td元素，获取到伪数组
var tdAry = document.getElementsByTagName('td');
// 将伪数组的长度存储在tdLen变量中
var tdLen = tdAry.length;
// 设置计时器变量，刚开始为空
var startTime = null;
// 自己构造数组，使橘红色背景能够按照自己想要的方向进行循环移动
var tdList = [0, 1, 2, 4, 7, 6, 5, 3];
// 设置橘红色背景标识
var tdId = 0;
// 设置已经奔跑的次数，刚开始为0次
var time = 0;
// 固定跑3圈，一圈8次
var fixNum = 24
// 定义最大随机数
var MaxNum;
// 定义随机数，开始和结束的阈值
var randomNum;
// 获取中奖结果元素
var results = document.getElementsByClassName('results')[0]; // 绑定点击事件，当鼠标点击开始按钮后，触发playStart函数
playBtn.onclick = playStart; function playStart() {
// 如果计时器不为空，那就意味着这个线程已经在跑了，就直接退出。
if (startTime != null) {
return;
}
results.style.display = 'none';
// 奔跑的次数
time = 0;
// 最大随机数，取值[0, 8]，确保每个都能被选到
MaxNum = parseInt(Math.random() * 9) + fixNum;
// 随机阈值，控制刚开始跑几步加速，以及剩几步减速，取值范围[3, 7]
randomNum = parseInt(Math.random() * 5 + 3);
// 开启计时器，每200毫秒执行一次move函数
startTime = setInterval(move,200); } function move() {
// 每执行一次奔跑次数time就加1
time++;
// 每次运行当前的背景色清空
tdAry[tdList[tdId]].className = "";
// 每执行一次背景色标识就加1
tdId++;
// 判断如果标识大于7的话就标识tdId就等于0，否则的话就等于它本身，这个步骤如果没有进行判断和赋值的话，tdId就会一直自增下去，那么对应的td元素将没有，后台就会报错
tdId = tdId > 7 ? 0 : tdId;
// 设置当前的td背景色
tdAry[tdList[tdId]].className = "active"; //如果奔跑的次数等于随机阈值的话，那么当前的计时器清空，重新开启一个新的计时器，并且是每20毫秒执行一次，这个步骤是控制加速的
if (time == randomNum) {
clearInterval(startTime);
startTime = setInterval(move,20);
} // 如果奔跑的次数加上随机的阈值的话，那么就将当前的加速的计时器清空，并且重新开启一个每200毫秒的计时器，这个步骤是控制减速的
if (time + randomNum >= MaxNum) {
clearInterval(startTime);
startTime = setInterval(move,200);
} // 如果奔跑的次数大于等于最大的奔跑次数，那么清空当前计时器，并且计时器等于null，直接返回出去，一次抽奖结束。这个步骤是控制抽奖结束。
if (time >= MaxNum) {
clearInterval(startTime);
startTime = null;
// switch语句判断抽奖结果，这部分比较简单，就不赘述了。
switch(tdList[tdId]) {
case 0:
results.innerText = '今天吃转转乐';
results.style.display = 'block';
break;
case 1:
results.innerText = '今天吃蜀九香';
results.style.display = 'block';
break;
case 2:
results.innerText = '今天吃KFC';
results.style.display = 'block';
break;
case 4:
results.innerText = '今天吃海底捞';
results.style.display = 'block';
break;
case 7:
results.innerText = '今天吃外卖';
results.style.display = 'block';
break;
case 6:
results.innerText = '今天吃土';
results.style.display = 'block';
break;
case 5:
results.innerText = '今天吃牛排';
results.style.display = 'block';
break;
case 3:
results.innerText = '今天吃草本汤';
results.style.display = 'block';
break;
}
return;
} } </script>
</body>
</html>
原生JS实现简易转盘抽奖的更多相关文章
- 原生JS实现简易轮播图
原生JS实现简易轮播图(渐变?) 最近做网页总是会用到轮播图,我就把之前写的轮播图单独拿出来吧,如果有...如果真的有人也需要也可以复制去用用啊..哈~.. window.onload = funct ...
- 【Vue.js游戏机实战】- Vue.js实现大转盘抽奖总结
大家好!先上图看看本次案例的整体效果. 实现思路: Vue component实现大转盘组件,可以嵌套到任意要使用的页面. css3 transform控制大转盘抽奖过程的动画效果. 抽奖组件内使用钩 ...
- 简单JS旋转实现转盘抽奖效果
闲来没事,做了一个模拟转盘抽奖的HTML&JS的效果: 可以在设置的时候,选择几个区域,并且可以填写指针将要停止的区域 比如,我选择了"区域2",结果就是这样 具体可以见下 ...
- 利用css+原生js制作简易钟表
利用css+原生js制作简单的钟表.效果如下所示 实现该效果,分三大块:html.javascript.css html部分html部分比较简单,定义一个clock的div,内部有原点.时分秒针.日期 ...
- js实现游戏转盘抽奖
<!DOCTYPE html> <html> <head> <title>js抽奖</title> <meta charset=&qu ...
- js实现大转盘抽奖游戏实例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 原生JS实现简易计算器
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- 原生JS制作简易Tabs组件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 原生JS实现简易随机点名功能
定时器的工作原理,这里将用引用How JavaScript Timers Work中的例子来解释定时器的工作原理,该图为一个简单版的原理图.· 上图中,左侧数字代表时间,单位毫秒:左侧文字代表某一个操 ...
随机推荐
- APK使用APKTOOL命令行进行解包和重新打包
在刚开始安卓逆向时遇到了一个很坑爹的问题,就是对apk进行反编译后不能重新打包, 查了一些资料,这里就简单说一下用apktool进行解包和打包的整个过程. 首先把一个apk和apktool放到同一目录 ...
- linux 系统全盘备份
备份程序对比 - Synchronization and backup programs 之前用的 tar进行备份了,更新 grub引导需要重建目录和手动挂载,不是很方便.现直接使用 timeshif ...
- spring 核心
1 Spring 1.1 专业术语了解 1.1.1 组件/框架设计 侵入式设计 引入了框架,对现有的类的结构有影响:即需要实现或继承某些特定类. 例如: Struts框架 非侵入式设计 引入了 ...
- webservice接口测试wsdl
http和webservice接口测试有什么区别? webservice的基础组成是http+xml 三要素:soap传输协议,uddi,wsdl(webservice描述语言xml格式) 优点:跨平 ...
- HotSpot虚拟机
注:如其中有不懂的名词,下面有名词解释 1.对象的创建(限于普通Java对象,不包括数组和Class对象等) (1)检查这个指令的参数能否在常量池中定位到一个类的符号引用,并检查这个符号引用代表的类是 ...
- day4_局部变量和全局变量
一.介绍: 定义在函数内部的变量拥有一个局部作用域,定义在函数外的拥有全局作用域. 局部变量意思就是在局部生效的,出了这个变量的作用域,这个变量就失效了 全局变量的意思就是在整个程序里面都生效的,在程 ...
- Restsharp常见格式的发送分析
1.传递匿名对象JSON格式 public string Pay(string apisecret, string apikey, string token) { try { string url = ...
- 10大必备的Intellij插件，大幅提高你的工作效率
转自: https://blog.csdn.net/qq1404510094/article/details/80379375 1. .ignore 生成各种ignore文件,一键创建git igno ...
- linux c生成唯一文件名称
linux c生成唯一文件名称可用mktemp()或mkstemp()函数
- Cestos7安装Elasticsearch5.4.3
Elasticsearch及配件下载地址:https://www.elastic.co/cn/downloads 为了简单起见,我们使用tar文件. 在/usl下创建elk目录 一.安装elastic ...