96 lines
2.4 KiB
HTML
96 lines
2.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>红包雨</title>
|
||
<style>
|
||
*{
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
img{
|
||
width: 130px;
|
||
height: 103px;
|
||
position: fixed;
|
||
cursor: pointer;
|
||
}
|
||
body{
|
||
height: 100vh;
|
||
}
|
||
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
|
||
</body>
|
||
<script>
|
||
// 生成随机出现的红包
|
||
|
||
// 计算红包随机出现的最大x轴范围
|
||
//{client}
|
||
// 创建红包img，为红包设置定位（left 随机最大范围出现 0 ~ offsetLeft）
|
||
|
||
// 让红包动起来
|
||
|
||
// 点击红包可以拆开（弹窗，告诉你中了什么奖项）
|
||
// 注意：弹窗打开时候，所有红包需要先暂停运动(停止创建红包)，关闭弹窗的时候，你点击的红包消失，其他红包继续运动
|
||
|
||
//获取body的宽度，doucmen.body(虚拟对象)
|
||
// var clientWidth = document.body.clientWidth,
|
||
// clientHeight = document.body.clientHeight
|
||
|
||
|
||
var { clientWidth,clientHeight } = document.body
|
||
var offsetLeft = clientWidth - 130;
|
||
|
||
// console.log(clientWidth)
|
||
|
||
function createdHB() {
|
||
// console.log("创建红包")
|
||
|
||
var rendomLeft = Math.random() * offsetLeft
|
||
var img = document.createElement("img");
|
||
|
||
//创建ing图像
|
||
img.src = "./hb1.png";
|
||
img.style = `left:${rendomLeft}px ;
|
||
top: -130px`;
|
||
// console.log(img);
|
||
$("body").appendChild(img);
|
||
sport(img);
|
||
|
||
}
|
||
createdHB();
|
||
|
||
function sport(img){
|
||
//定义新曾一个img的id 用于清空每个图片的定时器
|
||
img.intervalId = setInterval(() => {
|
||
var oldTop = Number(img.style.top.replace("px",""));
|
||
//console.log("img.style.top:",);
|
||
|
||
var newTop = oldTop + 1;
|
||
img.style.top = `${newTop}px`
|
||
|
||
if( newTop > clientHeight){
|
||
$("body").removeChild(img);
|
||
clearInterval(img.intervalId);
|
||
}
|
||
},4)
|
||
}
|
||
setInterval(() =>{
|
||
createdHB()
|
||
},500)
|
||
function $(className) {
|
||
return document.querySelector(className)
|
||
}
|
||
|
||
function _(className) {
|
||
return document.querySelectorAll(className)
|
||
}
|
||
</script>
|
||
|
||
</html> |