197 lines
4.7 KiB
HTML
197 lines
4.7 KiB
HTML
<!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">
|
||
<title>Document</title>
|
||
<style>
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
img {
|
||
width: 70px;
|
||
height: 90px;
|
||
position: fixed;
|
||
}
|
||
|
||
body {
|
||
height: 100vh;
|
||
}
|
||
|
||
.alert {
|
||
width: 100%;
|
||
height: 100%;
|
||
position: fixed;
|
||
z-index: 999;
|
||
display: none;
|
||
}
|
||
|
||
.zz {
|
||
width: 100%;
|
||
height: 100%;
|
||
background: #000000a8;
|
||
position: fixed;
|
||
z-index: 1;
|
||
}
|
||
|
||
.text {
|
||
width: 300px;
|
||
height: 250px;
|
||
background: #fff;
|
||
position: fixed;
|
||
z-index: 2;
|
||
left: 50%;
|
||
top: 50%;
|
||
transform: translate(-50%, -50%);
|
||
border-radius: 10px;
|
||
padding: 11px;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.text .title {
|
||
height: 40px;
|
||
display: flex;
|
||
align-items: center;
|
||
border-bottom: 1px solid #d5d5d5;
|
||
}
|
||
|
||
.text .close {
|
||
position: absolute;
|
||
right: 10px;
|
||
top: 4px;
|
||
font-size: 20px;
|
||
cursor: pointer;
|
||
user-select: none;
|
||
}
|
||
|
||
.text .content {
|
||
flex: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 13px;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
|
||
|
||
<div class="alert">
|
||
<div class="zz"></div>
|
||
<div class="text">
|
||
<div class="close"> x </div>
|
||
<div class="title">恭喜中奖</div>
|
||
<div class="content"></div>
|
||
</div>
|
||
</div>
|
||
|
||
</body>
|
||
<script>
|
||
// 生成随机出现的红包
|
||
// 计算红包随机出现的最大x轴范围
|
||
// 创建红包img，为红包设置定位（left 随机最大范围出现 0 ~ offsetLeft）
|
||
|
||
// 让红包动起来
|
||
|
||
// 点击红包可以拆开（弹窗，告诉你中了什么奖项）
|
||
// 注意：弹窗打开时候，所有红包需要先暂停运动(停止创建红包)，关闭弹窗的时候，你点击的红包消失，其他红包继续运动
|
||
|
||
var { clientWidth, clientHeight } = document.body;
|
||
var offsetLeft = clientWidth - 70, gId = null, gImg = null;
|
||
|
||
// 创建红包
|
||
function createdHB() {
|
||
var randomLeft = Math.random() * offsetLeft;
|
||
var img = document.createElement("img");
|
||
img.src = "./hb.png";
|
||
img.onclick = () => {
|
||
gImg = img;
|
||
|
||
img.src = "./hb1.png";
|
||
probability()
|
||
$(".alert").style.display = "block"
|
||
|
||
// 停止页面上已有红包的运动
|
||
_("img").forEach(v => clearInterval(v.intervalId))
|
||
|
||
// 创建新红包的也需要停止
|
||
clearInterval(gId)
|
||
|
||
}
|
||
img.style = `
|
||
left: ${randomLeft}px;
|
||
top: -90px;
|
||
`;
|
||
|
||
$("body").appendChild(img)
|
||
|
||
sport(img)
|
||
|
||
}
|
||
|
||
// 运动起来
|
||
function sport(img) {
|
||
img.intervalId = setInterval(() => {
|
||
var oldTop = Number(img.style.top.replace("px", ""));
|
||
var newTop = oldTop + 1
|
||
img.style.top = `${newTop}px`
|
||
if (newTop > clientHeight) {
|
||
$("body").removeChild(img);
|
||
clearInterval(img.intervalId)
|
||
}
|
||
}, 10);
|
||
}
|
||
|
||
|
||
// 关闭按钮被点击
|
||
$(".text .close").onclick = () => {
|
||
$(".alert").style.display = "none"
|
||
|
||
// 删除你已经拆开过的红包
|
||
$("body").removeChild(gImg);
|
||
|
||
// 让页面上已有的红包在暂停后继续运动
|
||
_("img").forEach(v => sport(v))
|
||
|
||
auto()
|
||
}
|
||
|
||
function auto() {
|
||
gId = setInterval(() => {
|
||
createdHB()
|
||
}, 500)
|
||
}
|
||
|
||
// 中将的概率
|
||
function probability() {
|
||
var probabilityNums = Number((Math.random() * 10).toFixed(4))
|
||
if (probabilityNums < 0.0002) {
|
||
$(".content").innerText = "恭喜中得一等奖！"
|
||
} else if (probabilityNums > 0.0001 && probabilityNums < 8) {
|
||
$(".content").innerText = "恭喜中得三等奖！"
|
||
} else {
|
||
$(".content").innerText = "恭喜中得二等奖！"
|
||
}
|
||
}
|
||
|
||
auto()
|
||
|
||
|
||
function $(className) {
|
||
return document.querySelector(className)
|
||
}
|
||
|
||
function _(className) {
|
||
return document.querySelectorAll(className)
|
||
}
|
||
|
||
</script>
|
||
|
||
</html> |