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-11/项目开发/上课项目/js案例/红包.html
+++ b/历届学生/front-end-team-11/项目开发/上课项目/js案例/红包.html
@@ -0,0 +1,175 @@
+<!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>
+        body {
+            margin: 0;
+            padding: 0;
+        }
+
+        img {
+            height: 85px;
+            width: 70px;
+            position: fixed;
+        }
+
+        .dialog {
+            position: fixed;
+            width: 100%;
+            height: 100%;
+            background: #000000ba;
+            z-index: 999;
+        }
+
+        .dialog .center {
+            width: 400px;
+            height: 300px;
+            background: #fff;
+            border-radius: 10px;
+            box-sizing: border-box;
+            padding: 10px;
+            display: flex;
+            flex-direction: column;
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            transform: translate(-50%, -50%);
+        }
+
+        .dialog .center .dialog_title {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            height: 40px;
+            border-bottom: 1px solid #e0e0e0;
+        }
+
+        .dialog_title .close {
+            font-size: 30px;
+            cursor: pointer;
+        }
+
+        .dialog .center .dialog_content {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex: 1;
+        }
+    </style>
+</head>
+
+<body>
+
+
+    <div style="display: none;" class="dialog">
+        <div class="center">
+            <div class="dialog_title">
+                <div class="text">恭喜中奖</div>
+                <div class="close">x</div>
+            </div>
+            <div class="dialog_content">
+                恭喜中的三等奖
+            </div>
+        </div>
+    </div>
+
+</body>
+<script>
+    let { innerWidth, innerHeight } = window, createdId = null, gImg = null;
+    // 生成随机x轴红包
+    function createdHb() {
+        let img = document.createElement("img");
+        let left = Math.random() * (innerWidth - 70);
+
+        img.src = "./hb.png";
+        img.style = `
+          left: ${left}px;
+          top: -85px;
+        `
+        
+        img.onclick = function () {
+            gImg = img;
+            clearInterval(createdId)
+            _("img").forEach(function (img) {
+                clearInterval(img.IntervalId)
+            })
+
+            random()
+            $(".dialog").style.display = "block"
+        }
+       
+        $("body").appendChild(img);
+        
+        motion(img)
+    }
+
+    function motion(img) {
+        img.IntervalId = setInterval(function () {
+            let newTop = parseInt(img.style.top);
+            if (newTop >= innerHeight) {
+                $("body").removeChild(img);
+                clearInterval(img.IntervalId)
+            } else {
+                img.style.top = `${newTop + 10}px`;
+                
+            }
+        }, 80)
+    }
+
+    $(".dialog_title .close").onclick = function () {
+        $(".dialog").style.display = "none"
+        $("body").removeChild(gImg);
+        clearInterval(gImg.IntervalId)
+
+        _("img").forEach(function (img) {
+            motion(img)
+        })
+
+        auto()
+    }
+
+    function random() {
+        let leavel = Math.random()
+        console.log(leavel);
+        if (leavel < 0.01) {
+            $(".dialog_content").innerText = "一等奖"
+        } else if (0.01< leavel && leavel <= 0.1) {
+            $(".dialog_content").innerText = "二等奖"
+        } else {
+            $(".dialog_content").innerText = "三等奖"
+        }
+    }
+
+    // createdHb()
+
+    function auto() {
+        createdId = setInterval(function () {
+            createdHb()
+        }, 300)
+    }
+
+    auto()
+
+
+    // 让红包运动
+
+    // 拆红包的所有功能
+    //  让被点击的红包停止运动，生成新红包的也停止运动，已有红包也要停止运动
+    //  一等奖(1)   二等奖(10)  三等奖(89)
+
+
+    function $(className) {
+        return document.querySelector(className);
+    }
+
+    function _(className) {
+        return document.querySelectorAll(className);
+    }
+</script>
+
+</html>