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,188 @@
+<!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>Document</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>
+
+
+
+
+
+
+
+<script>
+    var clientWidth=$("body").clientWidth - 61,
+        clientHeight=$("body").clientHeight + 80,
+        createId = 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;
+            console.log("被点击了")
+            // clearInterval(img.IntervalId)
+            _("img").forEach(function (v) {
+                clearInterval(v.IntervalId)
+            })
+            clearInterval(createId)
+            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 news = Math.random();
+        if (news < 0.1) {
+            $(".popup_body").innerText = `恭喜中得，1折`
+        } else if (news >= 0.1 & news < 0.3) {
+            $(".popup_body").innerText = `恭喜中得，！！`
+        } else if (news > 0.3) {
+            $(".popup_body").innerText = `恭喜中得，！！`
+        }
+    }
+   
+
+    $(".popup_close").onclick = function () {
+        $(".popup").classList.add("hidden");
+        $("body").removeChild(currendHb);
+        _("img").forEach(function (v) {
+            motion(v)
+        })
+        auto();
+    }
+
+
+    function auto() {
+         createId = setInterval(function () {
+        createdHongBao()
+    },500)
+
+    }
+    auto()
+  
+
+
+    
+
+
+
+
+
+
+
+
+
+    function $(className) {
+        return document.querySelector(className)
+    }
+
+    function _(className) {
+        return document.querySelectorAll(className)
+    }
+</script>
+
+
+
+
+</body>
+</html>