穿越火线怀旧服预约网页vue3版本_202.z怀旧码

• 源码下载地址:
• 版权来自穿越火线,项目仅供参考学习!!!

效果

• 源码下载地址:
• 预览地址:
• 官网效果:

• 移动端有的问题,哈哈,不调整了

用到的库

重要的库

不重要的库

穿越火线说明

• 素材图片一张的大小为82宽度,这里有8个格子,所以最小的宽度是82*8 = 656px,实际情况可以大一些,

• 当然，这个还是要手动去调整，最好打开控制台，使用小键盘调整

音乐播放器

• 顺带一体,他们开发人员将play和pause搞错了好像

进度条关键代码

设置进度条控制块的样式

• 关键属性是 **-webkit-slider-thumb** **,**然后我们拿到了素材图片,设置下就好了,下面是源代码,当然,你也可以将图片下载到本地,
• 注意,设置滑块需要先消除基于操作系统主题的原生外观,否者你设置了thumb也不会生效

.input-range {appearance: none;background: none;border: none;outline: none;}.input-range::-webkit-slider-thumb {width: 44px;height: 22px;
    background-image:url(//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/music/btn/process-btn.png?=t1735836008125);}

• 更多的内容可以看这里

::-webkit-slider-container {/*可以修改容器的若干样式*/}::-webkit-slider-runnable-track {/*可以修改轨道的若干样式*/}::-webkit-slider-thumb {/*可以修改滑块的若干样式*/}

音符律动(音波音浪)效果怎么做

• 可以看到,当播放的时候律动效果展示,暂停后再继续播放会以之前的位置开始跳跃展示,并且波动效果不和音调有关系,也就是一个写死的动画

• 翻看下代码

function initVisualizer(){
    const visualizer = document.getElementById("visualizer");
    const barWidth = 2; // Width of each bar
    const barGap = 3; // Gap between bars
    const containerWidth = visualizer.clientWidth;
    const barCount = Math.floor(containerWidth / (barWidth + barGap)); // Calculate number of bars
    visualizer.innerHTML = ""; // Clear existing bars
    for (let i = 0; i < barCount;i++){
        const bar = document.createElement("div");
        bar.className = "bar";
        const isDown = Math.random() < 0.5; // Randomly determine animation direction
        // Set random initial height between 15% and 50%
        const minHeight = 15 + Math.random() * 35;
        const maxHeight = minHeight + 30 + Math.random() * 20;bar.style.setProperty(
            "--min-height",
            `${isDown ? minHeight: maxHeight}%`
        );bar.style.setProperty(
            "--max-height",
            `${isDown ? maxHeight: minHeight}%`
        );bar.style.animationDuration = `${0.8 + Math.random() * 0.6}s`;// bar.style.marginRight = `${barGap}px`;
        visualizer.appendChild(bar);}}

• 仿照着着写一下,基础逻辑就是为每一个竖条设置独一无二的最小高度,最大高度,和动画持续时间
• index.vue

<template>
  <div class="wave" ref="waveRef" :class="{ running: isRunning }">
    <div
      class="wave-bar"
      v-for="(_, index) in divCount"
      :key="index"
      :style="divs[index]"
    ></div>
  </div>
</template>
<script setup lang="ts">
import{ ref, computed, onMounted, nextTick } from "vue";
const isRunning = ref(false); //是否播放动画效果
// 添加一个ref来存储wave容器的宽度
const waveRef = ref<HTMLElement | null>(null);
const divCount = ref(0);const divs = computed(() =>{return Array.from({length: divCount.value }, (_, index) =>{
    //随机生成minHeight和maxHeight和持续时间
    //同时也随机minHeight和maxHeight谁更大,
    // const minHeight = 15 + Math.random() * 35;
    const minHeight = 15 + Math.random() * 16; //调整下,不然会超出高度了
    const maxHeight = minHeight + 30 + Math.random() * 20;
    const duration = 1 + Math.random() * 0.6;
    const isDown = Math.random() < 0.5;// Randomly determine animation direction(随机方向)
    return{//设置成css变量,后续可以根据优先级被读取到
      "--min-height": `${isDown ? minHeight: maxHeight}px`,
      "--max-height": `${isDown ? maxHeight: minHeight}px`,
      "animation-duration": `${duration}s`,};});});onMounted(() =>{nextTick(() =>{
    // 获取容器元素
    const container = waveRef.value;if (container){
      // 获取容器宽度
      //clientWidth 返回元素的宽度（包括元素宽度、内边距，不包括边框和外边距）
      //offsetWidth 返回元素的宽度（包括元素宽度、内边距和边框，不包括外边距）
      const containerWidth = container.clientWidth;
      const barWidth = 2; // 波浪线的宽度,和css保持一致
      const barGap = 2; // Gap between bars
      // 计算可以容纳的波浪条数量
      divCount.value = Math.floor(containerWidth / (barWidth + barGap));}});});defineExpose({start: () =>{
    isRunning.value = true;},
  stop: () =>{
    isRunning.value = false;},});
</script>
<style>
@keyframes volume{0%{height:var(--min-height);}100%{height:var(--max-height);}}</style>
<style scoped lang="scss">
.wave{height: 100%;box-sizing: border-box;padding: 0 20px;display: flex;align-items: flex-end;justify-content: center;gap: 2px;// 添加波浪条之间的间距
  &.running &-bar{animation-play-state: running;}&-bar{width: 2px;
    //读取顺序   行内样式 -> 外部样式表 -> style标签 -> 默认值
    height:var(--min-height);background-color: #5c6589;
    //alternate 往返效果
    animation: volume 1s ease-in-out infinite alternate;animation-play-state: paused;}}
</style>

• 效果

css变量读取的顺序?先从行内样式读取?

在 CSS 中，CSS 变量（即自定义属性）是按照特定的优先级顺序被解析的，优先级的顺序如下：

1. 行内样式 ：行内样式的优先级最高，浏览器会优先读取和应用内联样式中的 CSS 变量。如果你在 HTML 元素的 style 属性中定义了 CSS 变量，这些变量会优先于其他来源的定义。
2. 外部样式表 ：如果没有在行内样式中定义，浏览器会查看外部或嵌入式的样式表（包括 @import 导入的样式表）中的 CSS 变量定义。
3. **<style>** ** 标签**：内嵌样式（通过 <style> 标签定义的 CSS）会被应用，并且在应用过程中会考虑其优先级。
4. 默认值 ：如果在某些地方没有定义 CSS 变量，那么它们可能会使用默认值，或者在 @keyframes 等规则中，使用无效的值会导致样式不生效。

在你的示例中， @keyframes 规则中的 var(--min-height) 和 var(--max-height) 会按照以下顺序解析：

解析顺序：

• 首先，它会尝试从 行内样式 中读取 --min-height 和 --max-height （如果定义了的话）。
• 如果在行内样式中找不到，它会去查看 外部或内嵌样式表 中是否定义了这些 CSS 变量。
• 如果样式表中也没有定义这些变量， @keyframes 动画规则会使用默认值（即 var(--min-height) 和 var(--max-height) 会被视为无效变量，导致动画效果不生效）。

示例代码：

<divstyle="--min-height: 100px;--max-height: 200px;"><!-- 内容 --></div><style>@keyframes volume{0%{height:var(--min-height);}100%{height:var(--max-height);}}.animated-div{width: 100px;background-color: lightblue;margin: 10px;animation: volume 2s ease-in-out forwards;}</style>

关键点：

• 在上面的代码中， <div> 元素的 style 属性定义了 --min-height 和 --max-height ，这些变量会被 @keyframes 中的 height 动画读取到。
• 如果没有在 div 中定义这些 CSS 变量，那么动画会因找不到这些变量而无法正常工作。

总结：

• 优先级 ：行内样式 > 外部样式表和 <style> 标签 > 默认值。
• **@keyframes** 会在动画的运行时计算变量的值，因此必须确保相关的 CSS 变量在动画运行之前已经定义和赋值，否则动画将无法生效。

图片列表

• 关键是Swiper的实例如何获取
  • 可以参考文档
  • 安装

yarn add swiper

<swiper @swiper="onSwiper"></swiper>// 获取实例import type { Swiper as SwiperType }from"swiper";const swiperInstance = ref<SwiperType>();const handleSwiper =(type:"prev"|"next")=>{if(!swiperInstance.value)return;if(type ==="prev"){//上一张
    swiperInstance.value.slidePrev();}else{//下一张
    swiperInstance.value.slideNext();}};

怎么解决缩放的问题,

• 官网的效果ctrl加滚轮是无法缩放的,并且中间的形状一直保持在中间
• 我们找下,发现在div#app下面有一个属性,会随着页面变化而变化
  • transform:translate3d(0%, 0%, 1px) scale(0.8, 0.8)
  • transform-origin:center center;

• 发现是下面这一段代码变更调整的,JQuery版本的

functioncoverBoxToViewport(boxSelector){const box =$(boxSelector);if(box.length ===0){
            console.error("Box not found with the given selector.");return;}// 设计稿的宽高比const designWidth =1920;const designHeight =1080;const designAspectRatio = designWidth / designHeight;functionresizeBox(){// 获取视窗的宽高const ww =$(window).width();const hh =$(window).height();// 视窗宽高比const viewportAspectRatio = ww / hh;let scaleX, scaleY;if(viewportAspectRatio > designAspectRatio){// 视窗更宽，以视窗宽度为基准
                scaleX = ww / designWidth;
                scaleY = scaleX;// 保持比例}else{// 视窗更高，以视窗高度为基准
                scaleY = hh / designHeight;
                scaleX = scaleY;// 保持比例}// 设置transform以缩放盒子
            box.css({transform:translate3d(0%,0%, 1px)scale(${scaleX}, ${scaleY}),transformOrigin:"center",});// 设置 overflow: hidden 来隐藏超出的部分，避免滚动条$("html, body").css({overflow:"hidden",margin:"0",});}// 初始化和监听窗口大小变化resizeBox();$(window).on("resize", resizeBox);}

• 纯js版本

functioncoverBoxToViewport(boxSelector){const box = document.querySelector(boxSelector);if(!box){
        console.error("Box not found with the given selector.");return;}// 设计稿的宽高比const designWidth =1920;const designHeight =1080;const designAspectRatio = designWidth / designHeight;functionresizeBox(){// 获取视窗的宽高const ww = window.innerWidth;const hh = window.innerHeight;// 视窗宽高比const viewportAspectRatio = ww / hh;let scaleX, scaleY;if(viewportAspectRatio > designAspectRatio){// 视窗更宽，以视窗宽度为基准
            scaleX = ww / designWidth;
            scaleY = scaleX;// 保持比例}else{// 视窗更高，以视窗高度为基准
            scaleY = hh / designHeight;
            scaleX = scaleY;// 保持比例}// 设置 transform 以缩放盒子
        box.style.transform =`translate3d(0%, 0%, 1px) scale(${scaleX}, ${scaleY})`;
        box.style.transformOrigin ="center";// 设置 overflow: hidden 来隐藏超出的部分，避免滚动条
        document.documentElement.style.overflow ="hidden";
        document.documentElement.style.margin ="0";
        document.body.style.overflow ="hidden";
        document.body.style.margin ="0";}// 初始化和监听窗口大小变化resizeBox();
    window.addEventListener("resize", resizeBox);}

• 这样子就会影响之前设置的 .desktop-main 的定位了,所以我们调整下,设置和官网的一样

.desktop-main{top: 90px;left: 390px;width: 1112px;height: 808px;}

• 再设置为他们设计稿的尺寸,人家注释就说明了嘛,设计稿尺寸是1920 * 1080,

html,
body{width: 100%;height: 100%;overflow: hidden;background: #000;}/* 确保应用在任何屏幕尺寸下都保持1920x1080的显示比例 *//* 始终保持应用在视窗中居中显示 *//* 适合全屏展示的应用，如游戏界面或展示页面 */#app{position: absolute;top: 50%;left: 50%;width: 1920px;height: 1080px;margin: -540px 0 0 -960px;will-change: transform;}
# 为什么这么设置请看下方
1# html和body的样式：
width: 100% 和 height: 100%：确保页面占满整个视窗
overflow: hidden：隐藏超出视窗范围的内容，防止出现滚动条
background: #000：设置背景色为黑色
2#  app容器的样式：
position: absolute 和 top: 50%,left: 50%：将应用容器定位在页面的正中心
width: 1920px 和 height: 1080px：设置固定的宽高（1920x1080分辨率）
margin: -540px 0 0 -960px：通过负边距进行居中偏移调整
-540px 是高度的一半（1080/2）
-960px 是宽度的一半（1920/2）
will-change: transform：提示浏览器该元素可能会有变换，优化渲染性能

• 我们使用scss就用scss

html,
body{width: 100%;height: 100%;overflow: hidden;background: #000;}/* 确保应用在任何屏幕尺寸下都保持1920x1080的显示比例 *//* 始终保持应用在视窗中居中显示 *//* 适合全屏展示的应用，如游戏界面或展示页面 */
$design-width: 1920px;
$design-height: 1080px;#app{position: absolute;top: 50%;left: 50%;width: $design-width;height: $design-height;margin: calc(#{$design-height}/ -2) 0 0 calc(#{$design-width} / -2);will-change: transform;}

• 我们试试看效果,可以看到

添加了遮罩背景,无法点击图标了

• 添加下 pointer-events:none 即可

无法自动播放音频

• 调用play方法出现控制台错误
  • Uncaught (in promise) NotAllowedError: play() failed because the user didn’t interact with the document first.
• 解决
  • 添加mute属性即可,就是让他静音,示例如下

    <video
      ref="enterVideoRef"
      class="enter_video":controls="false"
      muted
      src="@/assets/video/enter.mp4"
      @canplay="handleVideoCanPlay"
    ></video>

他们的代码内容

sequence.js

window.requestAnimFrame =(function(){return window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||function(callback){
      window.setTimeout(callback,1000/60);};})();functionsequence(opt){var drawWrap = document.querySelector(opt.el);var useMode =2;var ctx =null;var imgsdom =null;var list = opt.list;var count = list.length;// 修正为总长度var loadNumber =0;var sprite ={};var frameNumber =-1;var lastUpdate =+newDate();var fps = opt.fps ||30;if(useMode ===1){
    ctx = drawWrap.getContext('2d');
    drawWrap.width = opt.width;
    drawWrap.height = opt.height;}for(var i =0; i < list.length; i++){var img =newImage();
    img.src = list[i];
    img.crossOrigin ="Anonymous";(function(index){
      drawWrap.appendChild(img);
      img.style.display ='none';
      img.onload=function(){
        sprite[index]=this;
        loadNumber = index;if(typeof opt.progress ==='function'){
          opt.progress(loadNumber /(count -1));// 更新进度}if(loadNumber === count -1){
          imgsdom = document.querySelectorAll(opt.el +' img');drawImg();if(typeof opt.complete ==='function'){
            opt.complete();}}};})(i);}functiondrawImg(){var newUpdate =+newDate();if(newUpdate - lastUpdate >1000/ fps){// 更新帧号
      frameNumber++;if(frameNumber >= count){if(opt.loop){// 循环播放，重置到第一帧
          frameNumber =0;}else{// 播放结束，隐藏最后一帧，触发结束回调
          imgsdom[frameNumber -1].style.display ='none';if(typeof opt.playEnd ==='function'){
            opt.playEnd();}return;// 停止动画}}if(useMode ===2){// 显示当前帧，隐藏上一帧if(frameNumber >0){
          imgsdom[frameNumber -1].style.display ='none';}else{// 如果是循环的第一帧，将最后一帧隐藏
          imgsdom[count -1].style.display ='none';}
        imgsdom[frameNumber].style.display ='block';}else{// Canvas 绘制模式
        ctx.clearRect(0,0, drawWrap.width, drawWrap.height);
        ctx.drawImage(sprite[frameNumber],0,0, drawWrap.width, drawWrap.height);}
      lastUpdate = newUpdate;}requestAnimFrame(drawImg);}}

loadImgList.js

window.loadImgList =['//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/add-btn.png?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/close-btn.png?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/copy-btn.png?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/destory/appoint-count-bg.png?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/destory/destory-bg.png?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/destory/fault/1.png?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/destory/fault/2.png?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/destory/fault/3.png?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/destory/fault/4.png?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/destory/fault/5.png?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/destory/float-window.png?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/destory/inner-shadowing.png?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/destory/light.png?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/destory/main-bar.png?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/destory/mask.png?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/destory/network-icon.png?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/destory/notice-bar.png?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/destory/qq-icon.png?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/destory/shortcut/cf-h.png?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/destory/shortcut/cf.png?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/destory/shortcut/img-h.png?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/destory/shortcut/img.png?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/destory/shortcut/music-h.png?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/destory/shortcut/music.png?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/destory/shortcut/video-h.png?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/destory/shortcut/video.png?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/destory/source-icon.png?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/destory/temp.jpg?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/destory/window.png?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/hjLogin/close-btn.png?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/hjLogin/hj-login-bg.png?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/hjLogin/hj-subscribe-btn-h.png?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/hjLogin/hj-subscribe-btn.png?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/hjSubscribe/hj-bg.png?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/hjSubscribe/input-box1.png?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/hjSubscribe/input-box2.png?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/hjSubscribe/jddp-name.png?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/hjSubscribe/mc-tips.png?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/hjSubscribe/rewards-table.png?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/hjSubscribe/submit-btn.png?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/image/control-bg.png?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/image/list/1.jpg?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/image/list/10.jpg?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/image/list/11.jpg?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/image/list/12.jpg?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/image/list/13.jpg?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/image/list/14.jpg?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/image/list/15.jpg?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/image/list/16.jpg?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/image/list/17.jpg?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/image/list/18.jpg?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/image/list/19.jpg?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/image/list/2.jpg?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/image/list/20.jpg?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/image/list/21.jpg?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/image/list/22.jpg?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/image/list/23.jpg?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/image/list/24.jpg?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/image/list/25.jpg?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/image/list/26.jpg?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/image/list/27.jpg?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/image/list/3.jpg?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/image/list/4.jpg?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/image/list/5.jpg?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/image/list/6.jpg?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/image/list/7.jpg?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/image/list/8.jpg?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/image/list/9.jpg?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/image/next-h.png?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/image/next.png?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/image/prev-h.png?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/image/prev.png?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/image/wrapper-bg.png?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/invite-bg.png?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/line.png?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/loading.png?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/login-popup.png?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/login-title.png?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/music/btn/close-h.png?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/music/btn/close.png?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/music/btn/control-bg1.png?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/music/btn/control-bg2.png?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/music/btn/divider.png?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/music/btn/file.png?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/music/btn/list.png?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/music/btn/next-h.png?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/music/btn/next.png?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/music/btn/pause-h.png?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/music/btn/pause.png?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/music/btn/playing-h.png?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/music/btn/playing.png?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/music/btn/prev-h.png?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/music/btn/prev.png?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/music/btn/process-btn.png?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/music/btn/scroll-btn.png?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/music/btn/scroll-down.png?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/music/btn/scroll-up.png?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/music/btn/source-mute-h.png?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/music/btn/source-mute.png?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/music/btn/source-open-h.png?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/music/btn/source-open.png?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/music/btn/stop-h.png?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/music/btn/stop.png?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/music/btn/unknown.png?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/music/btn/volume.png?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/music/btn/volumn-btn.png?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/music/list-bg.png?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/music/list-item-hover.png?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/music/process-bg-h.png?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/music/process-bg.png?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/music/status-bg.png?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/music/volumn-bg.png?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/qq-icon-h.png?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/qq-icon.png?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/role.jpg?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/start.png?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/video/adorn1.png?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/video/adorn2.png?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/video/bar-next-btn.png?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/video/bar-prev-btn.png?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/video/close-btn.png?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/video/icon-bg1.png?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/video/icon-bg2.png?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/video/icon-bg3-h.png?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/video/icon-bg3.png?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/video/line.png?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/video/list-h.png?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/video/logo.png?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/video/mute-play-btn.png?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/video/mute-stop-btn.png?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/video/next-btn.png?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/video/pause-btn.png?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/video/play-btn.png?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/video/prev-btn.png?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/video/progress-handle.png?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/video/sjx1.png?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/video/sjx2.png?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/video/stop-btn.png?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/video/video-bg.png?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/video/video-img.jpg?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/video/volume-handle.png?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/video/volume-slider.png?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/wechat-icon-h.png?=t1735835345270','//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/wechat-icon.png?=t1735835345270'];
window.faultImgList =["//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/destory/fault/1.png?=t1735835345270","//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/destory/fault/2.png?=t1735835345270","//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/destory/fault/3.png?=t1735835345270","//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/destory/fault/4.png?=t1735835345270",]
window.imageViewList =["//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/image/list/1.jpg?=t1735835345270","//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/image/list/2.jpg?=t1735835345270","//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/image/list/3.jpg?=t1735835345270","//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/image/list/4.jpg?=t1735835345270","//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/image/list/5.jpg?=t1735835345270","//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/image/list/6.jpg?=t1735835345270","//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/image/list/7.jpg?=t1735835345270","//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/image/list/8.jpg?=t1735835345270","//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/image/list/9.jpg?=t1735835345270","//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/image/list/10.jpg?=t1735835345270","//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/image/list/11.jpg?=t1735835345270","//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/image/list/12.jpg?=t1735835345270","//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/image/list/13.jpg?=t1735835345270","//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/image/list/14.jpg?=t1735835345270","//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/image/list/15.jpg?=t1735835345270","//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/image/list/16.jpg?=t1735835345270","//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/image/list/17.jpg?=t1735835345270","//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/image/list/18.jpg?=t1735835345270","//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/image/list/19.jpg?=t1735835345270","//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/image/list/20.jpg?=t1735835345270","//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/image/list/21.jpg?=t1735835345270","//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/image/list/22.jpg?=t1735835345270","//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/image/list/23.jpg?=t1735835345270","//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/image/list/24.jpg?=t1735835345270","//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/image/list/25.jpg?=t1735835345270","//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/image/list/26.jpg?=t1735835345270","//game.gtimg.cn/images/cf/cp/a20241227reserve/pc/image/list/27.jpg?=t1735835345270",]

index.js

functionopenPop(className){if(!className)return;$(".application").show();$(".application > .pop."+ className).show();}// openPop('share-popup')// 打开公用弹窗functioncommonPop(text){$(".common-popup .alter-text p").text(text);openPop("common-popup");}const processWidths = isMobile ?[30,40]:[22,44];const videoWidths = isMobile ?[41,44]:[41,44];functionchangeProgress($progressPlayed, percent, padding, thumbWidth, $input){const totalWidth =parseInt(($input || $progressPlayed.parent().children("#music-progress")).css("width"));
  $progressPlayed.css("width",`${Math.floor(percent *(totalWidth - thumbWidth))+
       padding +
       thumbWidth /2}px`);}functionclosePop(){$(".application").hide();$(".application > .pop").hide();}functioninitVisualizer(){const visualizer = document.getElementById("visualizer");const barWidth =2;// Width of each barconst barGap =3;// Gap between barsconst containerWidth = visualizer.clientWidth;const barCount = Math.floor(containerWidth /(barWidth + barGap));// Calculate number of bars
  visualizer.innerHTML ="";// Clear existing barsfor(let i =0; i < barCount; i++){const bar = document.createElement("div");
    bar.className ="bar";const isDown = Math.random()<0.5;// Randomly determine animation direction// Set random initial height between 15% and 50%const minHeight =15+ Math.random()*35;const maxHeight = minHeight +30+ Math.random()*20;
    bar.style.setProperty("--min-height",`${isDown ? minHeight : maxHeight}%`);
    bar.style.setProperty("--max-height",`${isDown ? maxHeight : minHeight}%`);
    bar.style.animationDuration =`${0.8+ Math.random()*0.6}s`;// bar.style.marginRight = `${barGap}px`;
    visualizer.appendChild(bar);}}functioninitMusicPlayer(){const playlist =[{name:"Metrohead",url:"",time:"02:58",},{name:"Cyber Thug",url:"",time:"02:51",},{name:"Unbound",url:"",time:"02:01",},{name:"strategy now",url:"",time:"01:50",},{name:"《穿越火线》游戏主题曲",url:"",time:"03:27",},];let currentIndex =0;// Current track indexlet sound;// Howler.js sound instancefunctionloadTrack(index){if(sound){
            sound.unload();// Unload the current audio}
        sound =newHowl({src:[playlist[index].url],html5:!isMobile,onplay:function(){
                playPauseButton.addClass("playing");$("#visualizer").addClass("running");requestAnimationFrame(updateProgress);},onend: nextTrack,onstop:()=>{
                playPauseButton.removeClass("playing");$("#visualizer").removeClass("running");requestAnimationFrame(updateProgress);},onpause:()=>{
                playPauseButton.removeClass("playing");$("#visualizer").removeClass("running");requestAnimationFrame(updateProgress);},});updateNowPlaying(index);requestAnimationFrame(updateProgress);}// Update the currently playing trackfunctionupdateNowPlaying(index){$(".now-playing").text(`正在播放 - ${playlist[index].name}`);$(".playlist-item").removeClass("active");$(".playlist-item").eq(index).addClass("active");}// Render the playlistfunctionrenderPlaylist(){const playlistContainer =$(".playlist");
        playlistContainer.empty();// Clear the existing playlist
        playlist.forEach((track, index)=>{const item =$(`<div class="playlist-item" title="${track.name
                }" data-index="${index}">
          <span>${index +1}. ${track.name}</span>
          <span>${track.time}</span>
      </div>`);
            item.on("click",function(){const musicName =$(this).attr("title");
                pttClick.send("btn","clickPlayListItem","点击播放列表-"+ musicName
                );
                currentIndex =$(this).data("index");loadTrack(currentIndex);
                sound.play();
                playPauseButton.addClass("playing");});
            playlistContainer.append(item);});updateNowPlaying(currentIndex);requestAnimationFrame(updateProgress);}// Initialize controlsconst playPauseButton =$("#playPause");const progress =$("#music-progress");const volume =$("#music-volume");const timeDisplay =$("#music-time-display");const muteButton =$("#mute");const prevButton =$("#prev");const nextButton =$("#next");let previousVolume =1;// Store previous volume level for mute toggle// Play/pause button event
    playPauseButton.on("click",function(){if(sound.playing()){
            sound.pause();
            pttClick.send("btn","musicPlayerCtrl","音乐暂停");// playPauseButton.removeClass('playing');}else{
            sound.play();// playPauseButton.addClass('playing');
            pttClick.send("btn","musicPlayerCtrl","音乐开始/继续播放");}});// Stop button event$(".music-player #stop").on("click",function(){
        sound.stop();
        pttClick.send("btn","musicPlayerStop","音乐停止");// playPauseButton.removeClass('playing');// requestAnimationFrame(updateProgress);});$(".music-player .close").on("click",function(){
        sound.stop();$(".playlist-container").show();// playPauseButton.removeClass('playing');});$(".music-player .window-button").on("click",function(){
        pttClick.send("btn","musicPlayerCloseList","关闭播放列表");$(".playlist-container").hide();});$(".music-player .btn.list").on("click",function(){const display =$(".playlist-container").css("display");$(".playlist-container").css("display",
            display ==="none"?"block":"none");
        pttClick.send("btn","musicPlayerToggleList","切换播放列表状态");});// Progress bar events
    progress.on("input",function(){if(sound.playing()){
            sound.pause();// playPauseButton.removeClass('playing');}const seekTime = sound.duration()*(progress.val()/100);
        sound.seek(seekTime);});
    progress.on("change",function(){if(!sound.playing()){
            sound.play();
            pttClick.send("btn","dragMusicProgress","拖动音乐进度条");// playPauseButton.addClass('playing');requestAnimationFrame(updateProgress);}});// Volume slider event
    volume.on("input",function(){
        sound.volume(volume.val());});// Mute button event
    muteButton.on("click",function(){if(!sound.mute()){
            previousVolume = sound.volume();
            sound.mute(true);
            pttClick.send("btn","musicPlayerMute","音乐静音");
            muteButton.addClass("muted");}else{
            sound.mute(false);
            pttClick.send("btn","musicPlayerUnmute","音乐取消静音");
            muteButton.removeClass("muted");}});// Previous track button
    prevButton.on("click", previousTrack);// Next track button
    nextButton.on("click", nextTrack);// Update progress bar and time displayfunctionupdateProgress(){const seek = sound.seek()||0;const percent = seek / sound.duration()||0;
        progress.val(percent *100||0);changeProgress($(".progress-container .progress-played"),
            percent,...processWidths
        );
        timeDisplay.text(formatTime(seek));if(sound.playing()){requestAnimationFrame(updateProgress);}}// Format time in mm:ssfunctionformatTime(seconds){const minutes = Math.floor(seconds /60);const secs = Math.floor(seconds %60);return`${minutes}:${secs.toString().padStart(2,"0")}`;}// Play the next trackfunctionnextTrack(){
        currentIndex =(currentIndex +1)% playlist.length;loadTrack(currentIndex);
        sound.play();// playPauseButton.addClass('playing');}// Play the previous trackfunctionpreviousTrack(){
        currentIndex =(currentIndex -1+ playlist.length)% playlist.length;loadTrack(currentIndex);
        sound.play();// playPauseButton.addClass('playing');}// Initialize the playlist and load the first trackrenderPlaylist();loadTrack(currentIndex);}functioninitVideoPlayer(){classVideoPlayer{constructor(){// jQuery选择器this.$videoPlayer =$("#videoPlayer");this.$playPauseBtn =$("#playPauseBtn");this.$stopBtn =$("#stopBtn");this.$prevBtn =$("#prevBtn");this.$nextBtn =$("#nextBtn");this.$progressInput =$("#progressInput");this.$muteBtn =$("#muteBtn");this.$volumeInput =$("#volumeInput");this.$videoList =$("#videoList");this.$rewindBtn =$("#rewindBtn");this.$forwardBtn =$("#forwardBtn");this.currentVideoIndex =0;this.videos =[{title:"正式官宣！全新FPS网游 《穿越火线》 即将上线",src:"",},{title:"震撼来袭！《穿越火线》全新CG首发",src:"",},{title:"轻松一刻！《穿越火线》搞笑CG",src:"",},];this.initializePlayer();this.setupEventListeners();// 初始化音量控制this.initializeVolume();this.setupPlayerControls();}initializePlayer(){this.createPlaylist();this.loadVideo(0);}createPlaylist(){const self =this;
            $.each(this.videos,function(index, video){const $li =$("<li>").on("click",()=>
                    self.loadVideo(index,true));// 创建标题和时间的容器const $titleSpan =$('<span class="video-title">').text(
                    video.title
                );const $durationSpan =$('<span class="video-duration">').text("--:--");// 将标题和时间添加到列表项
                $li.append($titleSpan).append($durationSpan).appendTo(self.$videoList);});}updateDuration(index, duration){this.$videoList
                .find("li").eq(index).find(".video-duration").text(duration);}loadVideo(index){this.currentVideoIndex = index;this.$videoPlayer.attr("src",this.videos[index].src);this.$videoPlayer[0].load();this.updatePlaylistUI();this.$progressInput.val(0);changeProgress($(".video-player .progress-played"),0,...videoWidths,$("#progressInput"));$('.video-player .title').text(this.videos[index].title);// this.$progressInput[0].style.setProperty('--progress', '0%');this.$playPauseBtn
                .find("i").removeClass("vd-play").addClass("vd-pause");// 添加一个标志来判断是否需要自动播放const shouldAutoPlay =
                arguments[1]!==undefined? arguments[1]:false;this.$videoPlayer.one("loadedmetadata",()=>{this.updateProgress();const duration =this.$videoPlayer[0].duration;const formattedDuration =this.formatTime(duration);this.updateDuration(index, formattedDuration);this.updatePlaylistUI();this.loadOtherVideosDuration();// 如果需要自动播放if(shouldAutoPlay){this.$videoPlayer[0].play();this.$playPauseBtn
                        .find("i").addClass("vd-play").removeClass("vd-pause");}});}loadOtherVideosDuration(){this.videos.forEach((video, index)=>{if(index !==this.currentVideoIndex){const tempVideo = document.createElement("video");
                    tempVideo.src = video.src;$(tempVideo).one("loadedmetadata",()=>{const duration = tempVideo.duration;const formattedDuration =this.formatTime(duration);this.updateDuration(index, formattedDuration);});}});}formatTime(seconds){const minutes = Math.floor(seconds /60);const remainingSeconds = Math.floor(seconds %60);if(minutes >=60){const hours = Math.floor(minutes /60);const remainingMinutes = minutes %60;return`${hours}:${remainingMinutes
                    .toString().padStart(2,"0")}:${remainingSeconds
                        .toString().padStart(2,"0")}`;}else{return`${minutes}:${remainingSeconds
                    .toString().padStart(2,"0")}`;}}updatePlaylistUI(){this.$videoList
                .find("li").removeClass("active").eq(this.currentVideoIndex).addClass("active");}setupEventListeners(){const self =this;// 播放/暂停按钮this.$playPauseBtn.on("click",()=>this.togglePlay());// 停止按钮this.$stopBtn.on("click",()=>this.stopVideo());// 上一个/下一个视频this.$prevBtn.on("click",()=>this.playPrevious());this.$nextBtn.on("click",()=>this.playNext());// 进度条控制this.$videoPlayer.on("timeupdate",()=>this.updateProgress());this.$progressInput.on("input",(e)=>this.setProgress(e));// 修改视频结束事件监听this.$videoPlayer.on("ended",()=>{this.$playPauseBtn
                    .find("i").removeClass("vd-play").addClass("vd-pause");// 自动播放下一个视频this.playNext();});// 量控制this.$muteBtn.on("click",()=>this.toggleMute());this.$volumeInput.on("input",(e)=>this.setVolume(e));// 左右按钮控制进度条this.$rewindBtn.on("click",()=>this.skipTime(-3));this.$forwardBtn.on("click",()=>this.skipTime(3));}togglePlay(){const video =this.$videoPlayer[0];if(video.paused){
                video.play();this.$playPauseBtn
                    .find("i").addClass("vd-play").removeClass("vd-pause");}else{
                video.pause();this.$playPauseBtn
                    .find("i").addClass("vd-pause").removeClass("vd-play");}}playPrevious(){const newIndex =(this.currentVideoIndex -1+this.videos.length)%this.videos.length;this.loadVideo(newIndex,true);// 传入 true 表示需要自动播放}playNext(){// 检查是否是最后一个视频if(this.currentVideoIndex ===this.videos.length -1){// 如果是后一个，直接切换到第一个视频this.loadVideo(0,true);}else{// 否则切换到下一个视频const newIndex =this.currentVideoIndex +1;this.loadVideo(newIndex,true);}}updateProgress(){const video =this.$videoPlayer[0];if(video.duration &&!isNaN(video.duration)){const percent =(video.currentTime / video.duration)*100;this.$progressInput.val(percent);changeProgress($(".video-player .progress-played"),
                    video.currentTime / video.duration,...videoWidths,$("#progressInput"));// this.$progressInput[0].style.setProperty('--progress', `${percent}%`);}}setProgress(e){const video =this.$videoPlayer[0];const percent = e.target.value;
            video.currentTime =(percent /100)* video.duration;changeProgress($(".video-player .progress-played"),
                percent /100,...videoWidths,$("#progressInput"));// e.target.style.setProperty('--progress', `${percent}%`);}toggleMute(){const video =this.$videoPlayer[0];
            video.muted =!video.muted;if(video.muted){this.$muteBtn
                    .addClass("mute-stop-btn").removeClass("mute-play-btn");this.$volumeInput.val(0);}else{this.$muteBtn
                    .addClass("mute-play-btn").removeClass("mute-stop-btn");// 恢复到静音前的音量值const previousVolume = video.volume *100;this.$volumeInput.val(previousVolume);}}setVolume(e){const video =this.$videoPlayer[0];const volume = e.target.value /100;
            video.volume = volume;// 更新静音按钮状态if(volume ===0){this.$muteBtn
                    .addClass("mute-stop-btn").removeClass("mute-play-btn");}else{this.$muteBtn
                    .addClass("mute-play-btn").removeClass("mute-stop-btn");}}skipTime(seconds){const video =this.$videoPlayer[0];const newTime = video.currentTime + seconds;if(newTime <0){
                video.currentTime =0;}elseif(newTime > video.duration){
                video.currentTime = video.duration;}else{
                video.currentTime = newTime;}}stopVideo(){const video =this.$videoPlayer[0];
            video.pause();
            video.currentTime =0;this.$playPauseBtn
                .find("i").addClass("vd-pause").removeClass("vd-play");this.updateProgress();}initializeVolume(){const video =this.$videoPlayer[0];
            video.volume =1;this.$volumeInput.val(100);}setupPlayerControls(){$(".open-video-player").click(()=>{// $('.video-player').fadeIn();// 重新加载第一个视频this.loadVideo(0);// 重置播放器状态this.$videoPlayer[0].currentTime =0;this.$progressInput.val(0);changeProgress($(".video-player .progress-played"),0,...videoWidths,$("#progressInput"));// this.$progressInput[0].style.setProperty('--progress', '0%');this.$playPauseBtn
                    .find("i").removeClass("vd-play").addClass("vd-pause");});// 关闭播放器$("#closePlayer").click(()=>{// $('.video-player').fadeOut();// 停止视频播放this.stopVideo();});}}newVideoPlayer();}functioninitImageSwiper(){var $swiper =$(".img-swiper .swiper-container .swiper-wrapper");
    $swiper.empty();let html ="";
    imageViewList.forEach(function(uri){
        html +=`<div class="swiper-slide"><img src="${uri}" alt=""></div>`;});
    $swiper.append(html);var mySwiper =newSwiper(".img-swiper .swiper-container",{loop:true,prevButton:".swiper-btn.prev-btn",nextButton:".swiper-btn.next-btn",observer:true,observeParents:true,resistanceRatio:0,});}functionverifyPhoneCode(){let timer =null;constCOUNTDOWN=10;// 手机号验证functionisValidPhone(phone){return/^1[3-9]\d{9}$/.test(phone);}// 验证码验证functionisValidCode(code){return/^\d{6}$/.test(code);}// 倒计时函数functionstartCountdown($btn){let count =COUNTDOWN;
        $btn.prop("disabled",true);
        $btn.text(`${count}秒后重新获取`);
        timer =setInterval(()=>{
            count--;if(count <=0){clearInterval(timer);
                timer =null;
                $btn.prop("disabled",false);
                $btn.text("获取验证码");}else{
                $btn.text(`${count}秒后重新获取`);}},1000);}// 获取验证码$(".get-code").click(function(){if($(this).prop("disabled")){return;}const phone =$('.input-box[type="tel"]').val().trim();sendcode(1);/*接入发送验证码功能*//*
      if (!isValidPhone(phone)) {
        alert('请输入正确的手机号码');
        return;
      }
      if (timer) {
        clearInterval(timer);
        timer = null;
      }
      // 模拟发送验证码
      setTimeout(() => {
        alert('验证码已发送到您的手机');
        startCountdown($(this));
      }, 500);
    */});// 授权手机$(".bind-phone").click(function(){if($(this).prop("disabled")){return;}
        weui.confirm('授权后，您将允许我们通过手机短信语音电话等方式，向您推送CF或CFHD高清竞技大区相关福利活动、最新版本内容等信息',{className:'diy-weui-dialog',buttons:[{label:'取消',type:'default',onClick:function(){ console.log('no')}},{label:'确认授权',type:'primary',onClick:function(){bindphone(1);}}]})});// 提交预约$(".submit-btn").click(function(){//添加功能整合
        Milo.emit(flow_1098772);});//领取奖励$(".get-gift").click(function(){//添加功能整合
        Milo.emit(flow_1098978);});$(".verify-input").on("input",function(e){if(e.target.value.length){$(".get-auth").removeClass("black");}else{$(".get-auth").addClass("black");}});// 退订链接$(".unsubscribe").click(function(){dmunsubscribe();});// 清理定时器$(window).on("unload",function(){if(timer){clearInterval(timer);}});var activityLink ={gw:[','],nq:[','],zh:[',']}$('.new-activity').css('cursor','pointer');$('.new-activity').on('click',function(){var isNQ = window.location.href.indexOf("nq.html")>=0;var isZH = window.location.href.indexOf("zh.html")>=0;var link ='';var linkIdx =0;// 获取当前日期var currentDate =newDate();// 设置1.11的日期var comparisonDate =newDate(currentDate.getFullYear(),0,11);// 比较当前日期是否大于等于1.11if(currentDate >= comparisonDate){
            linkIdx =1;}else{
            linkIdx =0;}if(isNQ){
            link = activityLink.nq[linkIdx];}elseif(isZH){
            link = activityLink.zh[linkIdx];}else{
            link = activityLink.gw[linkIdx];}
        window.open(link,'_blank');})}functionbindEvents(){// 显示用户信息$(".userinfo-arrow-btn").on("click",function(){$(this).toggleClass("active");});$(".shortcut-wrapper .shortcut").on("click",function(){const className =$(this).attr("data-type");const title =$(this).attr("title");
        pttClick.send("btn","openPop", title);if(className ==="qq"){return}if(className ==="ie"){
            window.open(','_blank');return}openPop(className);if(className ==="music-player"){initVisualizer();}});$(".pop").on("click",".close",function(){
        pttClick.send("btn","closePop","关闭弹窗");// const popName = $(this).parents('.pop').attr('class');// if(popName.includes('music-player')) {//   destroyVisualizer();// }closePop();});//复制链接$("#copy_btn").click(asyncfunction(){const linkInput = document.getElementById("link_to_copy");const text = linkInput.value;try{await navigator.clipboard.writeText(text);alert("复制成功");}catch(err){
            console.error("复制失败:", err);// 如果 Clipboard API 失败，回退到传统方法try{
                linkInput.select();
                document.execCommand("copy");alert("复制成功");}catch(err){alert("复制失败，请手动复制");}}});//怀旧登录器$(".appot-count-window").on("click",function(){openPop("hj-login-popup");});$('.notice-btn').on('click',function(){
        weui.toast('授权后，您将允许我们通过手机短信语音电话等方式，向您推送CF或CFHD高清竞技大区相关福利活动、最新版本内容等信息',3000)})}functioninitMainContent(){initMusicPlayer();initVideoPlayer();initImageSwiper();bindEvents();verifyPhoneCode();}functiondesktopContent(){$(".desktop").fadeIn(500,function(){/* sequence({
            el: "#fault",
            width: isMobile ? 750 : 1112,
            height: isMobile ? 1011 : 808,
            loop: true,
            fps: 15,
            list: faultImgList,
        }); */});}functioninitEnterVideo(){const videoPlayer =newMMD.VideoPlayer({videoElement:$("#enterVideo")[0],src: isMobile
            ?"//game.gtimg.cn/images/cf/cp/a20241227reserve/media/video/enter-m.mp4?=t1735893977540":"//game.gtimg.cn/images/cf/cp/a20241227reserve/media/video/enter.mp4?=t1735893977540",visibilityHandle:false,muted:true,});
    videoPlayer.preload();
    videoPlayer.on(MMD.VideoEvent.START,()=>{$(".loading-page").fadeOut(500,function(){$(".enter-video").show();});});// 视频播放完成；
    videoPlayer.on(MMD.VideoEvent.END,()=>{desktopContent();});return videoPlayer;}functionloadResource(onComplete){var queue =newcreatejs.LoadQueue({preferXHR:true,crossOrigin:true,});
    queue.setMaxConnections(10);
    queue.loadManifest(loadImgList);
    queue.on("complete",function(){$(".loading-word").fadeOut(500,function(){$(".start-btn").fadeIn();onComplete();});});}loadResource(function(){$(document).ready(function(){const videoPlayer =initEnterVideo();initMainContent();const firstEnter = localStorage.getItem("first_enter");if(firstEnter){$(".loading-page").hide();desktopContent();}else{$(".loading-page").show();}$(".start-btn").on("click",function(){
            videoPlayer.play();
            localStorage.setItem("first_enter","1");});$(".restart-btn").on("click",function(){$(".desktop").fadeOut();// $('.enter-video').fadeIn()
            videoPlayer.play();});});});

apptLogic.js

/**是否已预约 */var isBooked =false;/**是否已经登录 */var isLogined =true;//登录成功后functionafterLogin(){//已预约 查看邀请closePop();if(isBooked){openPop('invite-viewer');$('.pop.login-popup').hide();return;}//未预约openPop('login-popup');$('#logined').show().siblings().hide();}//预约成功后functionafterBook(){closePop();openPop('login-popup');$('#subscribeSucceed').show().siblings().hide();}$(document).ready(function(){// //怀旧手机号预约$('#hj_subscribe_btn').on('click',function(){closePop();if(!isLogined){//未登录openPop('login-popup');$('.hj-login-popup').hide();return;}if(!isBooked){//未预约openPop('hj-subscribe');$('.hj-login-popup').hide();return;}//已预约，查看邀请openPop('invite-viewer');});$('.pop.invite-viewer .add-btn').on('click',function(){//邀请if(isMobile){//打开邀请tip弹层}else{openPop('copy-viewer');$('.pop.invite-viewer').hide();}});})

yuyue.js

//检查是否登录var nowhref = window.location.href;if(nowhref.indexOf("nq.html")>=0){var isQC =false;}else{var isQC =true;}
Milo.checkLogin({iUseQQConnect: isQC,//如果当前活动使用的互联登录,请将改参数设置truesuccess:function(user){if(Milo.isMobile())$("#milo-logout").hide();var userInfo = user && user.userInfo;$("#milo-logined").show();$("#milo-unlogin").hide();$("#milo-userUin").text(userInfo.userUin);if(Milo.isMobile())$("#milo-logout").hide();let nickName = userInfo.nickName;$("#milo-userUin").html(nickName);
		Milo.emit(flow_1101262);queryBindArea();},fail:function(res){//todo login
		Milo.emit(flow_1101262);$(".userinfo-arrow-btn").addClass("active");},});// qq登录functionqqlogin(){if(isQC){if(Milo.isMobile()){
            Milo.mobileLoginByQQConnect();}else{
            Milo.loginByQQConnect();}}else{if(Milo.isMobile()){
            Milo.mobileLoginByQQ();}else{
            Milo.loginByQQ();}}}// 退出$("#milo-logout").click(function(){
    Milo.logout({callback:function(){$("#milo-logined").hide();$("#milo-unlogin").show();},});
    window.location.reload();});/*****************大区********************/// 查询绑定大区functionqueryBindArea(){var flow_query ={actId:"693120",token:"68b24f",loading:false,// 开启loading浮层,默认不开启sData:{query:true,},success:function(res){if(res.data){$("#milo-binded").show();$("#milo-unbind").hide();$("#milo-areaName,.share-service").text(res.data.areaName);$("#milo-roleName,.share-nickname").text(res.data.roleName);}
			Milo.emit(flow_1098787);},fail:function(res){if(res.iRet ===-9998|| res.iRet ==="-9998"){return;}$("#milo-binded").hide();$("#milo-unbind").show();
            console.log("查询绑定大区fail", res);},};
    Milo.emit(flow_query);}$("#milo-commitArea, #milo-changeArea").click(function(){commitBindArea();});// 提交绑定大区functioncommitBindArea(){var flow_commit ={actId:"693120",token:"f39729",loading:false,// 开启loading浮层,默认不开启sData:{query:false,},success:function(res){if(res.data){$("#milo-binded").show();$("#milo-unbind").hide();$("#milo-areaName,.share-service").text(res.data.areaName);$("#milo-roleName,.share-nickname").text(res.data.roleName);}
			Milo.emit(flow_1098787);},fail:function(res){if(res.iRet ===-9998|| res.iRet ==="-9998"){return;}$("#milo-binded").hide();$("#milo-unbind").show();
            console.log("提交绑定大区fail", res);},};
    Milo.emit(flow_commit);}//预约var flow_1098772 ={actId:"693120",token:"e6af34",sData:{},success:function(res){setTimeout(()=>{
            weui.toast('恭喜您预约成功~');},500);
        Milo.emit(flow_1098787);
		Milo.emit(flow_1101262);},fail:function(res){if(res.iRet ==101){qqlogin();}elseif(res.iRet ==99998){commitBindArea();}else{
            weui.toast(res.sMsg);/* closePop();
            commonPop(res.sMsg); */}},};//初始化var flow_1098787 ={actId:"693120",token:"422093",sData:{},success:function(res){
        record.init();//初始化分享图片if(res.details.modRet.sOutValue1 >0){$(".submit-btn").hide();$(".subscribe-disable,.get-gift").show();var yyresult = res.details.modRet.sOutValue5;if(yyresult !=0){
				yyrecord = yyresult.split("_");
				record.descIdx = yyrecord[0];
				record.picIdx = yyrecord[1];$("#my-file-second").show()$("#my-file-first").hide()
				record.initDescAndPic();}else{$("#my-file-second").hide()$("#my-file-first").show()}}if(res.details.modRet.sOutValue3 >0){$(".get-gift").hide();$(".get-gift-disable").show();}else{$(".get-gift").show();$(".get-gift-disable").hide();}if(res.details.modRet.sOutValue4>0){$(".share-subscribe-number").text("您是怀旧服第"+ res.details.modRet.sOutValue4 +"个预约玩家");}},fail:function(res){if(res.iRet ==101){qqlogin();}elseif(res.iRet ==99998){commitBindArea();}},};//初始化-不带登录var flow_1101262 ={actId:'693120',token:'35117e',sData:{},success:function(res){$("#appoint-count").text(res.details.modRet.sOutValue2);},fail:function(res){if(res.iRet ==101){//todo 登录态失效，需要重新调登录方法 （开发自行实现）}elseif(res.iRet ==99998){// todo 调用提交绑定大区方法}}}//领取预约奖励var flow_1098978 ={actId:"693120",token:"90d8e2",sData:{},success:function(res){
        weui.toast(res.sMsg);
        Milo.emit(flow_1098787);},fail:function(res){if(res.iRet ==101){qqlogin();}elseif(res.iRet ==99998){commitBindArea();}else{
            weui.toast(res.sMsg);}},};//领取迷彩套装var flow_1098775 ={actId:"693120",token:"b502c0",sData:{},success:function(res){closePop();commonPop(res.sMsg);},fail:function(res){if(res.iRet ==101){qqlogin();}elseif(res.iRet ==99998){commitBindArea();}else{
            weui.toast(res.sMsg);}//console.log(res);},};//记录黑话&头像var flow_1100125 ={actId:"693120",token:"f0bef1",sData:{"dmid":0,"dmid1":1},loading:false,success:function(res){
		Milo.emit(flow_1098787);},fail:function(res){if(res.iRet ==101){qqlogin();}elseif(res.iRet ==99998){commitBindArea();}else{
			weui.toast(res.sMsg);}}};
amsCfg_1004838 = amsCfg_1004839 ={iAMSActivityId:"608967",// AMS活动号activityId:"592766",// 模块实例号sData:{phone:"",code:"",iActId:"",sService:""},_everyRead:true,sNeedSubmitPopDiv:false,onBeginGetGiftEvent:function(){return0;// 抽奖前事件，返回0表示成功},onGetGiftFailureEvent:function(callbackObj){// 抽奖失败事件
        weui.toast(callbackObj.sMsg);},onGetGiftSuccessEvent:function(callbackObj){// 抽奖成功事件var packageLen = callbackObj.iPackageId
            ? callbackObj.iPackageId.split(","):"";if(packageLen && packageLen.length >1){alert(callbackObj.sMsg);return;}
        weui.toast(callbackObj.sMsg);},};
amsCfg_1004837 ={iAMSActivityId:"608967",// AMS活动号activityId:"592766",// 模块实例号sData:{phone:"",code:"",iActId:"",sService:""},_everyRead:true,sNeedSubmitPopDiv:false,onBeginGetGiftEvent:function(){return0;// 抽奖前事件，返回0表示成功},onGetGiftFailureEvent:function(callbackObj){// 抽奖失败事件
        weui.toast(callbackObj.sMsg);},onGetGiftSuccessEvent:function(callbackObj){// 抽奖成功事件
		weui.toast('发送成功~');$(".bind-phone").removeClass("black");},};//手机号码填写functionsendcode(id){var phoneNum =$("#phoneNum"+ id).val();if(phoneNum){
        amsCfg_1004837.sData.phone = phoneNum;amsSubmit(608967,1004837);}else{// closePop();// commonPop("请输入正确的手机号码！");
        weui.toast('请输入正确的手机号码！')}}functionbindphone(id){var phoneNum =$("#phoneNum"+ id).val();var codeNum =$("#codeNum"+ id).val();if(phoneNum && codeNum){
        amsCfg_1004838.sData.phone = phoneNum;
        amsCfg_1004838.sData.code = codeNum;
        amsCfg_1004838.sData.iActId =689039;
        amsCfg_1004838.sData.sService ="CF";amsSubmit(608967,1004838);}else{
        weui.toast('请输入正确的手机号码和验证码后再授权！')// closePop();// commonPop("请输入正确的手机号码和验证码后再授权！");}}functiondmunsubscribe(){confirm("您确定要退订吗？",function(){amsSubmit(608967,1004839);});}
window.confirm=function(msg, callback, callback1, callback2){need("util.modalDialog",function(Dialog){
        Dialog.confirm(msg,{onConfirm:function(){typeof callback =="function"?callback(): console.log("no callback");},onCancel:function(){typeof callback1 =="function"?callback1(): console.log("no callback1");},onClose:function(){typeof callback1 =="function"?callback2(): console.log("no callback2");},});});};