first commit

2024-09-27 02:06:13 +08:00
commit 852d94fbb9
36760 changed files with 3274413 additions and 0 deletions
--- a/历届学生/fontendsix/项目练习/上课项目/红包雨/index.html
+++ b/历届学生/fontendsix/项目练习/上课项目/红包雨/index.html
@@ -0,0 +1,176 @@
+<!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,
+        html,
+        h2,
+        h3,
+        h4,
+        h5,
+        h6,
+        h6,
+        p {
+            margin: 0;
+            width: 100%;
+            height: 100%;
+            overflow: hidden;
+        }
+
+        img {
+            width: 70px;
+            height: 90px;
+            position: absolute;
+            top: 0;
+            transition: all 0.1s ease;
+            user-select: none;
+        }
+
+        .dialog {
+            position: fixed;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            top: 0;
+            background: rgb(0 0 0 / 46%);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            z-index: 999;
+        }
+
+        .dialog .title {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            height: 40px;
+        }
+
+        .dialog .content {
+            background: #fff;
+            padding: 10px 19px;
+        }
+
+        .dialog .text {
+            padding: 15px;
+        }
+
+        .hidden {
+            display: none;
+        }
+    </style>
+</head>
+
+<body>
+
+    <div class="dialog hidden">
+        <div class="content">
+            <div class="title">
+                <h2>恭喜中将</h2>
+                <span>x</span>
+            </div>
+            <div class="text">
+                恭喜你，本次抽奖获得了xx折优惠！！！
+            </div>
+        </div>
+    </div>
+</body>
+
+<script>
+
+    // x轴随机产生红包，x距离应该是  屏幕的宽度减去红包的宽度，然后给图片设置left距离
+    // 让红包动起来，让Y轴增大，设置过渡
+    // 超过屏幕删除红包，删除动画
+
+    var clientWidth = document.body.offsetWidth,
+        clientHeight = document.body.offsetHeight;
+
+    var currentHb, createdId;
+
+    function createdHb() {
+        var imgLeft = Math.random() * (clientWidth - 70);
+        var img = document.createElement("img")
+        img.src = "./hb.png"
+        img.style.left = `${imgLeft}px`;
+        img.style.top = `0px`
+
+        img.onclick = () => {
+            currentHb = img;
+            var imgList = document.querySelectorAll("img");
+            imgList.forEach(v => {
+                clearInterval(v.typeId)
+            });
+            clearInterval(createdId)
+            $(".dialog").classList.remove("hidden")
+            probability()
+        }
+
+        $("body").appendChild(img)
+
+        animation(img)
+    }
+
+
+    function animation(el) {
+        el.typeId = setInterval(() => {
+            var oldTop = parseInt(el.style.top);
+            var newTop = oldTop + 10;
+            el.style.top = `${newTop}px`;
+            if (newTop > clientHeight) {
+                $("body").removeChild(el)
+                clearInterval(el.typeId)
+            }
+        }, 80);
+    }
+
+
+    function probability() {
+        var probabilityMums = Number(Math.random().toFixed(1))
+        if (probabilityMums < 0.2) {
+            $(".text").innerText = `恭喜你，${probabilityMums} 本次抽奖获得了 1 折优惠！！！`
+        } else if (probabilityMums >= 0.2 && probabilityMums <= 0.8 ) {
+            $(".text").innerText = `恭喜你，${probabilityMums} 本次抽奖获得了 9 折优惠！！！`
+        } else if (probabilityMums > 0.8) {
+            $(".text").innerText = `恭喜你，${probabilityMums} 本次抽奖获得了 8 折优惠！！！`
+        }
+    }
+
+    $(".title span ").onclick = () => {
+        $(".dialog").classList.add("hidden")
+
+        clearInterval(currentHb.typeId)
+        $("body").removeChild(currentHb)
+
+
+        var imgList = document.querySelectorAll("img");
+        imgList.forEach(v => {
+            animation(v)
+        });
+        autoCreated()
+    }
+
+
+    function autoCreated() {
+        createdId = setInterval(() => {
+            createdHb()
+        }, 1000);
+    }
+
+
+
+    autoCreated();
+
+
+
+    function $(className) {
+        return document.querySelector(className)
+    }
+
+</script>
+
+</html>