176 lines
3.9 KiB
HTML
176 lines
3.9 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>
|
|
|
|
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;
|
|
|
|
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> |