176 lines
4.2 KiB
HTML
176 lines
4.2 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>红包雨</title>
|
||
<style>
|
||
body,
|
||
html,
|
||
h2,
|
||
h3,
|
||
h4,
|
||
h5,
|
||
h6,
|
||
h6,
|
||
p {
|
||
margin: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
overflow: hidden;
|
||
}
|
||
|
||
img {
|
||
width: 70px;
|
||
height: 90px;
|
||
position: absolute;
|
||
top: 0;
|
||
transition: all 0.1s ease;
|
||
user-select: none;
|
||
}
|
||
|
||
.dialog {
|
||
position: fixed;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
top: 0;
|
||
background: rgb(0 0 0 / 46%);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
z-index: 999;
|
||
}
|
||
|
||
.dialog .title {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
height: 40px;
|
||
}
|
||
|
||
.dialog .content {
|
||
background: #fff;
|
||
padding: 10px 19px;
|
||
}
|
||
|
||
.dialog .text {
|
||
padding: 15px;
|
||
}
|
||
|
||
.hidden {
|
||
display: none;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
|
||
<div class="dialog hidden">
|
||
<div class="content">
|
||
<div class="title">
|
||
<h2>恭喜中将</h2>
|
||
<span>x</span>
|
||
</div>
|
||
<div class="text">
|
||
恭喜你，本次抽奖获得了xx折优惠！！！
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
|
||
<script>
|
||
|
||
// x轴随机产生红包，x距离应该是 屏幕的宽度减去红包的宽度，然后给图片设置left距离
|
||
// 让红包动起来，让Y轴增大，设置过渡
|
||
// 超过屏幕删除红包，删除动画
|
||
|
||
var clientWidth = document.body.offsetWidth,
|
||
clientHeight = document.body.offsetHeight;
|
||
|
||
var currentHb, createdId;
|
||
|
||
function createdHb() {
|
||
var imgLeft = Math.random() * (clientWidth - 70);
|
||
var img = document.createElement("img")
|
||
img.src = "./hb.png"
|
||
img.style.left = `${imgLeft}px`;
|
||
img.style.top = `0px`
|
||
|
||
img.onclick = () => {
|
||
currentHb = img;
|
||
var imgList = document.querySelectorAll("img");
|
||
imgList.forEach(v => {
|
||
clearInterval(v.typeId)
|
||
});
|
||
clearInterval(createdId)
|
||
$(".dialog").classList.remove("hidden")
|
||
probability()
|
||
}
|
||
|
||
$("body").appendChild(img)
|
||
|
||
animation(img)
|
||
}
|
||
|
||
|
||
function animation(el) {
|
||
el.typeId = setInterval(() => {
|
||
var oldTop = parseInt(el.style.top);
|
||
var newTop = oldTop + 10;
|
||
el.style.top = `${newTop}px`;
|
||
if (newTop > clientHeight) {
|
||
$("body").removeChild(el)
|
||
clearInterval(el.typeId)
|
||
}
|
||
}, 80);
|
||
}
|
||
|
||
|
||
function probability() {
|
||
var probabilityMums = Number(Math.random().toFixed(1))
|
||
if (probabilityMums < 0.2) {
|
||
$(".text").innerText = `恭喜你，${probabilityMums} 本次抽奖获得了 1 折优惠！！！`
|
||
} else if (probabilityMums >= 0.2 && probabilityMums <= 0.8 ) {
|
||
$(".text").innerText = `恭喜你，${probabilityMums} 本次抽奖获得了 9 折优惠！！！`
|
||
} else if (probabilityMums > 0.8) {
|
||
$(".text").innerText = `恭喜你，${probabilityMums} 本次抽奖获得了 8 折优惠！！！`
|
||
}
|
||
}
|
||
|
||
$(".title span ").onclick = () => {
|
||
$(".dialog").classList.add("hidden")
|
||
|
||
clearInterval(currentHb.typeId)
|
||
$("body").removeChild(currentHb)
|
||
|
||
|
||
var imgList = document.querySelectorAll("img");
|
||
imgList.forEach(v => {
|
||
animation(v)
|
||
});
|
||
autoCreated()
|
||
}
|
||
|
||
|
||
function autoCreated() {
|
||
createdId = setInterval(() => {
|
||
createdHb()
|
||
}, 1000);
|
||
}
|
||
|
||
|
||
|
||
autoCreated();
|
||
|
||
|
||
|
||
function $(className) {
|
||
return document.querySelector(className)
|
||
}
|
||
|
||
</script>
|
||
|
||
</html> |