first commit

2024-09-27 02:06:13 +08:00
commit 852d94fbb9
36760 changed files with 3274413 additions and 0 deletions
--- a/历届学生/fontendseven/项目练习/上课项目/红包雨/index.html
+++ b/历届学生/fontendseven/项目练习/上课项目/红包雨/index.html
@@ -0,0 +1,174 @@
+<!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 {
+            height: 80px;
+            position: fixed;
+            user-select: none;
+        }
+
+        body {
+            height: 100vh;
+        }
+
+        .hidden {
+            display: none !important;
+        }
+
+        .popup {
+            position: fixed;
+            width: 100%;
+            height: 100%;
+            background: rgb(0 0 0 / 57%);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            z-index: 99;
+        }
+
+        .popup .center {
+            width: 400px;
+            height: 250px;
+            background: #fff;
+            position: relative;
+        }
+
+        .popup .center .popup_title {
+            display: flex;
+            justify-content: center;
+            height: 50px;
+            align-items: center;
+            border-bottom: 1px solid #eeecec;
+            box-sizing: border-box;
+        }
+
+        .popup .center .popup_close {
+            position: absolute;
+            right: 15px;
+            top: 5px;
+            font-size: 24px;
+        }
+
+        .popup .center .popup_body {
+            padding: 15px;
+            display: flex;
+            align-items: center;
+            height: 200px;
+            justify-content: center;
+            box-sizing: border-box;
+        }
+    </style>
+</head>
+
+<body>
+
+
+
+    <div class="popup hidden">
+        <div class="center">
+            <div class="popup_title">恭喜中奖</div>
+            <div class="popup_close">x</div>
+            <div class="popup_body">
+                
+            </div>
+        </div>
+    </div>
+
+</body>
+<script>
+
+    // 随机再屏幕上边生成红包，红包需要在屏幕外边（-自身高度）
+
+    // 定义一个方法，让红包运动起来，定时器修改top距离
+
+    // 给所有红包绑定点击事件，点击的时候暂停所有红包，然后显示弹窗，告知
+    // 中奖的等级，然后关闭弹窗后删除你刚刚点击的红包，并让其他红包继续运动
+
+    var clientWidth = $("body").clientWidth - 61,
+        clientHeight = $("body").clientHeight + 80,
+        createdId = null, currendHb = null;
+
+    function createdHongBao() {
+        var img = document.createElement("img");
+        img.src = "./hb.png";
+        img.style.top = "-80px"
+        img.style.left = `${Math.random() * clientWidth}px`;
+        img.onclick = () => {
+            currendHb = img;
+            // 停止当前网页上的所有红包
+            _("img").forEach(v => clearInterval(v.IntervalId))
+            // 停止不要再生成新的红包
+            clearInterval(createdId)
+            discount()
+            $(".popup").classList.remove("hidden")
+        }
+        $("body").appendChild(img)
+        motion(img)
+    }
+
+    function motion(el) {
+        el.IntervalId = setInterval(() => {
+            var top = parseInt(el.style.top) + 1;
+            if (top > clientHeight) {
+                clearInterval(el.IntervalId)
+                $("body").removeChild(el)
+            } else {
+                el.style.top = `${top}px`
+            }
+        }, 6);
+    }
+
+    function discount () {
+        var nums = Math.random();
+        if (nums < 0.005) {
+            $(".popup_body").innerText = `恭喜中得，1折！！`
+        } else if (nums >= 0.005 & nums < 0.2){
+            $(".popup_body").innerText = `恭喜中得，8折！！`
+        } else if (nums >= 0.2){
+            $(".popup_body").innerText = `恭喜中得，9折！！`
+        }
+         
+    }
+
+    $(".popup_close").onclick = () => {
+        $(".popup").classList.add("hidden");
+        // 删除你点击的那个红包
+        $("body").removeChild(currendHb)
+        // 获取网页上现在的红包，然后调用 motion 让他们重新运动起来
+        _("img").forEach(v => motion(v))
+        // 重新调用  auto  方法，让红包继续产生
+        auto();
+    }
+
+    function auto() {
+        createdId = setInterval(() => {
+            createdHongBao()
+        }, 500);
+    }
+
+    auto()
+
+
+    function $(className) {
+        return document.querySelector(className)
+    }
+
+    function _(className) {
+        return document.querySelectorAll(className)
+    }
+
+
+</script>
+
+</html>