165 lines
4.0 KiB
HTML
165 lines
4.0 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;
|
|
height: 100vh;
|
|
}
|
|
|
|
img {
|
|
height: 85px;
|
|
width: 70px;
|
|
position: fixed;
|
|
top: 25px;
|
|
|
|
}
|
|
|
|
.Pop {
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: #00000040;
|
|
z-index: 999999;
|
|
display: none;
|
|
}
|
|
|
|
.cencer {
|
|
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%);
|
|
z-index: 999999;
|
|
}
|
|
|
|
.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_content {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex: 1;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="Pop">
|
|
<div class="cencer">
|
|
<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, imgg = null;
|
|
|
|
function envelope() {
|
|
|
|
let signx = parseInt(Math.random() * (innerWidth - 70));
|
|
let img = document.createElement("img");
|
|
console.log(img)
|
|
img.src = "./hb.png";
|
|
img.style = `
|
|
left:${signx}px;
|
|
top:-85px;
|
|
`
|
|
console.log(signx);
|
|
$("body").appendChild(img)
|
|
vertical(img);
|
|
//红包点击事件
|
|
img.onclick = function () {
|
|
//循环将垂直计时器暂停
|
|
_("img").forEach(function (v) {
|
|
clearInterval(v.ininid)
|
|
})
|
|
//暂停红包生成
|
|
clearInterval(generate)
|
|
//将弹窗显示
|
|
$(".Pop").style = `display: block;`
|
|
imgg = img;
|
|
random();
|
|
}
|
|
|
|
}
|
|
|
|
function vertical(img) {
|
|
img.ininid = setInterval(function () {
|
|
let yy = parseInt(img.style.top);
|
|
if (yy >= innerHeight) {
|
|
$("body").removeChild(img)
|
|
clearInterval(img.ininid)
|
|
} else {
|
|
img.style.top = ` ${yy + 10}px `
|
|
console.log(1)
|
|
}
|
|
}, 200)
|
|
}
|
|
//随机中将函数
|
|
function random() {
|
|
let shuji = Math.random() * 1;
|
|
if (shuji < 0.1) {
|
|
$(".dialog_content").innerText = "一等奖";
|
|
} else if (shuji < 0.3 && shuji > 0.1) {
|
|
$(".dialog_content").innerText = "二等奖";
|
|
} else {
|
|
$(".dialog_content").innerText = "三等奖";
|
|
}
|
|
}
|
|
|
|
//关闭窗体
|
|
$(".close").onclick = function () {
|
|
$(".Pop").style.display = "none"
|
|
$("body").removeChild(imgg);
|
|
clearInterval(imgg.ininid)
|
|
_("img").forEach(function (v) {
|
|
vertical(v)
|
|
})
|
|
generate1()
|
|
}
|
|
let generate = null;
|
|
|
|
function generate1() {
|
|
generate = setInterval(function () {
|
|
envelope()
|
|
}, 500)
|
|
}
|
|
generate1()
|
|
function $(name) {
|
|
return document.querySelector(name);
|
|
}
|
|
function _(name) {
|
|
return document.querySelectorAll(name);
|
|
}
|
|
</script>
|
|
|
|
</html> |