feat: 一个简单的小丑插件，点击会播放小丑音乐

owocc · Sep 1, 2024 · 8d94810 · 8d94810
commit 8d94810
Show file tree

Hide file tree

Showing 160 changed files with 861 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,33 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+auto-imports.d.ts
+components.d.ts
+package-lock.json
+yarn.lock
+pnpm-lock.yaml
+.nova
+.fleet
+
+.devcontainer
diff --git a/audio/joker.m4s b/audio/joker.m4s
diff --git a/images/joker-gif/frame_000_delay-0.02s.gif b/images/joker-gif/frame_000_delay-0.02s.gif
diff --git a/images/joker-gif/frame_001_delay-0.02s.gif b/images/joker-gif/frame_001_delay-0.02s.gif
diff --git a/images/joker-gif/frame_002_delay-0.02s.gif b/images/joker-gif/frame_002_delay-0.02s.gif
diff --git a/images/joker-gif/frame_003_delay-0.02s.gif b/images/joker-gif/frame_003_delay-0.02s.gif
diff --git a/images/joker-gif/frame_004_delay-0.02s.gif b/images/joker-gif/frame_004_delay-0.02s.gif
diff --git a/images/joker-gif/frame_005_delay-0.02s.gif b/images/joker-gif/frame_005_delay-0.02s.gif
diff --git a/images/joker-gif/frame_006_delay-0.02s.gif b/images/joker-gif/frame_006_delay-0.02s.gif
diff --git a/images/joker-gif/frame_007_delay-0.02s.gif b/images/joker-gif/frame_007_delay-0.02s.gif
diff --git a/images/joker-gif/frame_008_delay-0.02s.gif b/images/joker-gif/frame_008_delay-0.02s.gif
diff --git a/images/joker-gif/frame_009_delay-0.02s.gif b/images/joker-gif/frame_009_delay-0.02s.gif
diff --git a/images/joker-gif/frame_010_delay-0.02s.gif b/images/joker-gif/frame_010_delay-0.02s.gif
diff --git a/images/joker-gif/frame_011_delay-0.02s.gif b/images/joker-gif/frame_011_delay-0.02s.gif
diff --git a/images/joker-gif/frame_012_delay-0.02s.gif b/images/joker-gif/frame_012_delay-0.02s.gif
diff --git a/images/joker-gif/frame_013_delay-0.02s.gif b/images/joker-gif/frame_013_delay-0.02s.gif
diff --git a/images/joker-gif/frame_014_delay-0.02s.gif b/images/joker-gif/frame_014_delay-0.02s.gif
diff --git a/images/joker-gif/frame_015_delay-0.02s.gif b/images/joker-gif/frame_015_delay-0.02s.gif
diff --git a/images/joker-gif/frame_016_delay-0.02s.gif b/images/joker-gif/frame_016_delay-0.02s.gif
diff --git a/images/joker-gif/frame_017_delay-0.02s.gif b/images/joker-gif/frame_017_delay-0.02s.gif
diff --git a/images/joker-gif/frame_018_delay-0.02s.gif b/images/joker-gif/frame_018_delay-0.02s.gif
diff --git a/images/joker-gif/frame_019_delay-0.02s.gif b/images/joker-gif/frame_019_delay-0.02s.gif
diff --git a/images/joker-gif/frame_020_delay-0.02s.gif b/images/joker-gif/frame_020_delay-0.02s.gif
diff --git a/images/joker-gif/frame_021_delay-0.02s.gif b/images/joker-gif/frame_021_delay-0.02s.gif
diff --git a/images/joker-gif/frame_022_delay-0.02s.gif b/images/joker-gif/frame_022_delay-0.02s.gif
diff --git a/images/joker-gif/frame_023_delay-0.02s.gif b/images/joker-gif/frame_023_delay-0.02s.gif
diff --git a/images/joker-gif/frame_024_delay-0.02s.gif b/images/joker-gif/frame_024_delay-0.02s.gif
diff --git a/images/joker-gif/frame_025_delay-0.02s.gif b/images/joker-gif/frame_025_delay-0.02s.gif
diff --git a/images/joker-gif/frame_026_delay-0.02s.gif b/images/joker-gif/frame_026_delay-0.02s.gif
diff --git a/images/joker-gif/frame_027_delay-0.02s.gif b/images/joker-gif/frame_027_delay-0.02s.gif
diff --git a/images/joker-gif/frame_028_delay-0.02s.gif b/images/joker-gif/frame_028_delay-0.02s.gif
diff --git a/images/joker-gif/frame_029_delay-0.02s.gif b/images/joker-gif/frame_029_delay-0.02s.gif
diff --git a/images/joker-gif/frame_030_delay-0.02s.gif b/images/joker-gif/frame_030_delay-0.02s.gif
diff --git a/images/joker-gif/frame_031_delay-0.02s.gif b/images/joker-gif/frame_031_delay-0.02s.gif
diff --git a/images/joker-gif/frame_032_delay-0.02s.gif b/images/joker-gif/frame_032_delay-0.02s.gif
diff --git a/images/joker-gif/frame_033_delay-0.02s.gif b/images/joker-gif/frame_033_delay-0.02s.gif
diff --git a/images/joker-gif/frame_034_delay-0.02s.gif b/images/joker-gif/frame_034_delay-0.02s.gif
diff --git a/images/joker-gif/frame_035_delay-0.02s.gif b/images/joker-gif/frame_035_delay-0.02s.gif
diff --git a/images/joker-gif/frame_036_delay-0.02s.gif b/images/joker-gif/frame_036_delay-0.02s.gif
diff --git a/images/joker-gif/frame_037_delay-0.02s.gif b/images/joker-gif/frame_037_delay-0.02s.gif
diff --git a/images/joker-gif/frame_038_delay-0.02s.gif b/images/joker-gif/frame_038_delay-0.02s.gif
diff --git a/images/joker-gif/frame_039_delay-0.02s.gif b/images/joker-gif/frame_039_delay-0.02s.gif
diff --git a/images/joker-gif/frame_040_delay-0.02s.gif b/images/joker-gif/frame_040_delay-0.02s.gif
diff --git a/images/joker-gif/frame_041_delay-0.02s.gif b/images/joker-gif/frame_041_delay-0.02s.gif
diff --git a/images/joker-gif/frame_042_delay-0.02s.gif b/images/joker-gif/frame_042_delay-0.02s.gif
diff --git a/images/joker-gif/frame_043_delay-0.02s.gif b/images/joker-gif/frame_043_delay-0.02s.gif
diff --git a/images/joker-gif/frame_044_delay-0.02s.gif b/images/joker-gif/frame_044_delay-0.02s.gif
diff --git a/images/joker-gif/frame_045_delay-0.02s.gif b/images/joker-gif/frame_045_delay-0.02s.gif
diff --git a/images/joker-gif/frame_046_delay-0.02s.gif b/images/joker-gif/frame_046_delay-0.02s.gif
diff --git a/images/joker-gif/frame_047_delay-0.02s.gif b/images/joker-gif/frame_047_delay-0.02s.gif
diff --git a/images/joker-gif/frame_048_delay-0.02s.gif b/images/joker-gif/frame_048_delay-0.02s.gif
diff --git a/images/joker-gif/frame_049_delay-0.02s.gif b/images/joker-gif/frame_049_delay-0.02s.gif
diff --git a/images/joker-gif/frame_050_delay-0.02s.gif b/images/joker-gif/frame_050_delay-0.02s.gif
diff --git a/images/joker-gif/frame_051_delay-0.02s.gif b/images/joker-gif/frame_051_delay-0.02s.gif
diff --git a/images/joker-gif/frame_052_delay-0.02s.gif b/images/joker-gif/frame_052_delay-0.02s.gif
diff --git a/images/joker-gif/frame_053_delay-0.02s.gif b/images/joker-gif/frame_053_delay-0.02s.gif
diff --git a/images/joker-gif/frame_054_delay-0.02s.gif b/images/joker-gif/frame_054_delay-0.02s.gif
diff --git a/images/joker-gif/frame_055_delay-0.02s.gif b/images/joker-gif/frame_055_delay-0.02s.gif
diff --git a/images/joker-gif/frame_056_delay-0.02s.gif b/images/joker-gif/frame_056_delay-0.02s.gif
diff --git a/images/joker-gif/frame_057_delay-0.02s.gif b/images/joker-gif/frame_057_delay-0.02s.gif
diff --git a/images/joker-gif/frame_058_delay-0.02s.gif b/images/joker-gif/frame_058_delay-0.02s.gif
diff --git a/images/joker-gif/frame_059_delay-0.02s.gif b/images/joker-gif/frame_059_delay-0.02s.gif
diff --git a/images/joker-gif/frame_060_delay-0.02s.gif b/images/joker-gif/frame_060_delay-0.02s.gif
diff --git a/images/joker-gif/frame_061_delay-0.02s.gif b/images/joker-gif/frame_061_delay-0.02s.gif
diff --git a/images/joker-gif/frame_062_delay-0.02s.gif b/images/joker-gif/frame_062_delay-0.02s.gif
diff --git a/images/joker-gif/frame_063_delay-0.02s.gif b/images/joker-gif/frame_063_delay-0.02s.gif
diff --git a/images/joker-gif/frame_064_delay-0.02s.gif b/images/joker-gif/frame_064_delay-0.02s.gif
diff --git a/images/joker-gif/frame_065_delay-0.02s.gif b/images/joker-gif/frame_065_delay-0.02s.gif
diff --git a/images/joker-gif/frame_066_delay-0.02s.gif b/images/joker-gif/frame_066_delay-0.02s.gif
diff --git a/images/joker-gif/frame_067_delay-0.02s.gif b/images/joker-gif/frame_067_delay-0.02s.gif
diff --git a/images/joker-gif/frame_068_delay-0.02s.gif b/images/joker-gif/frame_068_delay-0.02s.gif
diff --git a/images/joker-gif/frame_069_delay-0.02s.gif b/images/joker-gif/frame_069_delay-0.02s.gif
diff --git a/images/joker-gif/frame_070_delay-0.02s.gif b/images/joker-gif/frame_070_delay-0.02s.gif
diff --git a/images/joker-gif/frame_071_delay-0.02s.gif b/images/joker-gif/frame_071_delay-0.02s.gif
diff --git a/images/joker-gif/frame_072_delay-0.02s.gif b/images/joker-gif/frame_072_delay-0.02s.gif
diff --git a/images/joker-gif/frame_073_delay-0.02s.gif b/images/joker-gif/frame_073_delay-0.02s.gif
diff --git a/images/joker-gif/frame_074_delay-0.02s.gif b/images/joker-gif/frame_074_delay-0.02s.gif
diff --git a/images/joker-gif/frame_075_delay-0.02s.gif b/images/joker-gif/frame_075_delay-0.02s.gif
diff --git a/images/joker-gif/frame_076_delay-0.02s.gif b/images/joker-gif/frame_076_delay-0.02s.gif
diff --git a/images/joker-gif/frame_077_delay-0.02s.gif b/images/joker-gif/frame_077_delay-0.02s.gif
diff --git a/images/joker-gif/frame_078_delay-0.02s.gif b/images/joker-gif/frame_078_delay-0.02s.gif
diff --git a/images/joker-gif/frame_079_delay-0.02s.gif b/images/joker-gif/frame_079_delay-0.02s.gif
diff --git a/images/joker-gif/frame_080_delay-0.02s.gif b/images/joker-gif/frame_080_delay-0.02s.gif
diff --git a/images/joker-gif/frame_081_delay-0.02s.gif b/images/joker-gif/frame_081_delay-0.02s.gif
diff --git a/images/joker-gif/frame_082_delay-0.02s.gif b/images/joker-gif/frame_082_delay-0.02s.gif
diff --git a/images/joker-gif/frame_083_delay-0.02s.gif b/images/joker-gif/frame_083_delay-0.02s.gif
diff --git a/images/joker-gif/frame_084_delay-0.02s.gif b/images/joker-gif/frame_084_delay-0.02s.gif
diff --git a/images/joker-gif/frame_085_delay-0.02s.gif b/images/joker-gif/frame_085_delay-0.02s.gif
diff --git a/images/joker-gif/frame_086_delay-0.02s.gif b/images/joker-gif/frame_086_delay-0.02s.gif
diff --git a/images/joker-gif/frame_087_delay-0.02s.gif b/images/joker-gif/frame_087_delay-0.02s.gif
diff --git a/images/joker-gif/frame_088_delay-0.02s.gif b/images/joker-gif/frame_088_delay-0.02s.gif
diff --git a/images/joker-gif/frame_089_delay-0.02s.gif b/images/joker-gif/frame_089_delay-0.02s.gif
diff --git a/images/joker-gif/frame_090_delay-0.02s.gif b/images/joker-gif/frame_090_delay-0.02s.gif
diff --git a/images/joker-gif/frame_091_delay-0.02s.gif b/images/joker-gif/frame_091_delay-0.02s.gif
diff --git a/images/joker-gif/frame_092_delay-0.02s.gif b/images/joker-gif/frame_092_delay-0.02s.gif
diff --git a/images/joker-gif/frame_093_delay-0.02s.gif b/images/joker-gif/frame_093_delay-0.02s.gif
diff --git a/images/joker-gif/frame_094_delay-0.02s.gif b/images/joker-gif/frame_094_delay-0.02s.gif
diff --git a/images/joker-gif/frame_095_delay-0.02s.gif b/images/joker-gif/frame_095_delay-0.02s.gif
diff --git a/images/joker-gif/frame_096_delay-0.02s.gif b/images/joker-gif/frame_096_delay-0.02s.gif
diff --git a/images/joker-gif/frame_097_delay-0.02s.gif b/images/joker-gif/frame_097_delay-0.02s.gif
diff --git a/images/joker-gif/frame_098_delay-0.02s.gif b/images/joker-gif/frame_098_delay-0.02s.gif
diff --git a/images/joker-gif/frame_099_delay-0.02s.gif b/images/joker-gif/frame_099_delay-0.02s.gif
diff --git a/images/joker-gif/frame_100_delay-0.02s.gif b/images/joker-gif/frame_100_delay-0.02s.gif
diff --git a/images/joker-gif/frame_101_delay-0.02s.gif b/images/joker-gif/frame_101_delay-0.02s.gif
diff --git a/images/joker-gif/frame_102_delay-0.02s.gif b/images/joker-gif/frame_102_delay-0.02s.gif
diff --git a/images/joker-gif/frame_103_delay-0.02s.gif b/images/joker-gif/frame_103_delay-0.02s.gif
diff --git a/images/joker-gif/frame_104_delay-0.02s.gif b/images/joker-gif/frame_104_delay-0.02s.gif
diff --git a/images/joker-gif/frame_105_delay-0.02s.gif b/images/joker-gif/frame_105_delay-0.02s.gif
diff --git a/images/joker-gif/frame_106_delay-0.02s.gif b/images/joker-gif/frame_106_delay-0.02s.gif
diff --git a/images/joker-gif/frame_107_delay-0.02s.gif b/images/joker-gif/frame_107_delay-0.02s.gif
diff --git a/images/joker-gif/frame_108_delay-0.02s.gif b/images/joker-gif/frame_108_delay-0.02s.gif
diff --git a/images/joker-gif/frame_109_delay-0.02s.gif b/images/joker-gif/frame_109_delay-0.02s.gif
diff --git a/images/joker-gif/frame_110_delay-0.02s.gif b/images/joker-gif/frame_110_delay-0.02s.gif
diff --git a/images/joker-gif/frame_111_delay-0.02s.gif b/images/joker-gif/frame_111_delay-0.02s.gif
diff --git a/images/joker-gif/frame_112_delay-0.02s.gif b/images/joker-gif/frame_112_delay-0.02s.gif
diff --git a/images/joker-gif/frame_113_delay-0.02s.gif b/images/joker-gif/frame_113_delay-0.02s.gif
diff --git a/images/joker-gif/frame_114_delay-0.02s.gif b/images/joker-gif/frame_114_delay-0.02s.gif
diff --git a/images/joker-gif/frame_115_delay-0.02s.gif b/images/joker-gif/frame_115_delay-0.02s.gif
diff --git a/images/joker-gif/frame_116_delay-0.02s.gif b/images/joker-gif/frame_116_delay-0.02s.gif
diff --git a/images/joker-gif/frame_117_delay-0.02s.gif b/images/joker-gif/frame_117_delay-0.02s.gif
diff --git a/images/joker-gif/frame_118_delay-0.02s.gif b/images/joker-gif/frame_118_delay-0.02s.gif
diff --git a/images/joker-gif/frame_119_delay-0.02s.gif b/images/joker-gif/frame_119_delay-0.02s.gif
diff --git a/images/joker-gif/frame_120_delay-0.02s.gif b/images/joker-gif/frame_120_delay-0.02s.gif
diff --git a/images/joker-gif/frame_121_delay-0.02s.gif b/images/joker-gif/frame_121_delay-0.02s.gif
diff --git a/images/joker-gif/frame_122_delay-0.02s.gif b/images/joker-gif/frame_122_delay-0.02s.gif
diff --git a/images/joker-gif/frame_123_delay-0.02s.gif b/images/joker-gif/frame_123_delay-0.02s.gif
diff --git a/images/joker-gif/frame_124_delay-0.02s.gif b/images/joker-gif/frame_124_delay-0.02s.gif
diff --git a/images/joker-gif/frame_125_delay-0.02s.gif b/images/joker-gif/frame_125_delay-0.02s.gif
diff --git a/images/joker-gif/frame_126_delay-0.02s.gif b/images/joker-gif/frame_126_delay-0.02s.gif
diff --git a/images/joker-gif/frame_127_delay-0.02s.gif b/images/joker-gif/frame_127_delay-0.02s.gif
diff --git a/images/joker-gif/frame_128_delay-0.02s.gif b/images/joker-gif/frame_128_delay-0.02s.gif
diff --git a/images/joker-gif/frame_129_delay-0.02s.gif b/images/joker-gif/frame_129_delay-0.02s.gif
diff --git a/images/joker-gif/frame_130_delay-0.02s.gif b/images/joker-gif/frame_130_delay-0.02s.gif
diff --git a/images/joker-gif/frame_131_delay-0.02s.gif b/images/joker-gif/frame_131_delay-0.02s.gif
diff --git a/images/joker-gif/frame_132_delay-0.02s.gif b/images/joker-gif/frame_132_delay-0.02s.gif
diff --git a/images/joker-gif/frame_133_delay-0.02s.gif b/images/joker-gif/frame_133_delay-0.02s.gif
diff --git a/images/joker-gif/frame_134_delay-0.02s.gif b/images/joker-gif/frame_134_delay-0.02s.gif
diff --git a/images/joker-gif/frame_135_delay-0.02s.gif b/images/joker-gif/frame_135_delay-0.02s.gif
diff --git a/images/joker-gif/frame_136_delay-0.02s.gif b/images/joker-gif/frame_136_delay-0.02s.gif
diff --git a/images/joker-gif/frame_137_delay-0.02s.gif b/images/joker-gif/frame_137_delay-0.02s.gif
diff --git a/images/joker-gif/frame_138_delay-0.02s.gif b/images/joker-gif/frame_138_delay-0.02s.gif
diff --git a/images/joker-gif/frame_139_delay-0.02s.gif b/images/joker-gif/frame_139_delay-0.02s.gif
diff --git a/images/joker-gif/frame_140_delay-0.02s.gif b/images/joker-gif/frame_140_delay-0.02s.gif
diff --git a/images/joker-gif/frame_141_delay-0.02s.gif b/images/joker-gif/frame_141_delay-0.02s.gif
diff --git a/images/joker-gif/frame_142_delay-0.02s.gif b/images/joker-gif/frame_142_delay-0.02s.gif
diff --git a/images/joker-gif/frame_143_delay-0.02s.gif b/images/joker-gif/frame_143_delay-0.02s.gif
diff --git a/images/joker-gif/frame_144_delay-0.02s.gif b/images/joker-gif/frame_144_delay-0.02s.gif
diff --git a/images/joker-gif/frame_145_delay-0.02s.gif b/images/joker-gif/frame_145_delay-0.02s.gif
diff --git a/images/joker-gif/frame_146_delay-0.02s.gif b/images/joker-gif/frame_146_delay-0.02s.gif
diff --git a/images/joker-gif/frame_147_delay-0.02s.gif b/images/joker-gif/frame_147_delay-0.02s.gif
diff --git a/images/joker-gif/frame_148_delay-0.02s.gif b/images/joker-gif/frame_148_delay-0.02s.gif
diff --git a/images/joker-gif/frame_149_delay-0.02s.gif b/images/joker-gif/frame_149_delay-0.02s.gif
diff --git a/images/joker.png b/images/joker.png
diff --git a/joker.html b/joker.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>小丑的结局总是千篇一律</title>
+    <link rel="stylesheet" href="./styles/tailwind.css" />
+  </head>
+  <body>
+    <div class="min-w-44 py-4 border flex-col flex items-center justify-center">
+      <div class="h-44 w-44 cursor-pointer" id="joker-gif-container">
+        <img
+          src="/images/joker-gif/frame_000_delay-0.02s.gif"
+          id="joker"
+          class="active:scale-95 transition-transform h-full w-full"
+          alt=""
+        />
+      </div>
+      <button
+      id="download-img-btn"
+        class="border p-1 rounded-md group active:scale-95 transition-all"
+      >
+        🤡
+        <span class="group-hover:hidden"> 请点击小丑 </span>
+        <span class="hidden group-hover:inline">下载当前图片</span>
+      </button>
+      <audio loop id="joker-audio" src="./audio/joker.m4s" />
+    </div>
+  </body>
+
+  <script src="./js/joker.js"></script>
+</html>
diff --git a/js/joker.js b/js/joker.js
@@ -0,0 +1,97 @@
+window.addEventListener("load", () => {
+  const createJokerGif = () => {
+    const img = document.createElement("img");
+    img.src = "./images/joker.gif";
+    img.id = "joker-gif";
+    // <img src="./images/joker.gif" id="joker-gif" class="hidden group-hover:block" />
+  };
+
+  const timeInfo = {
+    star: 0,
+    end: 149,
+    current: 0,
+    status: false,
+  };
+
+  const updateTime = (current) => {
+    timeInfo.current = current;
+  };
+
+  const jokerGifPath = (time) => {
+    // 始终让时间为三位数
+    if (time < 10) {
+      time = `00${time}`;
+    } else if (time < 100) {
+      time = `0${time}`;
+    }
+    return `/images/joker-gif/frame_${time}_delay-0.02s.gif`;
+  };
+
+  const getStyle = (path) => {
+    return `background-image: url(${path});`;
+  };
+
+  //设置定时器，每隔0.02s更新一次gif
+
+  //这里会有白色闪烁，因为图片是从0开始的，所以会有一瞬间的白色，需要预先把图片加载好
+  //存储到数组中，然后再加载,存储为base64
+  const images = [];
+
+  const reloadImages = () => {
+    for (let i = 0; i <= timeInfo.end; i++) {
+      const img = new Image();
+      img.src = jokerGifPath(i);
+      img.onload = () => {
+        images.push(jokerGifPath(i));
+      };
+    }
+  };
+  reloadImages();
+  let autoUpdate;
+
+  const autoPlayGif = () => {
+    autoUpdate = setInterval(() => {
+      if (timeInfo.current < timeInfo.end) {
+        console.log(timeInfo.current);
+        updateTime(timeInfo.current + 1);
+      } else {
+        updateTime(timeInfo.star);
+      }
+      jokerImg.src = jokerGifPath(timeInfo.current);
+    }, 20);
+  };
+
+  const jokerImg = document.querySelector("#joker");
+  const jokerAudio = document.querySelector("#joker-audio");
+
+  const pause = () => {
+    clearInterval(autoUpdate);
+    jokerAudio.pause();
+  };
+  const play = () => {
+    autoPlayGif();
+    //   jokerAudio.currentTime = 0;
+    jokerAudio.play();
+  };
+
+  jokerImg.addEventListener("click", () => {
+    //重置音频时间
+
+    //播放gif和暂停gif
+    if (timeInfo.status) {
+      pause();
+    } else {
+      play();
+    }
+    timeInfo.status = !timeInfo.status;
+  });
+  const downloadJokerBtn = document.querySelector('#download-img-btn')
+  downloadJokerBtn.addEventListener('click',()=>{
+    pause()
+    const a = document.createElement('a')
+    a.href = images[timeInfo.current]
+    a.download = '自怕照.gif'
+    a.click()
+
+  })
+});
diff --git a/manifest.json b/manifest.json
@@ -0,0 +1,10 @@
+{
+  "manifest_version": 3,
+  "name": "Joker",
+  "description": "你在照镜子吗",
+  "version": "1.0",
+  "action": {
+    "default_popup": "joker.html",
+    "default_icon": "images/joker.png"
+  }
+}
diff --git a/package.json b/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "jocker",
+  "version": "1.0.0",
+  "main": "index.js",
+  "scripts": {
+    "dev": "tailwindcss -i ./styles/input.css -o ./styles/tailwind.css --watch"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "description": "",
+  "devDependencies": {
+    "tailwindcss": "^3.4.10"
+  }
+}
diff --git a/styles/input.css b/styles/input.css
@@ -0,0 +1,9 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+* {
+  user-select: none;
+
+  -webkit-user-drag: none;
+}