Flex布局模拟王者荣耀皮肤抽奖

实现效果

项目目录结构

index.html

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>模拟王者荣耀皮肤抽奖</title><link rel="stylesheet" href="css/index.css"></head><body><div id="container"><!-- 第一行卡片 --><div class="row"><div class="item current"  id="item1"><img src="img/01.jpg" alt=""></div><div class="item" id="item2"><img src="img/02.jpg" alt=""></div><div class="item" id="item3"><img src="img/03.jpg" alt=""></div><div class="item" id="item4"><img src="img/04.jpg" alt=""></div><div class="item" id="item5"><img src="img/05.jpg" alt=""></div></div><!-- 第二行卡片 --><div class="row"><div class="item" id="item14"><img src="img/14.jpg" alt=""></div><div class="item" id="item6"><img src="img/06.jpg" alt=""></div></div><!-- 第三行卡片 --><div class="row"><div class="item" id="item13"><img src="img/13.jpg" alt=""></div><div class="item" id="item7"><img src="img/07.jpg" alt=""></div></div><!-- 第四行卡片 --><div class="row"><div class="item" id="item12"><img src="img/12.jpg" alt=""></div><div class="item" id="item11"><img src="img/11.jpg" alt=""></div><div class="item" id="item10"><img src="img/10.jpg" alt=""></div><div class="item" id="item9"><img src="img/09.jpg" alt=""></div><div class="item" id="item8"><img src="img/08.jpg" alt=""></div></div><!-- 抽奖按钮 --><div id="btn" onclick="choose()">抽奖</div></div></body><script src="js/index.js" type="text/javascript" charset="utf-8"></script>
</html>

index.css

body{background: url(../img/bg.jpg) no-repeat;background-size: 100% 100%;overflow: hidden;
}#container{width:970px;margin-top: 60px;margin-left: auto;margin-right: auto;position: relative;
}.row{display: flex;justify-content: space-between;height:135px;
}.item{opacity: 0.5;
}.current{opacity: 1;
}
#btn{color:white;font-size: 23px;letter-spacing: 5px;width:200px;text-align: center;line-height: 68px;height: 68px;background: url(../img/btn_bg.jpg);position: absolute;top:50%;left:50%;transform: translate(-50%,-50%);cursor: pointer;
}

index.js

var i = 1;
function choose(){var num = parseInt(Math.random()*14+1)+28;var timer = setInterval(function(){num--;// 随机数在不断减少，减少为0时，抽奖停止if(num==0){clearInterval(timer);}// 开始抽时，所有卡片全为阴暗无选中状态var items = document.getElementsByClassName('item');for (let item of items) {item.classList.remove('current');}// 随机数到哪一张，哪一张显示正常亮度var item = document.getElementById('item'+i);item.classList.add('current');i++;// 14张为一圈，随机数大于14时，开始新一轮回if(i>14){i = 1;}},100);
}

Flex布局模拟王者荣耀皮肤抽奖相关推荐

java 抽奖程序，自定义抽奖概率和奖品，模拟王者荣耀水晶抽奖
一.定义奖品实体类 @Data @Builder public class LuckDrawRules {/*** id*/private Long id;/*** 奖品名称*/private Str ...
王者荣耀鸿蒙抽奖,王者荣耀鸿运抽奖概率一览表
王者荣耀鸿运抽奖概率的熟知有助于小伙伴更好的获取到其中的高级皮肤,降低其中的点券开销,因而受到了不少玩家的关注.那么鸿运抽奖概率是多少呢?在哪里进入呢?一起来看看鸿运抽奖概率的情报吧. 1.抽奖概率 ...
王者荣耀鸿蒙抽奖,王者荣耀鸿运抽奖玩法攻略鸿运抽奖怎么玩
王者荣耀鸿运抽奖玩法攻略,鸿运抽奖怎么玩.王者荣耀4月23日上线了鸿运抽奖的玩法,许多小伙伴还不知道怎么玩,小编今天就来告诉大家鸿运抽奖怎么玩最合适,感兴趣的话就继续往下看吧. A.活动分为初级抽奖和 ...
王者荣耀鸿蒙抽奖,王者荣耀鸿运抽奖奖励有哪些鸿运6+1抽奖概率一览
王者荣耀鸿运抽奖奖励有哪些,鸿运6+1抽奖概率一览.王者荣耀今日上线了一个鸿运抽奖的活动,那么这个活动的玩法是什么呢,有哪些奖励呢,概率是多少,小编帮大家整理了一下,一起来看看吧. 王者荣耀鸿运6+1 ...
如何运用python爬游戏皮肤_Python爬虫实战之爬取王者荣耀皮肤
王者荣耀是目前非常火的一款游戏,相信大家都对其中的人物很感兴趣,那么今天就带大家来爬取王者荣耀的皮肤,可以选一款喜欢的来当电脑壁纸.第一步,拿到url地址第二步,获取各个人物皮肤数据第三步,保存文 ...
python玩王者荣耀皮肤碎片怎么获得_大神教你用Python爬取王者荣耀英雄皮肤，不充钱也能入手！...
前言临下班前,看到群里有人在讨论用王者农药的一些皮肤作为电脑的壁纸,什么高清的,什么像素稍低的,网上查了一手,也有,但像素都不一样,所以,我就想着,自己去官网直接爬他的高清皮肤就好了,然后就有了这边 ...
简单几行代码带你爬取王者荣耀皮肤
爬取王者荣耀皮肤分析思路源代码爬取王者荣耀皮肤分析思路 url:https://pvp.qq.com/web201605/js/herolist.json url还是很容易拼接的源代码 im ...
爬取王者荣耀皮肤-点券领取
1.首先我们要找到所有英雄列表百度"王者荣耀"进入官网,进入https://pvp.qq.com/,按F12进入调试界面,然后按F5刷新界面,图中标识的herolist.json ...
python爬取王者荣耀皮肤高清图
python爬取王者荣耀皮肤高清图前期准备,导入模块 requests json os 进入王者荣耀官网,进入游戏壁纸页面,f12进入开发者模式,按照下图找到这个json文件,用于对图片的数据请求. ...

Flex布局模拟王者荣耀皮肤抽奖

Flex布局模拟王者荣耀皮肤抽奖

实现效果

项目目录结构

index.html

index.css

index.js

Flex布局模拟王者荣耀皮肤抽奖相关推荐

最新文章

热门文章