first commit

2024-09-27 02:06:13 +08:00
commit 852d94fbb9
36760 changed files with 3274413 additions and 0 deletions
--- a/历届学生/font-end-nine/项目练习/上课项目/js案例/红包雨.html
+++ b/历届学生/font-end-nine/项目练习/上课项目/js案例/红包雨.html
@@ -0,0 +1,193 @@
+
+    <!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>
+            body {
+                margin: 0;
+                padding: 0;
+                width: 100%;
+                height: 100vh;
+            }
+
+            img {
+                width: 80px;
+                height: 96px;
+                position: fixed;
+                top: -96px;
+            }
+
+            .dialog {
+                position: fixed;
+                width: 100%;
+                height: 100%;
+                background: #0000008c;
+                z-index: 9999;
+                display: none;
+            }
+
+            .center {
+                width: 40%;
+                background: #fff;
+                padding: 15px 10px;
+                border-radius: 4px;
+                position: absolute;
+                left: 50%;
+                top: 50%;
+                transform: translate(-50%, -50%);
+            }
+
+            .title {
+                height: 40px;
+                line-height: 40px;
+                border-bottom: 1px solid #ebe9e9;
+
+            }
+
+            .content {
+                padding: 20px 0;
+                text-align: center;
+            }
+
+            .footer {
+                display: flex;
+                justify-content: flex-end;
+            }
+
+            .footer .ok {
+                padding: 3px 15px;
+                background: #2a6bf4;
+                color: #fff;
+                font-size: 13px;
+                border-radius: 4px;
+                cursor: pointer;
+            }
+        </style>
+    </head>
+
+    <body>
+
+
+        <div class="dialog">
+            <div class="center">
+                <div class="title">提示</div>
+                <div class="content"></div>
+                <div class="footer">
+                    <div class="ok">确定</div>
+                </div>
+            </div>
+        </div>
+    </body>
+
+    <script>
+    // 1 随机创建 红包
+    //   获取屏幕宽度（x）,减去 红包的宽度，高度-
+    
+    // 2 红包运动
+    //   
+    
+    // 3 点击开红包
+    // 
+    
+    var { clientWidth, clientHeight } = document.body;
+    var createdNumber = null, clickImg = null, count = 0;
+    
+    
+    // 创建红包
+    function CreatedHb() {
+        var img = document.createElement("img");
+        var x = Math.random() * (clientWidth - 80)
+    
+        img.src = "./hb.png";
+        img.move = 0;
+        img.style.left = `${x}px`;
+    
+        img.onclick = () => {
+            count += 1;
+            if (count <= 3) {
+                clickImg = img;
+                clearInterval(createdNumber)
+                _("img").forEach(v => {
+                    clearTimeout(v.time)
+                })
+                WinPrize();
+            } else {
+                $(".content").innerText = "三次抽奖已经用完"
+                $(".dialog").style.display = "block"
+            }
+        }
+    
+    
+        $("body").appendChild(img)
+    
+        motion(img, -96)
+    }
+    
+    function WinPrize() {
+        $(".dialog").style.display = "block"
+        var num = Math.random();
+    
+        if (num > 0 && num <= 0.5) {
+            $(".content").innerText = "恭喜您中了九折"
+        } else if (num > 0.51 && num <= 0.995) {
+            $(".content").innerText = "恭喜您中了八折"
+        } else {
+            $(".content").innerText = "恭喜您中了五折"
+        }
+    }
+    
+    // 关闭按钮
+    $(".footer .ok").onclick = () => {
+    
+        $(".dialog").style.display = "none"
+    
+        $("body").removeChild(clickImg)
+        clearTimeout(clickImg.time)
+    
+        _("img").forEach(v => {
+            motion(v, -96)
+        })
+        auto();
+    }
+    
+    function motion(el, top) {
+        el.time = setTimeout(function fn() {
+            el.move += 4;
+            if (el.move > (clientHeight + 96)) {
+                $("body").removeChild(el)
+                clearTimeout(el.time)
+            } else {
+                el.style.top = `${top + el.move}px`
+                el.time = setTimeout(fn, 1000 / 60)
+            }
+        }, 1000 / 60)
+    }
+    
+    
+    function $(className) {
+        return document.querySelector(className)
+    }
+    
+    function _(className) {
+        return document.querySelectorAll(className)
+    }
+    
+    
+    function auto() {
+        createdNumber = setInterval(() => {
+            CreatedHb()
+        }, 500)
+    }
+    
+    
+    auto()
+    
+    
+    </script>
+
+    </html>