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/项目练习/上课项目/js
+++ b/历届学生/front-end-team-10/项目练习/上课项目/js
@@ -0,0 +1,197 @@
+<!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 {
+            width: 70px;
+            height: 90px;
+            position: fixed;
+        }
+
+        body {
+            height: 100vh;
+        }
+
+        .alert {
+            width: 100%;
+            height: 100%;
+            position: fixed;
+            z-index: 999;
+            display: none;
+        }
+
+        .zz {
+            width: 100%;
+            height: 100%;
+            background: #000000a8;
+            position: fixed;
+            z-index: 1;
+        }
+
+        .text {
+            width: 300px;
+            height: 250px;
+            background: #fff;
+            position: fixed;
+            z-index: 2;
+            left: 50%;
+            top: 50%;
+            transform: translate(-50%, -50%);
+            border-radius: 10px;
+            padding: 11px;
+            box-sizing: border-box;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .text .title {
+            height: 40px;
+            display: flex;
+            align-items: center;
+            border-bottom: 1px solid #d5d5d5;
+        }
+
+        .text .close {
+            position: absolute;
+            right: 10px;
+            top: 4px;
+            font-size: 20px;
+            cursor: pointer;
+            user-select: none;
+        }
+
+        .text .content {
+            flex: 1;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 13px;
+        }
+    </style>
+</head>
+
+<body>
+
+
+    <div class="alert">
+        <div class="zz"></div>
+        <div class="text">
+            <div class="close"> x </div>
+            <div class="title">恭喜中奖</div>
+            <div class="content"></div>
+        </div>
+    </div>
+
+</body>
+<script>
+    // 生成随机出现的红包
+    //   计算红包随机出现的最大x轴范围
+    //   创建红包img，为红包设置定位（left  随机最大范围出现 0 ~ offsetLeft） 
+
+    // 让红包动起来
+
+    // 点击红包可以拆开（弹窗，告诉你中了什么奖项）
+    //  注意：弹窗打开时候，所有红包需要先暂停运动(停止创建红包)，关闭弹窗的时候，你点击的红包消失，其他红包继续运动
+
+    var { clientWidth, clientHeight } = document.body;
+    var offsetLeft = clientWidth - 70, gId = null, gImg = null;
+
+    //  创建红包
+    function createdHB() {
+        var randomLeft = Math.random() * offsetLeft;
+        var img = document.createElement("img");
+        img.src = "./hb.png";
+        img.onclick = () => {
+            gImg = img;
+
+            img.src = "./hb1.png";
+            probability()
+            $(".alert").style.display = "block"
+
+            // 停止页面上已有红包的运动
+            _("img").forEach(v => clearInterval(v.intervalId))
+
+            // 创建新红包的也需要停止
+            clearInterval(gId)
+
+        }
+        img.style = `
+          left: ${randomLeft}px;
+          top: -90px;
+        `;
+
+        $("body").appendChild(img)
+
+        sport(img)
+
+    }
+
+    // 运动起来
+    function sport(img) {
+        img.intervalId = setInterval(() => {
+            var oldTop = Number(img.style.top.replace("px", ""));
+            var newTop = oldTop + 1
+            img.style.top = `${newTop}px`
+            if (newTop > clientHeight) {
+                $("body").removeChild(img);
+                clearInterval(img.intervalId)
+            }
+        }, 10);
+    }
+
+
+    // 关闭按钮被点击
+    $(".text .close").onclick = () => {
+        $(".alert").style.display = "none"
+
+        // 删除你已经拆开过的红包
+        $("body").removeChild(gImg);
+
+        // 让页面上已有的红包在暂停后继续运动
+        _("img").forEach(v => sport(v))
+
+        auto()
+    }
+
+    function auto() {
+        gId = setInterval(() => {
+            createdHB()
+        }, 500)
+    }
+
+    // 中将的概率
+    function probability() {
+        var probabilityNums = Number((Math.random() * 10).toFixed(4))
+        if (probabilityNums < 0.0002) {
+            $(".content").innerText = "恭喜中得一等奖！"
+        } else if (probabilityNums > 0.0001 && probabilityNums < 8) {
+            $(".content").innerText = "恭喜中得三等奖！"
+        } else {
+            $(".content").innerText = "恭喜中得二等奖！"
+        }
+    }
+
+    auto()
+
+
+    function $(className) {
+        return document.querySelector(className)
+    }
+
+    function _(className) {
+        return document.querySelectorAll(className)
+    }
+
+</script>
+
+</html>