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/项目练习/学生项目/韩孟雪/2023-2-24/hb2.html
+++ b/历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-2-24/hb2.html
@@ -0,0 +1,181 @@
+<!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>红包雨2</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+        }
+
+        body {
+            height: 100vh;
+        }
+
+        img {
+            width: 110px;
+            height: 83px;
+            position: fixed;
+        }
+
+        .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>
+    //1、获取屏幕的宽高（clineWidth，clienHight）
+    //2、创建图片元素
+    //3、产生随机数加到图片的top值上
+    //4、改变图片的top值，让图片动起来
+    //5、点击红包，所有红包暂停
+    var { clientHeight, clientWidth } = document.body;
+    //console.log(clientWidth);
+    var offetLeft = clientWidth - 110,
+        gid = null,
+        gimg = null;
+
+    function createdHB() {
+
+        var randomLeft = Math.random() * offetLeft;
+        var img = document.createElement("img");
+
+        img.src = "./hb1.png"
+        img.style = `left:${randomLeft}px ;
+                `;
+        //console.log(img)
+        $("body").appendChild(img);
+
+        img.onclick = () => {
+            probability() 
+            gimg = img;
+            img.src = "./hb2.png"
+            $(" .alert").style.display = "block";
+            //使用img的虚拟dom清空setinterval
+            _("img").forEach((v, i) => {
+                clearInterval(v.clienId)
+            })
+            clearInterval(gid);
+        }
+        sport(img);
+    }
+    $(".text .close").onclick = () => {
+        $(" .alert ").style.display = "none";
+        $("body").removeChild(gimg);
+        _("img").forEach((v) => {
+            sport(v);
+        })
+        auto();
+    }
+    createdHB();
+
+
+    function sport(img) {
+
+        img.clienId = setInterval(() => {
+
+            var oldTop = Number(img.style.top.replace("px", ""));
+            img.style.top = `${oldTop + 1}px`;
+
+            if (oldTop > clientHeight) {
+                $("body").removeChild(img);
+                clearInterval(img.clienId);
+            }
+        }, 10)
+    }
+    function auto() {
+        gid = setInterval(() => {
+            createdHB();
+        }, 500)
+    }
+
+    //随机中奖率
+    function probability() {
+         var probabilityNums =Number(( Math.random()*10).toFixed(4))
+         if( probabilityNums < 0.0002){
+                $(".content").innerHTML = "恭喜中得一等奖！"
+         }else if(probabilityNums > 0.0001 && probabilityNums <8){
+            $(".content").innerHTML = "恭喜中得三等奖！"
+         }else{
+            $(".content").innerHTML = "恭喜中得二等奖！"
+         }
+    }
+    auto();
+
+    function $(className) {
+        return document.querySelector(className)
+    }
+
+    function _(className) {
+        return document.querySelectorAll(className)
+    }
+</script>
+
+</html>