181 lines
4.4 KiB
HTML
181 lines
4.4 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>红包雨2</title>
|
||
<style>
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
body {
|
||
height: 100vh;
|
||
}
|
||
|
||
img {
|
||
width: 110px;
|
||
height: 83px;
|
||
position: fixed;
|
||
}
|
||
|
||
.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>
|
||
//1、获取屏幕的宽高（clineWidth，clienHight）
|
||
//2、创建图片元素
|
||
//3、产生随机数加到图片的top值上
|
||
//4、改变图片的top值，让图片动起来
|
||
//5、点击红包，所有红包暂停
|
||
var { clientHeight, clientWidth } = document.body;
|
||
//console.log(clientWidth);
|
||
var offetLeft = clientWidth - 110,
|
||
gid = null,
|
||
gimg = null;
|
||
|
||
function createdHB() {
|
||
|
||
var randomLeft = Math.random() * offetLeft;
|
||
var img = document.createElement("img");
|
||
|
||
img.src = "./hb1.png"
|
||
img.style = `left:${randomLeft}px ;
|
||
`;
|
||
//console.log(img)
|
||
$("body").appendChild(img);
|
||
|
||
img.onclick = () => {
|
||
probability()
|
||
gimg = img;
|
||
img.src = "./hb2.png"
|
||
$(" .alert").style.display = "block";
|
||
//使用img的虚拟dom清空setinterval
|
||
_("img").forEach((v, i) => {
|
||
clearInterval(v.clienId)
|
||
})
|
||
clearInterval(gid);
|
||
}
|
||
sport(img);
|
||
}
|
||
$(".text .close").onclick = () => {
|
||
$(" .alert ").style.display = "none";
|
||
$("body").removeChild(gimg);
|
||
_("img").forEach((v) => {
|
||
sport(v);
|
||
})
|
||
auto();
|
||
}
|
||
createdHB();
|
||
|
||
|
||
function sport(img) {
|
||
|
||
img.clienId = setInterval(() => {
|
||
|
||
var oldTop = Number(img.style.top.replace("px", ""));
|
||
img.style.top = `${oldTop + 1}px`;
|
||
|
||
if (oldTop > clientHeight) {
|
||
$("body").removeChild(img);
|
||
clearInterval(img.clienId);
|
||
}
|
||
}, 10)
|
||
}
|
||
function auto() {
|
||
gid = setInterval(() => {
|
||
createdHB();
|
||
}, 500)
|
||
}
|
||
|
||
//随机中奖率
|
||
function probability() {
|
||
var probabilityNums =Number(( Math.random()*10).toFixed(4))
|
||
if( probabilityNums < 0.0002){
|
||
$(".content").innerHTML = "恭喜中得一等奖！"
|
||
}else if(probabilityNums > 0.0001 && probabilityNums <8){
|
||
$(".content").innerHTML = "恭喜中得三等奖！"
|
||
}else{
|
||
$(".content").innerHTML = "恭喜中得二等奖！"
|
||
}
|
||
}
|
||
auto();
|
||
|
||
function $(className) {
|
||
return document.querySelector(className)
|
||
}
|
||
|
||
function _(className) {
|
||
return document.querySelectorAll(className)
|
||
}
|
||
</script>
|
||
|
||
</html> |