<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./assets/global.css">
<style>
.prize-container {
position: relative;
}
.prize-container .prize-item,
.prize-container .prize-turn {
position: absolute;
/* background-color: rgb(22, 185, 235); */
width: 200px;
height: 200px;
display: flex;
align-items: center;
justify-content: center;
user-select: none;
box-sizing: border-box;
}
.prize-container .prize-turn {
background-color: #fff;
cursor: pointer;
border-radius: 50%;
border: 1px solid rgb(209, 92, 92);
font-size: 30px;
transform: scale(.5, .5);
color: rgb(209, 92, 92);
transition: all .4s ease-in;
}
.prize-container .prize-item {
border: 4px solid transparent;
}
.prize-container .prize-item img {
width: 100%;
height: 100%;
object-fit: cover;
opacity: .9;
}
.prize-container .prize-item>div {
position: absolute;
width: 100%;
text-align: center;
left: 0;
font-weight: bold;
color: beige;
line-height: 30px;
bottom: 0;
background-color: rgba(0, 0, 0, .3);
}
.prize-container .prize-turn:active {
background-color: rgb(209, 92, 92);
color: #fff;
}
.prize-container .prize-item.active {
border-color: #eb9c26;
}
</style>
</head>
<body>
<div class="prize-container">
<div class="prize-item" style="left: 0;top: 0;"></div>
<div class="prize-item" style="left: 200px;top: 0;"></div>
<div class="prize-item" style="left: 400px;top: 0;"></div>
<div class="prize-item" style="left: 400px;top: 200px;"></div>
<div class="prize-item" style="left: 400px;top: 400px;"></div>
<div class="prize-item" style="left: 200px;top: 400px;"></div>
<div class="prize-item" style="left: 0;top: 400px;"></div>
<div class="prize-item" style="left: 0;top: 200px;"></div>
<div class="prize-turn" style="left: 200px;top: 200px;">开始转动</div>
</div>
<script type="module">
import { Maths, Randoms, Animation } from "https://unpkg.com/@3r/tool"
// 获取所有的
let prizeDomList = document.querySelectorAll('.prize-item')
let prizeTurnDom = document.querySelector('.prize-turn')
let startIndex = 0;
let prizes = [
{
name: '苹果13',
weight: 1,
imgSrc: './assets/prizes/1.jpg'
},
{
name: '兰博基尼5元优惠券',
weight: 1000,
imgSrc: './assets/prizes/2.jpg'
},
{
name: '香港一日游满5000-5券',
weight: 200,
imgSrc: './assets/prizes/3.jpg'
},
{
name: '王者荣耀绝美皮肤一套',
weight: 200,
imgSrc: './assets/prizes/4.jpg'
},
{
name: '鼠标垫',
weight: 200,
imgSrc: './assets/prizes/5.webp'
},
{
name: '再来一次',
weight: 100,
imgSrc: './assets/prizes/6.gif'
},
{
name: '吹风机',
weight: 20,
imgSrc: './assets/prizes/7.webp'
},
{
name: '扫地机器人',
weight: 10,
imgSrc: './assets/prizes/8.webp'
},
]
// 展示效果
for (let i = 0; i < prizeDomList.length; i++) {
const prizeItem = prizeDomList[i];
const prizeText = document.createElement('div')
const prizeImage = document.createElement('img')
prizeText.textContent = prizes[i].name
prizeImage.setAttribute("src", prizes[i].imgSrc)
prizeItem.appendChild(prizeImage)
prizeItem.appendChild(prizeText)
}
// 等待时间
let waitTime = function (time) {
return {
then: function (resolve) {
setTimeout(resolve, time)
}
}
}
// 转动
let turn = async function () {
let offset = 1 / (prizes.length * 10) // 执行次数
let interval = 200; // 延迟
let minInterval = 50; // 最小延迟
let endIndex = Randoms.getRandomIndexByWeight(prizes) // 随机结束奖品
let lastDom = null
for (let i = 0; i <= 1; i += offset) {
// 延迟时间
await waitTime(Math.max(Animation.easeIn(i) * interval, minInterval))
lastDom?.classList?.remove('active');
lastDom = prizeDomList.item(startIndex % prizeDomList.length)
lastDom.classList.add('active')
if (i > .9 && (startIndex % prizeDomList.length === endIndex)) break;
startIndex++;
}
let name = prizes[endIndex].name
setTimeout(() => {
if (name == "再来一次")
alert(`请${name}吧~`)
else
alert(`您获得了${name}`)
}, interval);
}
prizeTurnDom.addEventListener("click", turn)
</script>
</body>
</html>
HTML 工具：网页版抽奖工具
版权申诉
163 浏览量
2024-01-05
04:40:32
上传
评论
收藏 15.7MB ZIP 举报
HTML 工具：网页版抽奖工具 （2000个子文件） 
index.css 234KB all.css 72KB fontawesome.css 70KB all.min.css 58KB fontawesome.min.css 57KB video-js.css 44KB v4-shims.css 40KB v4-shims.min.css 26KB svg-with-js.css 8KB svg-with-js.min.css 6KB nord.min.css 3KB grayscale.min.css 2KB papercolor-dark.min.css 1KB snazzy.min.css 1KB papercolor-light.min.css 1KB dracula.min.css 1KB rebecca.min.css 1KB gruvbox-light-medium.min.css 1KB gruvbox-dark-medium.min.css 1KB circus.min.css 1KB gruvbox-light-hard.min.css 1KB gruvbox-light-soft.min.css 1KB gruvbox-dark-hard.min.css 1KB gruvbox-dark-soft.min.css 1KB gruvbox-dark-pale.min.css 1KB synth-midnight-terminal-light.min.css 1KB nova.min.css 1KB synth-midnight-terminal-dark.min.css 1KB spacemacs.min.css 1KB espresso.min.css 1KB atelier-sulphurpool-light.min.css 1KB night-owl.min.css 1KB atelier-lakeside-light.min.css 1KB oceanicnext.min.css 1KB atelier-savanna-light.min.css 1KB atelier-seaside-light.min.css 1KB atelier-plateau-light.min.css 1KB atelier-estuary-light.min.css 1KB outrun-dark.min.css 1KB atelier-forest-light.min.css 1KB atelier-sulphurpool.min.css 1KB atelier-dune-light.min.css 1KB horizon-light.min.css 1KB atelier-cave-light.min.css 1KB windows-95-light.min.css 1KB horizon-dark.min.css 1KB harmonic16-light.min.css 1KB solar-flare-light.min.css 1KB nnfx-light.min.css 1KB atelier-heath-light.min.css 1KB harmonic16-dark.min.css 1KB grayscale-light.min.css 1KB brush-trees-dark.min.css 1KB solarized-light.min.css 1KB atelier-lakeside.min.css 1KB dark-violet.min.css 1KB nnfx-dark.min.css 1KB atelier-estuary.min.css 1KB atelier-plateau.min.css 1KB grayscale-dark.min.css 1KB windows-10-light.min.css 1KB solarized-dark.min.css 1KB atelier-savanna.min.css 1KB atelier-seaside.min.css 1KB silk-light.min.css 1KB one-light.min.css 1KB atelier-forest.min.css 1KB porple.min.css 1KB windows-high-contrast-light.min.css 1KB windows-high-contrast.min.css 1KB tender.min.css 1KB summerfruit-dark.min.css 1KB xcode-dusk.min.css 1KB silk-dark.min.css 1KB atelier-cave.min.css 1KB danqing.min.css 1KB atelier-dune.min.css 1KB marrakesh.min.css 1KB solar-flare.min.css 1KB brush-trees.min.css 1KB brogrammer.min.css 1KB atelier-heath.min.css 1KB nebula.min.css 1KB darkmoss.min.css 1KB pasque.min.css 1KB darktooth.min.css 1KB default-light.min.css 1KB default-dark.min.css 1KB windows-95.min.css 1KB summerfruit-light.min.css 1KB brewer.min.css 1KB gigavolt.min.css 1KB onedark.min.css 1KB apathy.min.css 1KB embers.min.css 1KB ir-black.min.css 1KB ashes.min.css 1KB ros-pine-moon.min.css 1KB phd.min.css 1KB ros-pine-dawn.min.css 1KB共 2000 条
- 1
- 2
- 3
- 4
- 5
- 6
- 20
资源评论
听风吹等浪起
- 粉丝: 1w+
- 资源: 1081
最新资源
- C库函数参考手册.rar，是chm文件，查询非常方便，带用例，非常详解
- 17个STM32F030C8T6例程
- 0.0.0 VScode插件platformIO开发环境的安装[esp32、8266]_̌萌新历险记的博客-CSDN博客.mhtml
- 基于matlab故障级联预测和分析的影响模型的源代码.rar
- 基于matlab实现的Frank-Wolfe算法，交通网络流中交通分配能用上.rar
- Editor下载非常好用的工具
- 基于matlab实现的NALM锁模激光器仿真，非线性环路反射镜锁模获得飞秒激光脉冲.rar
- 基于matlab实现的mimo空时编码STBC，以最大似然值算法做检测.rar
- 基于matlab实现的交通分配的GUI程序代码.rar
- tensorflow-rocm-2.12.1.570-cp38-cp38-manylinux2014-x86-64.whl
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
