first commit

2024-09-27 02:06:13 +08:00
commit 852d94fbb9
36760 changed files with 3274413 additions and 0 deletions
--- a/历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-2-24/hb.html
+++ b/历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-2-24/hb.html
@@ -0,0 +1,96 @@
+<!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>