JS-定时器-节点属性操作-事件绑定-幸运大转盘

幸运大转盘

实现思路

HTML搭建基础框架
CSS设置静态样式
获取按钮及元素节点
给开始按钮绑定事件
每次点击先将开始按钮置为不可用状态，以避免多次点击造成程序混乱
设置定时器，用于每隔一定的时间，执行样式切换，做出移动效果
每次先将当前格子样式清空
在当前格子的位置上+1，“走到”下一个格子
将“下一个”格子的样式，设置为“当前样式”
给结束按钮绑定事件
每次点击先恢复开始按钮为可点击状态，为下次点击做准备
清除定时器，让转盘停止“转动”
将当前格子、计数器、第一个格子恢复为初始状态

效果视频链接 https://live.csdn.net/v/139309

关键步骤

设置路径数组，用于存放转动路径
- li 浮动形成的9宫格布局，利用JS获取的li元素集合时，从上往下的下标如下。
- 为了形成顺时针的转动效果，需要人为设置路径[0, 1, 2, 5, 8, 7, 6, 3]。
设置计数器，用于计数现在走到第几个格子
- 从0开始，步长为1，总长为7，表示走了8个格子（除了中间被按钮占据的格子）。
- 如若总长超过7，则需要将计数器重置为0，以便实现循环转动效果。
- 先用计数器从路径数组中取出下标，再利用获取的下标，获取li集合中对应的元素。

HTML 与 CSS

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>幸运大转盘</title><style>/* 公共样式 */* {padding: 0;margin: 0;}li {list-style: none;}.clear:after {content: '';display: block;clear: both;}/* container 样式 */.container {width: 500px;margin: 0 auto;/* border: 1px solid red; */}.container .luck li {float: left;margin-left: 10px;margin-top: 10px;color: #ffffff;font-size: 18px;/* font-weight: bold; */width: 150px;height: 150px;line-height: 150px;text-align: center;background-color: #50b1f1;}.container .luck li.active {background-color: #1e1e1e;}#btn {background-color: #fff;}#btn button {background-color: #928c8c;border: none;border-radius: 10px;outline: none;color: #ffffff;width: 70px;height: 70px;cursor: pointer;}#btn button.unusable {background-color: #e0e0e0;}</style>
</head><body><div class="container"><ul class="luck clear"><li class="active">华为Mate40</li><li>格力空调</li><li>美的电磁炉</li><li>美的电饭煲</li><li id="btn"><button>开始</button><button>停止</button></li><li>雅阁电动车</li><li>小米平衡车</li><li>电动牙刷</li><li>谢谢参与</li></ul></div>
</body></html>

javascript

// 获取按钮元素
var startBtn = document.querySelectorAll('button')[0];
console.log(startBtn);
var endBtn = document.querySelectorAll('button')[1];
console.log(endBtn);// 设置变量用于接收定时器
var timer;
// 获取转动元素
var lis = document.querySelectorAll('li');
console.log(lis);
// 设置路径数组，用于存放转动路径
var arrPath = [0, 1, 2, 5, 8, 7, 6, 3]
// 设置计数器，用于计数现在走到第几个格子
var num = 0;// 给开始按钮绑定点击事件
startBtn.onclick = function () {// console.log(1);// 每次点击先将按钮置为不可用状态，以避免多次点击造成程序混乱this.disabled = true;// 同时将样式设置为“不可用”样式，提醒用户，当前按钮不可用this.className = 'unusable';// 设置定时器，用于每隔50ms循环转动timer = setInterval(function () {// 每次先将当前格子的样式清空lis[arrPath[num]].className = '';// 判断计数器是否小于7，是则加一，否则说明格子已经走过了，超过8个格子，需要重置为0if (num < 7) {num++;} else {num = 0;}// 将下一个格子的样式修改为“当前”样式lis[arrPath[num]].className = 'active';}, 50);}// 给结束按钮绑定点击事件
endBtn.onclick = function () {// console.log(2);// 点击结束按钮时，先恢复开始按钮为可点击状态，为下次点击做准备startBtn.disabled = false;// 清空开始按钮的“不可用”样式，提醒用户，当前按钮可点击startBtn.className = '';// 清除定时器，让转盘停止转动clearInterval(timer);// 弹框提示用户所获奖品if (lis[arrPath[num]].innerHTML == "谢谢参与") {alert('抱歉，您此次未中奖，继续努力。');} else {alert('恭喜您获得' + lis[arrPath[num]].innerHTML);}// 将当前格子置为初始状态lis[arrPath[num]].className = '';// 将计数器置为初始状态num = 0;// 将第一个格子恢复初始状态lis[arrPath[num]].className = 'active';
}

各状态界面

点击开始按钮前，如下图

点击开始按钮时，如下图

点击结束按钮时，如下图

点击结束按钮后，如下图

JS-定时器-节点属性操作-事件绑定-幸运大转盘相关推荐

C#保留2位小数几种场景总结游标遍历所有数据库循环执行修改数据库的sql命令原生js轮盘抽奖实例分析（幸运大转盘抽奖） javascript中的typeof和类型判断...
C#保留2位小数几种场景总结场景1: C#保留2位小数,.ToString("f2")确实可以,但是如果这个数字本来就小数点后面三位比如1.253,那么转化之后就会变成1.25. ...
vue js 幸运大转盘
vue js 幸运大转盘在写一个 vue 项目时,用到了转盘抽奖,发现网上没有现成的 vue 案例,于是将自己写的分享出来,用作交流使用效果流程页面created时,加载奖品列表,根据和后台预 ...
js框架jquery实现的幸运大转盘抽奖程序代码,兼容多种浏览器(Internet Explorer 6.0+ 、Firefox 2.0 、Safari 3 、Opera 9 、Chrome)
博客目录 js框架jquery实现的幸运大转盘抽奖程序代码实现功能截图系统功能使用技术代码写在最后 js框架jquery实现的幸运大转盘抽奖程序代码本系统实现了一个幸运转盘抽奖,兼容多种浏 ...
js框架jquery实现幸运大转盘抽奖程序代码,兼容多种浏览器
原文:js框架jquery实现幸运大转盘抽奖程序代码,兼容多种浏览器源代码下载地址:http://www.zuidaima.com/share/1779633798073344.htm 看到网页上有 ...
html5简单拖拽实现自动左右贴边+幸运大转盘
此篇文章主要实现两个功能: 1.点击屏幕下方签到悬浮按钮: 2.弹出幸运大转盘,转盘抽奖签到效果如图: 在网上找了很多移动端拖拽的js实现方式,大部分都是这一种,html5的touch事件,但是 ...
《幸运大转盘》代码分享
<幸运大转盘>有一句代码是这样的: self.rotateView.transform = CGAffineTransformMakeRotation(-angle); 它出现在延迟派遣消 ...
设计幸运大转盘h5小游戏总结
幸运大转盘是APP和微信中使用很广泛的一种小游戏,最近由于客户需要推一些新的小游戏,于是我开发了一款幸运大转盘,下面将开发中遇到的问题总结一下,毕竟好记性不如烂笔头.开发中参照了网上找到的例程,有现成 ...
QT 幸运大转盘动画
想要更多项目私wo!!! 一.项目简介幸运大转盘的制作其实很简单,幸运大转盘的整体思想是这样: 1.定时器用来刷新大转盘的界面这样就有动态的旋转效果, 2.监听键盘 ...
基于 SurfaceView 详解 android 幸运大转盘，附带实例app
基于 SurfaceView 详解 android 幸运大转盘,附带实例app 首先说一下,幸运大转盘,以及SurfaceView是在看了也为大神的博客,才有了比较深刻的理解,当然这里附上这位大神的博 ...

JS-定时器-节点属性操作-事件绑定-幸运大转盘

幸运大转盘

HTML 与 CSS

javascript

各状态界面

点击开始按钮前，如下图

点击开始按钮时，如下图

点击结束按钮时，如下图

点击结束按钮后，如下图

JS-定时器-节点属性操作-事件绑定-幸运大转盘相关推荐

最新文章

热门文章