每天一个效果：（14）抽奖器功能

今天我们来做一个抽奖功能，这个功能太常见了。

我们来看一下今天的html和css代码

    <div id="fa"><div class="option">水草文香老师</div><div class="option">北条麻妃老师</div><div class="option">友田真希老师</div><div class="option">吉泽明步老师</div><div id="start">开始抽奖</div><div class="option">大桥为囧老师</div><div class="option">零村埃里老师</div><div class="option">武藤彩香老师</div><div class="option">希岛爱理老师</div></div><style>#fa {width: 600;height: 600px;border: 1px solid red;}#fa>div {width: 33%;height: 33%;border: 1px solid red;float: left;line-height: 200px;text-align: center;font-size: 30px;font-weight: bold;}#start {cursor: pointer;background-color: pink;}</style>

我们来看一下效果

接着我们来梳理一下js的逻辑：

1.点击开始，触发一个定时器

2.定时器内部，随机一个数，通过这个数来获取奖品所在的元素

3.必须设置一个时间点，停止定时器

代码中我也写了详细的注释，让我们来看一下js代码

<script>//逻辑：1.点击开始，触发一个定时器// 2.定时器内部，随机一个数，通过这个数来获取   奖品所在的元素// 3.必须设置一个时间点，停止定时器let but = document.getElementById('start');let options = document.getElementsByClassName('option');let timer = null;but.onclick = function () {//设置一个初始值  作为时间判断let num = 0;//1.触发一个定时器if (timer == null) {timer = setInterval(() => {num++;//1000的时候，1  100//2.随机 0-7 的数字，通过数组下标获取具体选中的元素let ran = Math.round(Math.random() * (7 - 0) + 0);// 3.1 把所有的元素都恢复原来的样式for (let i = 0; i < options.length; i++) {options[i].style.backgroundColor = '#fff';}//3.2给选中的元素  添加样式（背景颜色）options[ran].style.backgroundColor = 'orange'//4.给定时器设置有效时间，停止定时器if (num >= 50) {clearInterval(timer);timer = null;}}, 100)}}</script>

最后我们来看一下效果吧~

今天的效果就看到这里啦，人物名字都是室友告诉我的，嘿嘿~

每天一个效果：（14）抽奖器功能相关推荐

使用C#制作Windows窗体应用，实现一个微端下载器功能（多线程/断点续传/微端/下载器）
文章目录一.前言二.最终运行效果三.Demo工程下载四.工程类型五.工程结构六.多线程下载核心代码一.前言在PC端的QQ游戏大厅下载游戏的时候,我们会发现很多游戏都自己做了微端下载器, ...
用JAVA写一个电话号码滚动抽奖器
这是我用SWING写的第一个程序的改进,也是学JAVA以来的第一个自己动手写的完整的程序.故把它的思路和过程写成一篇博客,以滋纪念和温习先列出需要用到的知识: 1.JFrame和JDialog的相关 ...
抽奖滚动效果 python_Python使用Tkinter实现滚动抽奖器效果
更多python教程请到: 菜鸟教程www.piaodoo.com 人人影视www.sfkyty.com 16影视www.591319.com 星辰影院www.591319.com 年底,抽奖这个话题 ...
Android 实现答题器功能（通过手势实现翻页效果）
Android 实现答题器功能(通过手势实现翻页效果) 1.问题描述 Android答题器的实现主要使用了ViewFilpper和GestureDetector来实现. 2.实现思路把Activit ...
Android 实现答题器功能（通过手势实现翻页效果）...
版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/u010046908/article/details/51305933 Android 实现答题器功能 ...
ppt编写一个抽奖系统_自己动手用PPT做个抽奖器
龙源期刊网 http://www.qikan.com.cn 自己动手用 PPT 做个抽奖器作者:俞木发来源:<电脑爱好者> 2017 年第 21 期喜欢看电视的朋友可能都知道,某电视 ...
稳扎稳打Silverlight(18) - 2.0视频之详解MediaElement, 开发一个简易版的全功能播放器...
[索引页] [×××] 稳扎稳打Silverlight(18) - 2.0视频之详解MediaElement, 开发一个简易版的全功能播放器作者:webabcd 介绍 Silverlight 2.0 ...
PHP+AJAX 投票器功能
终于到AJAX,翻译过来就是"异步Javascript和XML",他可以实现网页内容的部分加载,可提高用户体验.现在有很多网站都有用这技术,反正你知道他能实现网页的异步更新就差不多 ...
如何使用Flutter+SpringBoot+Mysql开发一个简易的抽奖APP（Android)教学
如果你需要项目资源,欢迎来到我的个人博客:https://brath.top/2023/02/24/%E3%80%90Flutter&SpringBoot%E3%80%91%E5%A6%82% ...

每天一个效果：（14）抽奖器功能

每天一个效果：（14）抽奖器功能相关推荐

最新文章

热门文章

每天一个效果 ：（14）抽奖器功能

每天一个效果 ：（14）抽奖器功能相关推荐

最新文章

热门文章

每天一个效果：（14）抽奖器功能

每天一个效果：（14）抽奖器功能相关推荐