175 lines
4.1 KiB
HTML
175 lines
4.1 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>
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
img {
|
|
height: 85px;
|
|
width: 70px;
|
|
position: fixed;
|
|
}
|
|
|
|
.dialog {
|
|
position: fixed;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: #000000ba;
|
|
z-index: 999;
|
|
}
|
|
|
|
.dialog .center {
|
|
width: 400px;
|
|
height: 300px;
|
|
background: #fff;
|
|
border-radius: 10px;
|
|
box-sizing: border-box;
|
|
padding: 10px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
.dialog .center .dialog_title {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
height: 40px;
|
|
border-bottom: 1px solid #e0e0e0;
|
|
}
|
|
|
|
.dialog_title .close {
|
|
font-size: 30px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.dialog .center .dialog_content {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex: 1;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
|
|
<div style="display: none;" class="dialog">
|
|
<div class="center">
|
|
<div class="dialog_title">
|
|
<div class="text">恭喜中奖</div>
|
|
<div class="close">x</div>
|
|
</div>
|
|
<div class="dialog_content">
|
|
恭喜中的三等奖
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</body>
|
|
<script>
|
|
let { innerWidth, innerHeight } = window, createdId = null, gImg = null;
|
|
// 生成随机x轴红包
|
|
function createdHb() {
|
|
let img = document.createElement("img");
|
|
let left = Math.random() * (innerWidth - 70);
|
|
|
|
img.src = "./hb.png";
|
|
img.style = `
|
|
left: ${left}px;
|
|
top: -85px;
|
|
`
|
|
|
|
img.onclick = function () {
|
|
gImg = img;
|
|
clearInterval(createdId)
|
|
_("img").forEach(function (img) {
|
|
clearInterval(img.IntervalId)
|
|
})
|
|
|
|
random()
|
|
$(".dialog").style.display = "block"
|
|
}
|
|
|
|
$("body").appendChild(img);
|
|
|
|
motion(img)
|
|
}
|
|
|
|
function motion(img) {
|
|
img.IntervalId = setInterval(function () {
|
|
let newTop = parseInt(img.style.top);
|
|
if (newTop >= innerHeight) {
|
|
$("body").removeChild(img);
|
|
clearInterval(img.IntervalId)
|
|
} else {
|
|
img.style.top = `${newTop + 10}px`;
|
|
|
|
}
|
|
}, 80)
|
|
}
|
|
|
|
$(".dialog_title .close").onclick = function () {
|
|
$(".dialog").style.display = "none"
|
|
$("body").removeChild(gImg);
|
|
clearInterval(gImg.IntervalId)
|
|
|
|
_("img").forEach(function (img) {
|
|
motion(img)
|
|
})
|
|
|
|
auto()
|
|
}
|
|
|
|
function random() {
|
|
let leavel = Math.random()
|
|
console.log(leavel);
|
|
if (leavel < 0.01) {
|
|
$(".dialog_content").innerText = "一等奖"
|
|
} else if (0.01< leavel && leavel <= 0.1) {
|
|
$(".dialog_content").innerText = "二等奖"
|
|
} else {
|
|
$(".dialog_content").innerText = "三等奖"
|
|
}
|
|
}
|
|
|
|
// createdHb()
|
|
|
|
function auto() {
|
|
createdId = setInterval(function () {
|
|
createdHb()
|
|
}, 300)
|
|
}
|
|
|
|
auto()
|
|
|
|
|
|
// 让红包运动
|
|
|
|
// 拆红包的所有功能
|
|
// 让被点击的红包停止运动，生成新红包的也停止运动，已有红包也要停止运动
|
|
// 一等奖(1) 二等奖(10) 三等奖(89)
|
|
|
|
|
|
function $(className) {
|
|
return document.querySelector(className);
|
|
}
|
|
|
|
function _(className) {
|
|
return document.querySelectorAll(className);
|
|
}
|
|
</script>
|
|
|
|
</html> |