first commit

2024-09-27 02:06:13 +08:00
commit 852d94fbb9
36760 changed files with 3274413 additions and 0 deletions
--- a/历届学生/18课程/class18/课程/2020-10-21/test.html
+++ b/历届学生/18课程/class18/课程/2020-10-21/test.html
@@ -0,0 +1,153 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        html {
+            height: 100%;
+        }
+        
+        body {
+            margin: 0;
+            padding: 0;
+            list-style: none;
+            height: 100%;
+            position: relative;
+            overflow: hidden;
+        }
+        
+        .zj {
+            position: fixed;
+            width: 100%;
+            height: 100%;
+            background: #000000b5;
+            z-index: 9;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .text {
+            width: 50%;
+            color: #807e7e;
+            padding: 20px;
+            background: #fff;
+        }
+        
+        .text_title {
+            text-align: right;
+            cursor: pointer;
+        }
+        
+        .hidden {
+            display: none;
+        }
+    </style>
+</head>
+
+<body>
+
+
+    <div class="zj hidden">
+        <div class="text">
+            <div class="text_title">x</div>
+            <div class="text_content"></div>
+        </div>
+    </div>
+</body>
+<script>
+    // 1 红包超过屏幕最大高度后删除它
+    // 2 点击红包，随机给个金额
+    // 3 点击红包后，暂停红包的生成和移动
+    // [1,2,3,5,8,9]
+    var body = document.querySelector("body");
+    // 存放img红包的定时器的
+    var move = [];
+    var ZheZhao = document.querySelector(".zj");
+    var currentImg, created;
+
+    // 创建图片，并让图片移动起来
+    function CreatedImg() {
+        var img = document.createElement("img");
+        img.src = "hongbao.png";
+        // 随机产生图片在x轴的位置
+        var leftX = parseInt(Math.random() * body.clientWidth)
+        img.style = `
+            height: 50px;
+            position: absolute;
+            left: ${leftX <= 40 ? 0 : leftX - 40}px;
+            top: 0px;
+        `;
+
+        startMove(img)
+            // left: 防止图片的x轴产生负数，从而导致图片跑到最左边看不见了
+            // 将图片放到body中
+        body.appendChild(img);
+
+        img.onclick = function() {
+            var zhekou = [1, 2, 3, 5, 8, 9];
+            currentImg = img;
+            // 点击后，切换图片地址，为 拆开后的红包图片
+            img.src = "chaikai.png";
+            // 让所有红包停止移动
+            move.forEach(v => clearInterval(v))
+                // 停止创建红包
+            clearInterval(created)
+            document.querySelector(".text_content").innerText = zhekou[parseInt(Math.random() * zhekou.length - 1)] + '折'
+            ZheZhao.className = "zj"
+        }
+
+    }
+
+
+    function startMove(img) {
+        // 将每个图片的独立的定时器保存到定时器数组中
+        move.push(
+            // 每隔100毫米，让图片移动1px
+            setInterval(function() {
+                // 累加然后移动1px
+                var t = (parseInt(img.style.top) + 1);
+                // 如果图片已经超出最大高度，那么删除img
+                if (t > (body.clientHeight + 50)) {
+                    // try catch 捕捉错误的
+                    try {
+                        body.removeChild(img)
+                    } catch (error) {}
+                } else {
+                    // 将数值写入到标签上
+                    img.style.top = t + 'px';
+                }
+            }, 10)
+        );
+    }
+
+
+    // 弹窗的关闭事件
+    document.querySelector(".text_title").onclick = function() {
+        // 获取已经被创建过但是被停止的红包的img
+        var StopImg = document.querySelectorAll("img");
+        // 让所有已经停止的红包重新开始运动
+        StopImg.forEach((v) => {
+                startMove(v)
+            })
+            // 创建新的红包
+        start()
+        body.removeChild(currentImg);
+        // 隐藏弹窗
+        ZheZhao.className = "zj hidden";
+    }
+
+    function start() {
+        created = setInterval(function() {
+            CreatedImg()
+        }, 1000)
+    }
+
+
+    start()
+</script>
+
+</html>