From a1da1065e23fe8b4045b2daed5e67530a09a01f3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Damon=E5=B0=8F=E6=99=BA?= <826444535@qq.com>
Date: Mon, 4 Nov 2024 14:45:01 +0000
Subject: [PATCH] =?UTF-8?q?add=20=E4=B9=9D=E5=AE=AB=E6=A0=BC=E7=BF=BB?=
 =?UTF-8?q?=E7=89=8C=E6=8A=BD=E5=A5=96/index.html.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Damon小智 <826444535@qq.com>
---
 .../index.html"                               | 135 ++++++++++++++++++
 1 file changed, 135 insertions(+)
 create mode 100644 "\344\271\235\345\256\253\346\240\274\347\277\273\347\211\214\346\212\275\345\245\226/index.html"
diff --git "a/\344\271\235\345\256\253\346\240\274\347\277\273\347\211\214\346\212\275\345\245\226/index.html" "b/\344\271\235\345\256\253\346\240\274\347\277\273\347\211\214\346\212\275\345\245\226/index.html"
new file mode 100644
index 0000000..d09ffab
--- /dev/null
+++ "b/\344\271\235\345\256\253\346\240\274\347\277\273\347\211\214\346\212\275\345\245\226/index.html"
@@ -0,0 +1,135 @@
+<!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>JS9宫格翻牌抽奖</title>
+    <style>
+      .title {
+        text-align: center;
+      }
+      .box {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        width: 330px;
+        margin: 0 auto;
+      }
+      .item {
+        position: relative;
+        margin: 5px;
+        width: 100px;
+        height: 100px;
+      }
+      .style1,
+      .style2 {
+        position: absolute;
+        left: 0;
+        top: 0;
+        bottom: 0;
+        right: 0;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        border-radius: 5px;
+        text-align: center;
+        transition: transform 0.4s;
+      }
+      .style1 {
+        background-color: #ff8800;
+        color: #fff;
+      }
+      .style2 {
+        color: #ff8800;
+        border: 1px solid #ff8800;
+        padding: 0 10px;
+        transform: scaleX(0);
+        background-color: #ffe6c9;
+      }
+      .hide {
+        transform: scaleX(0);
+      }
+      .show {
+        transform: scaleX(1);
+      }
+      .show-result {
+        transform: scaleX(1);
+        opacity: 0.5;
+      }
+    </style>
+  </head>
+  <style></style>
+  
+<body>		
+    <div class="title">可抽奖<label id="count">0</label>次</div>
+    <div class="box"></div>
+  </body>  <script src="../iframe_autowh.js"></script>
+  <script>
+    // 奖品列表
+    const list = [
+      { id: 1, name: "1元优惠券", is: true },
+      { id: 2, name: "10元优惠券", is: true },
+      { id: 3, name: "谢谢惠顾", is: true },
+      { id: 4, name: "豪华电动车" },
+      { id: 5, name: "1w购物券" },
+      { id: 6, name: "5w购物券" },
+      { id: 7, name: "豪华轿车" },
+      { id: 8, name: "房子一套" },
+      { id: 9, name: "顶配笔记本" },
+    ].sort((v) => Math.random() - 0.5);
+    // 中奖项
+    const isArr = list.filter((v) => v.is);
+    // 非中奖项
+    const noArr = list.filter((v) => !v.is);
+    // 抽奖次数
+    let count = 3;
+    const box = document.querySelector(".box");
+    const countEL = document.querySelector("#count");
+    countEL.innerHTML = count;
+    box.innerHTML = list
+      .map((v) => {
+        return `<div class="item" onclick="fp(this)">
+            <div class="style1">抽奖</div>
+            <div class="style2"></div>
+        </div>`;
+      })
+      .join("");
+    // 翻牌抽奖
+    const fp = (me) => {
+      if (count === 0) {
+        return;
+      }
+      me.querySelector(".style1").classList.add("hide");
+      // 抽奖动画
+      setTimeout(() => {
+        // 从非中奖项中取最后一个，并从数组中移除该项
+        const item = isArr.pop();
+        const style2 = me.querySelector(".style2");
+        style2.innerHTML = item.name;
+        style2.classList.add("show");
+      }, 400);
+      count--;
+      countEL.innerHTML = count;
+      // 当抽奖次数为0的时候，就把剩余的奖项全部展示出来
+      if (count === 0) {
+        setTimeout(() => {
+          box.querySelectorAll(".style1").forEach((v) => {
+            v.classList.add("hide");
+            if (v.nextElementSibling.className.indexOf("show") === -1) {
+              const item = noArr.pop();
+              v.nextElementSibling.innerHTML = item.name;
+            }
+          });
+          setTimeout(() => {
+            box.querySelectorAll(".style2").forEach((v) => {
+              if (v.className.indexOf("show") === -1) {
+                v.classList.add("show-result");
+              }
+            });
+          }, 400);
+        }, 1000);
+      }
+    };
+  </script>
+</html>
-- 
Gitee

