JavaScript案例之抽奖机

源码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>#fa{width: 600px;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>
</head>
<body><div id="fa"><div class="option">1</div><div class="option">2</div><div class="option">3</div><div class="option">4</div><div id="start">开始抽奖</div><div class="option">5</div><div class="option">6</div><div class="option">7</div><div class="option">8</div></div><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++;// 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){ // 50代表的是 业务要求clearInterval(timer);timer = null;}},100);}}</script>
</body>
</html>

效果图：

JavaScript案例之抽奖机相关推荐

javascript实现水果抽奖机
起因: 公司每个月都要做推广活动,很多推广活动都需要抽奖,但是以前的抽奖的特效太简单,于是美工看到京东的年会抽奖机,我就不得不走向逆向仿制的道路上,经过三天的攻克,终于实现了抽奖效果. 分析: 水果抽 ...
JS写一个图片抽奖机
1 首先把静态页面代码完成 <div class="box"><div class="box01"><div class=&quo ...
利用JavaScript实现随机抽奖代码
利用JavaScript实现随机抽奖代码一.分析: 二.部分重要功能代码: 1.body页面: 2.通过点击事件来显示随机号码: 3.设置中奖号码: 4.判断是否中奖的方法三.全部代码实现: 图片 ...
HTML+JavaScript案例
HTML: 用户注册: <!DOCTYPE html> <html><head><meta charset="utf-8" />&l ...
javascript案例_如何在JavaScript中使用增强现实-一个案例研究
javascript案例 by Apurav Chauhan 通过Apurav Chauhan 如何在JavaScript中使用增强现实-一个案例研究 (How to use Augmented Re ...
盘点三个JavaScript案例——实现限时秒杀、定时跳转、改变盒子大小
前言今天来给大家盘点三个JavaScript案例,分别是实现限时秒杀.定时跳转.改变盒子大小案例,一起来看看吧! 一.实现限时秒杀案例 1.在淘宝网中,商家为了促销经常搞一些活动,例如限时秒杀是常见 ...
我的世界服务器抽奖系统怎么弄,我的世界自动识别货币抽奖机如何制作
我的世界是一款很经典的沙盒类游戏,在游戏中红石和命令方块是这部作品的核心,可以制作很多装备和道具,下面给大家分享下我的世界自动识别货币抽奖机如何制作,希望对大家有所帮助. 自动识别货币抽奖机制作方法 ...
JavaScript案例之电影院电子选票
JavaScript案例之电影院电子选票源码: <!doctype html> <html lang="en"> <head><meta ...
Scratch之制作幸运抽奖机
生活中许多问题的解决需要使用到随机数,比如抽奖,为了公平,必须是随机抽取.Scratch软件的"运算"指令组提供了一个可以产生随机数的指令.本篇文章通过制作"幸运抽奖机& ...

JavaScript案例之抽奖机

JavaScript案例之抽奖机

源码：

效果图：

JavaScript案例之抽奖机相关推荐

最新文章

热门文章