153 lines
4.1 KiB
HTML
153 lines
4.1 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Document</title>
|
||
<style>
|
||
html {
|
||
height: 100%;
|
||
}
|
||
|
||
body {
|
||
margin: 0;
|
||
padding: 0;
|
||
list-style: none;
|
||
height: 100%;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.zj {
|
||
position: fixed;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: #000000b5;
|
||
z-index: 9;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.text {
|
||
width: 50%;
|
||
color: #807e7e;
|
||
padding: 20px;
|
||
background: #fff;
|
||
}
|
||
|
||
.text_title {
|
||
text-align: right;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.hidden {
|
||
display: none;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
|
||
|
||
<div class="zj hidden">
|
||
<div class="text">
|
||
<div class="text_title">x</div>
|
||
<div class="text_content"></div>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
<script>
|
||
// 1 红包超过屏幕最大高度后删除它
|
||
// 2 点击红包，随机给个金额
|
||
// 3 点击红包后，暂停红包的生成和移动
|
||
// [1,2,3,5,8,9]
|
||
var body = document.querySelector("body");
|
||
// 存放img红包的定时器的
|
||
var move = [];
|
||
var ZheZhao = document.querySelector(".zj");
|
||
var currentImg, created;
|
||
|
||
// 创建图片，并让图片移动起来
|
||
function CreatedImg() {
|
||
var img = document.createElement("img");
|
||
img.src = "hongbao.png";
|
||
// 随机产生图片在x轴的位置
|
||
var leftX = parseInt(Math.random() * body.clientWidth)
|
||
img.style = `
|
||
height: 50px;
|
||
position: absolute;
|
||
left: ${leftX <= 40 ? 0 : leftX - 40}px;
|
||
top: 0px;
|
||
`;
|
||
|
||
startMove(img)
|
||
// left: 防止图片的x轴产生负数，从而导致图片跑到最左边看不见了
|
||
// 将图片放到body中
|
||
body.appendChild(img);
|
||
|
||
img.onclick = function() {
|
||
var zhekou = [1, 2, 3, 5, 8, 9];
|
||
currentImg = img;
|
||
// 点击后，切换图片地址，为 拆开后的红包图片
|
||
img.src = "chaikai.png";
|
||
// 让所有红包停止移动
|
||
move.forEach(v => clearInterval(v))
|
||
// 停止创建红包
|
||
clearInterval(created)
|
||
document.querySelector(".text_content").innerText = zhekou[parseInt(Math.random() * zhekou.length - 1)] + '折'
|
||
ZheZhao.className = "zj"
|
||
}
|
||
|
||
}
|
||
|
||
|
||
function startMove(img) {
|
||
// 将每个图片的独立的定时器保存到定时器数组中
|
||
move.push(
|
||
// 每隔100毫米，让图片移动1px
|
||
setInterval(function() {
|
||
// 累加然后移动1px
|
||
var t = (parseInt(img.style.top) + 1);
|
||
// 如果图片已经超出最大高度，那么删除img
|
||
if (t > (body.clientHeight + 50)) {
|
||
// try catch 捕捉错误的
|
||
try {
|
||
body.removeChild(img)
|
||
} catch (error) {}
|
||
} else {
|
||
// 将数值写入到标签上
|
||
img.style.top = t + 'px';
|
||
}
|
||
}, 10)
|
||
);
|
||
}
|
||
|
||
|
||
// 弹窗的关闭事件
|
||
document.querySelector(".text_title").onclick = function() {
|
||
// 获取已经被创建过但是被停止的红包的img
|
||
var StopImg = document.querySelectorAll("img");
|
||
// 让所有已经停止的红包重新开始运动
|
||
StopImg.forEach((v) => {
|
||
startMove(v)
|
||
})
|
||
// 创建新的红包
|
||
start()
|
||
body.removeChild(currentImg);
|
||
// 隐藏弹窗
|
||
ZheZhao.className = "zj hidden";
|
||
}
|
||
|
||
function start() {
|
||
created = setInterval(function() {
|
||
CreatedImg()
|
||
}, 1000)
|
||
}
|
||
|
||
|
||
start()
|
||
</script>
|
||
|
||
</html> |