closed #7

linyisonger · Oct 12, 2024 · 7de0f61 · 7de0f61
1 parent 9f30e0e
commit 7de0f61
Show file tree

Hide file tree

Showing 128 changed files with 294 additions and 16 deletions.
diff --git a/078.你更喜欢谁.html b/078.你更喜欢谁.html
@@ -8,11 +8,13 @@
     <style>
       .pk-container {
         display: flex;
-        align-items: center;
+        justify-content: center;
+        flex-direction: column;
         height: 100vh;
         max-width: 400px;
         width: 100%;
         overflow: hidden;
+        user-select: none;
       }
 
       .pk-cards {
@@ -23,10 +25,11 @@
 
       .pk-card {
         flex: 1;
-        display: flex;
+        display: inline-flex;
         align-items: center;
         justify-content: center;
         flex-direction: column;
+        position: relative;
       }
 
       .pk-card img {
@@ -41,29 +44,38 @@
         padding: 0 20px;
       }
 
-      .moveIn {
+      .leftCardMoveIn {
+        animation-name: leftCardMoveIn;
         animation-duration: 0.5s;
         animation-timing-function: ease-in-out;
         animation-fill-mode: forwards;
       }
-
-      .pk-card {
-        animation-name: leftCardMoveIn;
+      .leftCardMoveOut {
+        animation-name: leftCardMoveOut;
+        animation-duration: 0.5s;
+        animation-timing-function: ease-in-out;
+        animation-fill-mode: forwards;
       }
 
-      .pk-card:last-child {
+      .rightCardMoveIn {
         animation-name: rightCardMoveIn;
+        animation-duration: 0.5s;
+        animation-timing-function: ease-in-out;
+        animation-fill-mode: forwards;
       }
 
-      .pk-vs {
-        animation-name: vsFadeMoveIn;
+      .rightCardMoveOut {
+        animation-name: rightCardMoveOut;
+        animation-duration: 0.5s;
+        animation-timing-function: ease-in-out;
+        animation-fill-mode: forwards;
       }
 
-      .moveOut {
+      .pk-vs {
+        animation-name: vsFadeMoveIn;
         animation-duration: 0.5s;
         animation-timing-function: ease-in-out;
         animation-fill-mode: forwards;
-        animation-direction: reverse;
       }
 
       .like-btn {
@@ -79,7 +91,14 @@
           transform: translateX(0);
         }
       }
-
+      @keyframes leftCardMoveOut {
+        0% {
+          transform: translateX(0);
+        }
+        100% {
+          transform: translateX(-200px);
+        }
+      }
       @keyframes rightCardMoveIn {
         0% {
           transform: translateX(200px);
@@ -88,6 +107,14 @@
           transform: translateX(0);
         }
       }
+      @keyframes rightCardMoveOut {
+        0% {
+          transform: translateX(0);
+        }
+        100% {
+          transform: translateX(200px);
+        }
+      }
 
       @keyframes vsFadeMoveIn {
         0% {
@@ -99,22 +126,147 @@
           transform: translateY(0);
         }
       }
+
+      .pk-btns {
+        margin-top: 20px;
+        display: flex;
+        justify-content: flex-end;
+      }
+      .confirm-btn {
+        display: inline-block;
+        padding: 20px 40px;
+        background-color: #3575cf;
+        color: azure;
+        border-radius: 50px;
+        cursor: pointer;
+        user-select: none;
+      }
+      .confirm-btn:active {
+        opacity: 0.7;
+      }
+
+      .pk-card.like::after {
+        position: absolute;
+        border: 10px solid #e13b1e;
+        content: "";
+        left: 0;
+        top: 0;
+        bottom: 0;
+        right: 0;
+        user-select: none;
+      }
+      .pk-card span {
+        position: absolute;
+        left: 12px;
+        bottom: 12px;
+        width: 20px;
+        color: #fff;
+        text-shadow: 2px 2px #000000;
+      }
     </style>
   </head>
 
   <body>
     <div class="pk-container">
+      <h2>你更喜欢哪个？</h2>
       <div class="pk-cards">
-        <div class="pk-card moveIn">
+        <div class="pk-card leftCardMoveIn">
           <img src="./assets/movie-poster/m-byxz.jpg" />
+          <span>xxx</span>
         </div>
-        <div class="pk-vs moveIn">VS</div>
-        <div class="pk-card moveIn">
+        <div class="pk-vs">VS</div>
+        <div class="pk-card rightCardMoveIn">
           <img src="./assets/movie-poster/m-dbs.jpg" />
+          <span>xxx</span>
         </div>
       </div>
+      <div class="pk-btns">
+        <div class="confirm-btn">确定</div>
+      </div>
     </div>
 
-    <script type="module"></script>
+    <script type="module">
+      import { Randoms } from "https://gcore.jsdelivr.net/npm/@3r/tool/lib/randoms.js";
+      // 加载配置数据
+      fetch("./assets/stars/label.txt")
+        .then((res) => res.text())
+        .then((res) => {
+          let stars = [];
+          let label = res.split("\r\n").filter((a) => a);
+
+          stars = label.map((n) => {
+            let tmpArr = n.split("_");
+            return {
+              name: tmpArr[2],
+              img: `./assets/stars/${tmpArr[1]}.jpg`,
+            };
+          });
+
+          // 卡片元素
+          let cardDom = document.querySelectorAll(".pk-card");
+          // 随机抽取10条数据
+          let pkStars = Randoms.getDisorganizeArray(stars).slice(0, 10);
+          // 左/右卡片
+          let leftCardDom = cardDom.item(0);
+          let rightCardDom = cardDom.item(1);
+          let vsTextDom = document.querySelector(".pk-vs");
+          // 确认按钮
+          let confirmBtnDom = document.querySelector(".confirm-btn");
+
+          nextStar(leftCardDom);
+          nextStar(rightCardDom);
+          // 下一个明星
+          function nextStar(dom) {
+            let star = pkStars.shift();
+            let animName =
+              dom === leftCardDom ? "leftCardMove" : "rightCardMove";
+
+            dom.classList.add(`${animName}Out`);
+            dom.classList.remove(`${animName}In`);
+
+            if (!star) {
+              console.log("对比结束");
+              setTimeout(() => {
+                dom.remove();
+                vsTextDom.remove();
+                confirmBtnDom.remove();
+                document
+                  .querySelector(".pk-card.like")
+                  .classList.remove("like");
+              }, 0.5);
+              return;
+            }
+
+            setTimeout(() => {
+              let img = dom.querySelector("img");
+              let span = dom.querySelector("span");
+              img.setAttribute("src", star.img);
+              span.textContent = star.name;
+              dom.classList.add(`${animName}In`);
+              dom.classList.remove(`${animName}Out`);
+            }, 0.5);
+          }
+
+          leftCardDom.addEventListener("click", (ev) => {
+            rightCardDom.classList.remove("like");
+            leftCardDom.classList.add("like");
+          });
+
+          rightCardDom.addEventListener("click", (ev) => {
+            leftCardDom.classList.remove("like");
+            rightCardDom.classList.add("like");
+          });
+
+          confirmBtnDom.addEventListener("click", (ev) => {
+            if (leftCardDom.classList.contains("like")) {
+              nextStar(rightCardDom);
+            } else if (rightCardDom.classList.contains("like")) {
+              nextStar(leftCardDom);
+            }
+          });
+          console.log(cardDom, pkStars);
+          console.log(stars);
+        });
+    </script>
   </body>
 </html>
diff --git a/assets/stars/baibaihe.jpg b/assets/stars/baibaihe.jpg
diff --git a/assets/stars/bailu.jpg b/assets/stars/bailu.jpg
diff --git a/assets/stars/caiwenjing.jpg b/assets/stars/caiwenjing.jpg
diff --git a/assets/stars/chenshu.jpg b/assets/stars/chenshu.jpg
diff --git a/assets/stars/chenyuqi.jpg b/assets/stars/chenyuqi.jpg
diff --git a/assets/stars/chenzihan.jpg b/assets/stars/chenzihan.jpg
diff --git a/assets/stars/dengjiajia.jpg b/assets/stars/dengjiajia.jpg
diff --git a/assets/stars/dilireba.jpg b/assets/stars/dilireba.jpg
diff --git a/assets/stars/dongxuan.jpg b/assets/stars/dongxuan.jpg
diff --git a/assets/stars/gaolu.jpg b/assets/stars/gaolu.jpg
diff --git a/assets/stars/gaoyuanyuan.jpg b/assets/stars/gaoyuanyuan.jpg
diff --git a/assets/stars/guanxiaotong.jpg b/assets/stars/guanxiaotong.jpg
diff --git a/assets/stars/gulinuozha.jpg b/assets/stars/gulinuozha.jpg
diff --git a/assets/stars/hailu.jpg b/assets/stars/hailu.jpg
diff --git a/assets/stars/haiqing.jpg b/assets/stars/haiqing.jpg
diff --git a/assets/stars/hanxue.jpg b/assets/stars/hanxue.jpg
diff --git a/assets/stars/haolei.jpg b/assets/stars/haolei.jpg
diff --git a/assets/stars/huangshengyi.jpg b/assets/stars/huangshengyi.jpg
diff --git a/assets/stars/huangyi.jpg b/assets/stars/huangyi.jpg
diff --git a/assets/stars/hubingqing.jpg b/assets/stars/hubingqing.jpg
diff --git a/assets/stars/hujing.jpg b/assets/stars/hujing.jpg
diff --git a/assets/stars/huosiyan.jpg b/assets/stars/huosiyan.jpg
diff --git a/assets/stars/jialing.jpg b/assets/stars/jialing.jpg
diff --git a/assets/stars/jiangmengjie.jpg b/assets/stars/jiangmengjie.jpg
diff --git a/assets/stars/jiangqinqin.jpg b/assets/stars/jiangqinqin.jpg
diff --git a/assets/stars/jiangshuying.jpg b/assets/stars/jiangshuying.jpg
diff --git a/assets/stars/jiangxin.jpg b/assets/stars/jiangxin.jpg
diff --git a/assets/stars/jiangyingrong.jpg b/assets/stars/jiangyingrong.jpg
diff --git a/assets/stars/jiangyiyan.jpg b/assets/stars/jiangyiyan.jpg
diff --git a/assets/stars/jiangyiyi.jpg b/assets/stars/jiangyiyi.jpg
diff --git a/assets/stars/jiaojunyan.jpg b/assets/stars/jiaojunyan.jpg
diff --git a/assets/stars/jiaqing.jpg b/assets/stars/jiaqing.jpg
diff --git a/assets/stars/jinchen.jpg b/assets/stars/jinchen.jpg
diff --git a/assets/stars/jingtian.jpg b/assets/stars/jingtian.jpg
diff --git a/assets/stars/jujingyi.jpg b/assets/stars/jujingyi.jpg
diff --git a/assets/stars/kanqingzi.jpg b/assets/stars/kanqingzi.jpg
diff --git a/assets/stars/label.txt b/assets/stars/label.txt
@@ -0,0 +1,126 @@
+0_yangying_杨颖
+1_dilireba_迪丽热巴
+2_guanxiaotong_关晓彤
+3_jialing_贾玲
+4_libingbing_李冰冰
+5_liushishi_刘诗诗
+6_liutao_刘涛
+7_liuyifei_刘亦菲
+8_nini_倪妮
+9_songjia_宋佳
+10_songqian_宋茜
+11_sunli_孙俪
+12_tangyan_唐嫣
+13_tongliya_佟丽娅
+14_xienuo_谢娜
+15_yangmi_杨幂
+16_yangzi_杨紫
+17_yaochen_姚晨
+18_zhangziyi_章子怡
+19_zhaoliying_赵丽颖
+20_zhaolusi_赵露思
+21_zhoudongyu_周冬雨
+22_zhouxun_周迅
+23_baibaihe_白百何
+24_bailu_白鹿
+25_caiwenjing_蔡文静
+26_chenshu_陈数
+27_chenyuqi_陈钰琪
+28_chenzihan_陈紫函
+29_dengjiajia_邓家佳
+30_dongxuan_董璇
+31_gaolu_高露
+32_gaoyuanyuan_高圆圆
+33_gulinuozha_古力娜扎
+34_hailu_海陆
+35_haiqing_海清
+36_hanxue_韩雪
+37_haolei_郝蕾
+38_hubingqing_胡冰卿
+39_hujing_胡静
+40_huangshengyi_黄圣依
+41_huangyi_黄奕
+42_huosiyan_霍思燕
+43_jiaqing_贾青
+44_jiangshuying_江疏影
+45_jiangmengjie_蒋梦婕
+46_jiangqinqin_蒋勤勤
+47_jiangxin_蒋欣
+48_jiangyiyi_蒋依依
+49_jiangyingrong_江映蓉
+50_jiangyiyan_江一燕
+51_jiaojunyan_焦俊艳
+52_jinchen_金晨
+53_jingtian_景甜
+54_jujingyi_鞠婧祎
+55_kanqingzi_阚清子
+56_lamuyangzi_辣目洋子
+57_lifeier_李菲儿
+58_liqin_李沁
+59_lisheng_李晟
+60_lixirui_李溪芮
+61_lixiaoran_李小冉
+62_liyitong_李一桐
+63_linyun_林允
+64_liuhaocun_刘浩存
+65_liuxijun_刘惜君
+66_liuyan_柳岩
+67_liuyun_刘芸
+68_louyixiao_娄艺潇
+69_lvyi_吕一
+70_mali_马丽
+71_masichun_马思纯
+72_masu_马苏
+73_mayili_马伊俐
+74_maoxiaotong_毛晓彤
+75_meiting_梅婷
+76_mengmeiqi_孟美岐
+77_qiwei_戚薇
+78_qinhailu_秦海璐
+79_qinlan_秦岚
+80_rensuxi_任素汐
+81_shenmengchen_沈梦辰
+82_shenyue_沈月
+83_shuchang_舒畅
+84_songyi_宋轶
+85_songzuer_宋祖儿
+86_sunyi_孙怡
+87_tansongyun_谭松韵
+88_tanweiwei_谭维维
+89_tangyixin_唐艺昕
+90_tongyao_童瑶
+91_wanqian_万茜
+92_wanglikun_王丽坤
+93_wangluodan_王珞丹
+94_wangou_王鸥
+95_wangxiaochen_王晓晨
+96_wangziwen_王子文
+97_wujinyan_吴谨言
+98_wuqian_吴倩
+99_wuxuanyi_吴宣仪
+100_xingfei_邢菲
+101_xulu_徐璐
+102_yangchaoyue_杨超越
+103_yangrong_杨蓉
+104_yexuan_叶璇
+105_yintao_殷桃
+106_yinger_颖儿
+107_yushuxin_虞书欣
+108_yuanbingyan_袁冰妍
+109_yuanquan_袁泉
+110_yuanshanshan_袁姗姗
+111_zhaojinmai_赵今麦
+112_zhaoyingzi_赵樱子
+113_zhanghuiwen_张慧雯
+114_zhangli_张俪
+115_zhangmeng_张萌
+116_zhanghanyun_张含韵
+117_zhangjiani_张嘉倪
+118_zhangtianai_张天爱
+119_zhangxiaofei_张小斐
+120_zhangxinyi_张歆艺
+121_zhangxinyu_张馨予
+122_zhangxueying_张雪迎
+123_zhangyuqi_张雨绮
+124_zhangzifeng_张子枫
+125_zuoxiaoqing_左小青
diff --git a/assets/stars/lamuyangzi.jpg b/assets/stars/lamuyangzi.jpg
diff --git a/assets/stars/libingbing.jpg b/assets/stars/libingbing.jpg
diff --git a/assets/stars/lifeier.jpg b/assets/stars/lifeier.jpg
diff --git a/assets/stars/linyun.jpg b/assets/stars/linyun.jpg
diff --git a/assets/stars/liqin.jpg b/assets/stars/liqin.jpg
diff --git a/assets/stars/lisheng.jpg b/assets/stars/lisheng.jpg
diff --git a/assets/stars/liuhaocun.jpg b/assets/stars/liuhaocun.jpg
diff --git a/assets/stars/liushishi.jpg b/assets/stars/liushishi.jpg
diff --git a/assets/stars/liutao.jpg b/assets/stars/liutao.jpg
diff --git a/assets/stars/liuxijun.jpg b/assets/stars/liuxijun.jpg
diff --git a/assets/stars/liuyan.jpg b/assets/stars/liuyan.jpg
diff --git a/assets/stars/liuyifei.jpg b/assets/stars/liuyifei.jpg
diff --git a/assets/stars/liuyun.jpg b/assets/stars/liuyun.jpg
diff --git a/assets/stars/lixiaoran.jpg b/assets/stars/lixiaoran.jpg
diff --git a/assets/stars/lixirui.jpg b/assets/stars/lixirui.jpg
diff --git a/assets/stars/liyitong.jpg b/assets/stars/liyitong.jpg
diff --git a/assets/stars/louyixiao.jpg b/assets/stars/louyixiao.jpg
diff --git a/assets/stars/lvyi.jpg b/assets/stars/lvyi.jpg
diff --git a/assets/stars/mali.jpg b/assets/stars/mali.jpg
diff --git a/assets/stars/maoxiaotong.jpg b/assets/stars/maoxiaotong.jpg
diff --git a/assets/stars/masichun.jpg b/assets/stars/masichun.jpg
diff --git a/assets/stars/masu.jpg b/assets/stars/masu.jpg
diff --git a/assets/stars/mayili.jpg b/assets/stars/mayili.jpg
diff --git a/assets/stars/meiting.jpg b/assets/stars/meiting.jpg
diff --git a/assets/stars/mengmeiqi.jpg b/assets/stars/mengmeiqi.jpg
diff --git a/assets/stars/nini.jpg b/assets/stars/nini.jpg
diff --git a/assets/stars/qinhailu.jpg b/assets/stars/qinhailu.jpg
diff --git a/assets/stars/qinlan.jpg b/assets/stars/qinlan.jpg
diff --git a/assets/stars/qiwei.jpg b/assets/stars/qiwei.jpg
diff --git a/assets/stars/rensuxi.jpg b/assets/stars/rensuxi.jpg
diff --git a/assets/stars/shenmengchen.jpg b/assets/stars/shenmengchen.jpg
diff --git a/assets/stars/shenyue.jpg b/assets/stars/shenyue.jpg
diff --git a/assets/stars/shuchang.jpg b/assets/stars/shuchang.jpg
diff --git a/assets/stars/songjia.jpg b/assets/stars/songjia.jpg
diff --git a/assets/stars/songqian.jpg b/assets/stars/songqian.jpg
diff --git a/assets/stars/songyi.jpg b/assets/stars/songyi.jpg
diff --git a/assets/stars/songzuer.jpg b/assets/stars/songzuer.jpg
diff --git a/assets/stars/sunli.jpg b/assets/stars/sunli.jpg
diff --git a/assets/stars/sunyi.jpg b/assets/stars/sunyi.jpg
diff --git a/assets/stars/tangyan.jpg b/assets/stars/tangyan.jpg
diff --git a/assets/stars/tangyixin.jpg b/assets/stars/tangyixin.jpg
diff --git a/assets/stars/tansongyun.jpg b/assets/stars/tansongyun.jpg
diff --git a/assets/stars/tanweiwei.jpg b/assets/stars/tanweiwei.jpg
diff --git a/assets/stars/tongliya.jpg b/assets/stars/tongliya.jpg
diff --git a/assets/stars/tongyao.jpg b/assets/stars/tongyao.jpg
diff --git a/assets/stars/wanglikun.jpg b/assets/stars/wanglikun.jpg
diff --git a/assets/stars/wangluodan.jpg b/assets/stars/wangluodan.jpg
diff --git a/assets/stars/wangou.jpg b/assets/stars/wangou.jpg
diff --git a/assets/stars/wangxiaochen.jpg b/assets/stars/wangxiaochen.jpg
diff --git a/assets/stars/wangziwen.jpg b/assets/stars/wangziwen.jpg
diff --git a/assets/stars/wanqian.jpg b/assets/stars/wanqian.jpg
diff --git a/assets/stars/wujinyan.jpg b/assets/stars/wujinyan.jpg
diff --git a/assets/stars/wuqian.jpg b/assets/stars/wuqian.jpg
diff --git a/assets/stars/wuxuanyi.jpg b/assets/stars/wuxuanyi.jpg
diff --git a/assets/stars/xienuo.jpg b/assets/stars/xienuo.jpg
diff --git a/assets/stars/xingfei.jpg b/assets/stars/xingfei.jpg
diff --git a/assets/stars/xulu.jpg b/assets/stars/xulu.jpg
diff --git a/assets/stars/yangchaoyue.jpg b/assets/stars/yangchaoyue.jpg
diff --git a/assets/stars/yangmi.jpg b/assets/stars/yangmi.jpg
diff --git a/assets/stars/yangrong.jpg b/assets/stars/yangrong.jpg
diff --git a/assets/stars/yangying.jpg b/assets/stars/yangying.jpg
diff --git a/assets/stars/yangzi.jpg b/assets/stars/yangzi.jpg
diff --git a/assets/stars/yaochen.jpg b/assets/stars/yaochen.jpg
diff --git a/assets/stars/yexuan.jpg b/assets/stars/yexuan.jpg
diff --git a/assets/stars/yinger.jpg b/assets/stars/yinger.jpg
diff --git a/assets/stars/yintao.jpg b/assets/stars/yintao.jpg
diff --git a/assets/stars/yuanbingyan.jpg b/assets/stars/yuanbingyan.jpg
diff --git a/assets/stars/yuanquan.jpg b/assets/stars/yuanquan.jpg
diff --git a/assets/stars/yuanshanshan.jpg b/assets/stars/yuanshanshan.jpg
diff --git a/assets/stars/yushuxin.jpg b/assets/stars/yushuxin.jpg
diff --git a/assets/stars/zhanghanyun.jpg b/assets/stars/zhanghanyun.jpg
diff --git a/assets/stars/zhanghuiwen.jpg b/assets/stars/zhanghuiwen.jpg
diff --git a/assets/stars/zhangjiani.jpg b/assets/stars/zhangjiani.jpg
diff --git a/assets/stars/zhangli.jpg b/assets/stars/zhangli.jpg
diff --git a/assets/stars/zhangmeng.jpg b/assets/stars/zhangmeng.jpg
diff --git a/assets/stars/zhangtianai.jpg b/assets/stars/zhangtianai.jpg
diff --git a/assets/stars/zhangxiaofei.jpg b/assets/stars/zhangxiaofei.jpg
diff --git a/assets/stars/zhangxinyi.jpg b/assets/stars/zhangxinyi.jpg
diff --git a/assets/stars/zhangxinyu.jpg b/assets/stars/zhangxinyu.jpg
diff --git a/assets/stars/zhangxueying.jpg b/assets/stars/zhangxueying.jpg
diff --git a/assets/stars/zhangyuqi.jpg b/assets/stars/zhangyuqi.jpg
diff --git a/assets/stars/zhangzifeng.jpg b/assets/stars/zhangzifeng.jpg
diff --git a/assets/stars/zhangziyi.jpg b/assets/stars/zhangziyi.jpg
diff --git a/assets/stars/zhaojinmai.jpg b/assets/stars/zhaojinmai.jpg
diff --git a/assets/stars/zhaoliying.jpg b/assets/stars/zhaoliying.jpg
diff --git a/assets/stars/zhaolusi.jpg b/assets/stars/zhaolusi.jpg
diff --git a/assets/stars/zhaoyingzi.jpg b/assets/stars/zhaoyingzi.jpg
diff --git a/assets/stars/zhoudongyu.jpg b/assets/stars/zhoudongyu.jpg
diff --git a/assets/stars/zhouxun.jpg b/assets/stars/zhouxun.jpg
diff --git a/assets/stars/zuoxiaoqing.jpg b/assets/stars/zuoxiaoqing.jpg