h5春节小游戏制作

话不多说，直接上代码

<div class="w750 o-hidden">
  <div class="w750 p-r bg index">
    <div class="p-a text_time p-r">
      <div class="xwf_2021 animated fadeInRight fast"></div>
      <div
        class="xwf_2022 animated fadeInRight fast"
        style="animation-delay: 0.5s"
      ></div>
      <div
        class="xwf_2023 animated fadeInRight fast"
        style="animation-delay: 1s"
      ></div>
      <div
        class="xwf_2024 animated fadeInRight fast"
        style="animation-delay: 1.5s"
      ></div>
      <div
        class="xwf_2025 p-a animated fadeInRight fast"
        style="animation-delay: 2s"
      >
        <img src="./img/jinniu.png" alt="" />
      </div>
    </div>
    <div class="p-a niu">
      <img src="./img/niu.png" alt="" />
    </div>
    <div class="p-a text animated fadeInLeft fast delay-1s"></div>
  </div>

  <div class="w750 p-r box hidden">
    <div class="select">
      <!-- 牛 -->
      <div class="select_niu p-a">
        <img class="hidden" src="./img/one_show.png" alt="" />
        <img class="hidden" src="./img/two_show.png" alt="" />
        <img class="visib" src="./img/three_show.png" alt="" />
        <img class="hidden" src="./img/four_show.png" alt="" />
        <img class="hidden" src="./img/five_show.png" alt="" />
      </div>
      <!-- 确认选择 -->
      <div class="confirm p-a" style="top: 6.7rem; left: 2.5rem">
        <span>确认选择</span>
      </div>
      <!-- 切换形象 -->
      <div class="switch p-a d-flex">
        <div class="animated tada fast delay-1s">点击牛</div>
        <div class="animated tada fast delay-2s">切换</div>
        <div class="animated tada fast delay-3s">形象</div>
      </div>
      <!-- 云 -->
      <div class="xwf_cloud p-r">
        <div class="p-a left"></div>
        <div class="p-a right"></div>
      </div>
      <!-- 转盘 -->
      <div class="turntable p-r" style="top: 1rem">
        <div class="p-a one"><img src="./img/one.png" alt="" /></div>
        <div class="p-a two"><img src="./img/two.png" alt="" /></div>
        <div class="p-a three"><img src="./img/three.png" alt="" /></div>
        <div class="p-a four"><img src="./img/four.png" alt="" /></div>
        <div class="p-a five"><img src="./img/five.png" alt="" /></div>
      </div>
      <!-- 指针 -->
      <div class="pointer p-a"></div>
    </div>
  </div>

  <div class="congratulatory w750 p-r hidden">
    <div class="select">
      <!-- 牛 -->
      <div class="select_niu p-a o-hidden">
        <!-- Swiper -->
        <div class="swiper-container">
          <div class="swiper-wrapper">
            <div class="swiper-slide active"><span></span></div>
            <div class="swiper-slide"><span></span></div>
            <div class="swiper-slide"><span></span></div>
            <div class="swiper-slide"><span></span></div>
            <div class="swiper-slide"><span></span></div>
            <div class="swiper-slide"><span></span></div>
            <div class="swiper-slide"><span></span></div>
            <div class="swiper-slide"><span></span></div>
            <div class="swiper-slide"><span></span></div>
          </div>
        </div>
      </div>
      <!-- 上一步 预览海报 -->
      <div>
        <div class="confirm p-a prev">
          <span>上一步</span>
        </div>
        <div class="confirm p-a next">
          <span>预览海报</span>
        </div>
      </div>
      <!-- 云 -->
      <div class="xwf_cloud p-r">
        <div class="p-a left"></div>
        <div class="p-a right"></div>
      </div>
    </div>
  </div>

  <div class="w750 congratulatory1 hidden">
    <div class="select p-r">
      <div class="p-r">
        <img
          src="./img/one_show.png"
          alt=""
          class="p-a"
          style="width: 3rem; height: 4rem; top: 2.5rem; left: 2.3rem"
        />
        <div class="select_niu p-a p-r">
          <img class="p-a hidden" src="./img/niu_bg.png" />
          <img class="p-a hidden" src="./img/niu_bg.png" />
          <img class="p-a hidden" src="./img/niu_bg.png" />
          <img class="p-a hidden" src="./img/niu_bg.png" />
          <img class="p-a hidden" src="./img/niu_bg.png" />
          <img class="p-a hidden" src="./img/niu_bg.png" />
          <img class="p-a hidden" src="./img/niu_bg.png" />
          <img class="p-a hidden" src="./img/niu_bg.png" />
          <img class="p-a hidden" src="./img/niu_bg.png" />
          <img class="p-a hidden" src="./img/niu_bg.png" />
        </div>
      </div>
      <!-- 上一步下一步 -->
      <div>
        <div class="confirm p-a prev">
          <span>上一步</span>
        </div>
        <div class="confirm p-a next">
          <span>下一步</span>
        </div>
      </div>
      <!-- 颜色 -->
      <div class="select_color p-a d-flex flex-wrap" style="width: 6rem">
        <div class="div div1 mb10 blur">
          <div
            style="
              background-color: #30e1e3;
              transform: translate(0.1rem, 0.11rem);
            "
          ></div>
        </div>
        <div class="div div2 cyan">
          <div
            style="
              background-color: #b9d9b2;
              transform: translate(0.1rem, 0.11rem);
            "
          ></div>
        </div>
        <div class="div div3 green">
          <div
            style="
              background-color: #1eb192;
              transform: translate(0.1rem, 0.11rem);
            "
          ></div>
        </div>
        <div class="div div4 orange">
          <div
            style="
              background-color: #ff8e32;
              transform: translate(0.1rem, 0.11rem);
            "
          ></div>
        </div>
        <div class="div div5 violet">
          <div
            style="
              background-color: #5c5d9d;
              transform: translate(0.1rem, 0.11rem);
            "
          ></div>
        </div>
        <div class="div div6 yellow">
          <div
            style="
              background-color: #f0e30e;
              transform: translate(0.1rem, 0.11rem);
            "
          ></div>
        </div>
      </div>
      <!-- 云 -->
      <div class="xwf_cloud p-r">
        <div class="p-a left"></div>
        <div class="p-a right"></div>
      </div>
    </div>
  </div>

  <div class="congratulatory2 w750 hidden">
    <div class="select p-r">
      <!-- 牛 -->
      <div class="select_niu p-a">
        <img src="./img/two_show.png" alt="" />
      </div>
      <!-- 上一步下一步 -->
      <div>
        <div class="confirm p-a prev">
          <span>上一步</span>
        </div>
        <div class="confirm p-a next">
          <span>下一步</span>
        </div>
      </div>
      <!-- 颜色 -->
      <div class="select_color p-a d-flex">
        <div class="div div1">
          <div
            style="
              background-color: #4875cf;
              transform: translate(0.1rem, 0.11rem);
            "
          ></div>
        </div>
        <div class="div div2">
          <div
            style="
              background-color: #f4f4f4;
              transform: translate(0.1rem, 0.11rem);
            "
          ></div>
        </div>
        <div class="div div3">
          <div
            style="
              background-color: #fdf1b3;
              transform: translate(0.1rem, 0.11rem);
            "
          ></div>
        </div>
      </div>
      <!-- 云 -->
      <div class="xwf_cloud p-r">
        <div class="p-a left"></div>
        <div class="p-a right"></div>
      </div>
    </div>
  </div>

  <div class="congratulatory3 w750 p-r hidden">
    <div class="select">
      <!-- 牛 -->
      <div class="select_niu p-a">
        <img src="./img/three_show.png" alt="" />
      </div>
      <!-- 上一步下一步 -->
      <div>
        <div class="confirm p-a prev">
          <span>上一步</span>
        </div>
        <div class="confirm p-a next">
          <span>下一步</span>
        </div>
      </div>
      <!-- 颜色 -->
      <div class="select_color p-a d-flex">
        <div class="div div1">
          <div
            style="
              background-color: #4875cf;
              transform: translate(0.1rem, 0.11rem);
            "
          ></div>
        </div>
        <div class="div div2">
          <div
            style="
              background-color: #f4f4f4;
              transform: translate(0.1rem, 0.11rem);
            "
          ></div>
        </div>
        <div class="div div3">
          <div
            style="
              background-color: #fdf1b3;
              transform: translate(0.1rem, 0.11rem);
            "
          ></div>
        </div>
      </div>
      <!-- 云 -->
      <div class="xwf_cloud p-r">
        <div class="p-a left"></div>
        <div class="p-a right"></div>
      </div>
    </div>
  </div>

  <div class="congratulatory4 w750 hidden">
    <div class="select p-r">
      <!-- 牛 -->
      <div class="p-r">
        <img src="./img/four_show.png" alt="" class="p-a" />
        <div class="select_niu p-a p-r">
          <img class="p-a hidden" src="./img/niu_bg.png" />
          <img class="p-a hidden" src="./img/niu_bg.png" />
          <img class="p-a hidden" src="./img/niu_bg.png" />
          <img class="p-a hidden" src="./img/niu_bg.png" />
          <img class="p-a hidden" src="./img/niu_bg.png" />
          <img class="p-a hidden" src="./img/niu_bg.png" />
          <img class="p-a hidden" src="./img/niu_bg.png" />
          <img class="p-a hidden" src="./img/niu_bg.png" />
          <img class="p-a hidden" src="./img/niu_bg.png" />
          <img class="p-a hidden" src="./img/niu_bg.png" />
        </div>
      </div>
      <!-- 上一步下一步 -->
      <div>
        <div class="confirm p-a prev">
          <span>上一步</span>
        </div>
        <div class="confirm p-a next">
          <span>下一步</span>
        </div>
      </div>
      <!-- 颜色 -->
      <div class="select_color p-a d-flex flex-wrap" style="width: 6rem">
        <div class="div div1 mb10 blur">
          <div
            style="
              background-color: #433ff4;
              transform: translate(0.1rem, 0.11rem);
            "
          ></div>
        </div>
        <div class="div div2 green">
          <div
            style="
              background-color: #6cc049;
              transform: translate(0.1rem, 0.11rem);
            "
          ></div>
        </div>
        <div class="div div3 orange">
          <div
            style="
              background-color: #ff6a00;
              transform: translate(0.1rem, 0.11rem);
            "
          ></div>
        </div>
        <div class="div div4 pink">
          <div
            style="
              background-color: #e74582;
              transform: translate(0.1rem, 0.11rem);
            "
          ></div>
        </div>
        <div class="div div5 red">
          <div
            style="
              background-color: #e2231a;
              transform: translate(0.1rem, 0.11rem);
            "
          ></div>
        </div>
        <div class="div div6 violet">
          <div
            style="
              background-color: #aa0adf;
              transform: translate(0.1rem, 0.11rem);
            "
          ></div>
        </div>
      </div>
      <!-- 云 -->
      <div class="xwf_cloud p-r">
        <div class="p-a left"></div>
        <div class="p-a right"></div>
      </div>
    </div>
  </div>

  <div class="congratulatory5 w750 p-r hidden">
    <div class="select">
      <!-- 牛 -->
      <div class="select_niu p-a">
        <img src="./img/five_show.png" alt="" />
      </div>
      <!-- 上一步下一步 -->
      <div>
        <div class="confirm p-a prev">
          <span>上一步</span>
        </div>
        <div class="confirm p-a next">
          <span>下一步</span>
        </div>
      </div>
      <!-- 颜色 -->
      <div class="select_color p-a d-flex">
        <div class="div div1">
          <div
            style="
              background-color: #4875cf;
              transform: translate(0.1rem, 0.11rem);
            "
          ></div>
        </div>
        <div class="div div2">
          <div
            style="
              background-color: #f4f4f4;
              transform: translate(0.1rem, 0.11rem);
            "
          ></div>
        </div>
        <div class="div div3">
          <div
            style="
              background-color: #fdf1b3;
              transform: translate(0.1rem, 0.11rem);
            "
          ></div>
        </div>
      </div>
      <!-- 云 -->
      <div class="xwf_cloud p-r">
        <div class="p-a left"></div>
        <div class="p-a right"></div>
      </div>
    </div>
  </div>

  <div
    class="html2Image p-f"
    style="
      background-color: rgba(0, 0, 0, 0.5);
      z-index: 13;
      width: 100%;
      height: 100%;
    "
  >
    <div style="margin: 1.3rem 0 0 0.8rem">
      <img id="html2Image" src="" alt="" style="width: 90%; height: 90%" />
    </div>
    <button
      class="btn"
      style="
        position: absolute;
        top: 0.7rem;
        right: 0.3rem;
        color: #fff;
        background-color: rgba(0, 0, 0, 0.2);
        width: 1.2rem;
      "
    >
      ×
    </button>
  </div>

  <div class="preview1 w750 hidden" id="view1">
    <div class="select p-r">
      <div class="preview_text"><img src="" alt="" /></div>
      <div class="preview_url">
        <img src="" alt="" class="p-a" />
      </div>
      <div class="p-a" style="top: 11.5rem">
        <button class="no">返回</button>
        <button class="ok">确认生成</button>
      </div>
      <img src="./img/ewm.png" alt="" class="ewm p-a hidden" />
    </div>
  </div>
  <div class="preview2 preview w750 hidden" id="view2">
    <div class="select p-r">
      <div class="preview_text">
        <img src="" alt="" />
      </div>
      <div class="preview_url"><img src="" alt="" class="p-a" /></div>
      <div class="p-a" style="top: 11.5rem">
        <button class="no">返回</button>
        <button class="ok">确认生成</button>
      </div>
      <img src="./img/ewm.png" alt="" class="ewm p-a" />
    </div>
  </div>
  <div class="preview3 preview w750 hidden" id="view3">
    <div class="select p-r">
      <div class="preview_text"><img src="" alt="" /></div>
      <div class="preview_url"><img src="" alt="" class="p-a" /></div>
      <div class="p-a" style="top: 11.5rem">
        <button class="no">返回</button>
        <button class="ok">确认生成</button>
      </div>
      <img src="./img/ewm.png" alt="" class="ewm p-a" />
    </div>
  </div>
  <div class="preview4 preview w750 hidden" id="view4">
    <div class="select p-r">
      <img
        class="p-a"
        src="./img/preview4_bottom.png"
        alt=""
        style="width: 7.5rem; bottom: -2rem; left: 0.5rem"
      />
      <div class="preview_text"><img src="" alt="" /></div>
      <div
        class="preview_url p-a"
        style="top: 4.5rem; transform: scale(2.5)"
      >
        <img src="" alt="" class="p-a" />
        <img src="" alt="" class="p-a" />
        <img src="" alt="" class="p-a" />
        <img src="" alt="" class="p-a" />
        <img src="" alt="" class="p-a" />
        <img src="" alt="" class="p-a" />
        <img src="" alt="" class="p-a" />
        <img src="" alt="" class="p-a" />
        <img src="" alt="" class="p-a" />
      </div>
      <div class="p-a" style="top: 11.5rem">
        <button class="no">返回</button>
        <button class="ok">确认生成</button>
      </div>
      <img src="./img/ewm.png" alt="" class="ewm p-a" />
    </div>
  </div>
  <div class="preview5 preview w750 hidden" id="view5">
    <div class="select p-r">
      <div class="preview_text">
        <img src="" alt="" />
      </div>
      <div
        class="preview_url p-a"
        style="top: 6rem; left: 1.5rem; transform: scale(1.5)"
      >
        <img src="" alt="" class="p-a" />
        <img src="" alt="" class="p-a" />
        <img src="" alt="" class="p-a" />
        <img src="" alt="" class="p-a" />
        <img src="" alt="" class="p-a" />
        <img src="" alt="" class="p-a" />
        <img src="" alt="" class="p-a" />
        <img src="" alt="" class="p-a" />
        <img src="" alt="" class="p-a" />
      </div>
      <div class="p-a" style="top: 11.5rem">
        <button class="no">返回</button>
        <button class="ok">确认生成</button>
      </div>
      <img src="./img/ewm.png" alt="" class="ewm p-a" />
    </div>
  </div>

  <!-- 提示 -->
  <div
    class="tit hidden p-f"
    style="
      bottom: 6rem;
      left: 2rem;
      width: 3rem;
      height: 1rem;
      background-color: #909090;
      border-radius: 1rem;
      text-align: center;
      line-height: 1rem;
      color: #fff;
    "
  >
    请选择颜色
  </div>
</div>


<audio
  id="media"
  class="musicControl-active"
  src="1.mp3"
  loop="loop"
></audio>
<img
  id="music-icon"
  class="musicControl-active"
  src="music.png"
  alt=""
  style="position: relative; top: -15rem; left: 0"
/>
<style>
  .musicControl-active {
    animation: rotataZ 1.2s linear infinite;
    -webkit-animation: rotataZ 1.2s linear infinite;
  }
  @keyframes rotataZ {
    0% {
      transform: rotateZ(0);
    }
    50% {
      transform: rotateZ(180deg);
    }
    100% {
      transform: rotateZ(360deg);
    }
  }
  @-webkit-keyframes rotataZ {
    0% {
      transform: rotateZ(0);
    }
    50% {
      transform: rotateZ(180deg);
    }
    100% {
      transform: rotateZ(360deg);
    }
  }
</style>
<script src="./js/jquery-3.4.1.min.js"></script>
<script src="./js/html2canvas.min.js"></script>
<script src="./js/siper.min.js"></script>

<script>
  var swiper = new Swiper(".swiper-container", {
    direction: "vertical",
    slidesPerView: "auto",
    mousewheel: true,
    freeMode: true,
    observer: true, //修改swiper自己或子元素时，自动初始化swiper
    observeParents: true, //修改swiper的父元素时，自动初始化swiper
    observeSlideChildren: true,
  });

  $(function () {
    let arr = ["blur", "cyan", "green", "orange", "violet", "yellow"];
    let ax = [];
    let activeText = "";
    let arr1 = ["blur", "green", "orange", "pink", "red", "violet"];
    let textIndex = [];
    let imgUrl = "";
    let imgUrl1 = [];
    /* 公共 */

    /* 鼠标滑动 */
    $(".index").bind("touchstart", function (e) {
      (startX = e.originalEvent.changedTouches[0].pageX),
        (startY = e.originalEvent.changedTouches[0].pageY);
    });
    $(".index").bind("touchmove", function (e) {
      //获取滑动屏幕时的X,Y
      (endX = e.originalEvent.changedTouches[0].pageX),
        (endY = e.originalEvent.changedTouches[0].pageY);
      //获取滑动距离
      distanceX = endX - startX;
      distanceY = endY - startY;
      //判断滑动方向
      if (Math.abs(distanceX) > Math.abs(distanceY) && distanceX < -50) {
        $(".index").addClass("hidden");
        $(".box").removeClass("hidden").addClass("visit");
      }
    });

    // 旋转切换
    function pointer(d, j) {
      $(".pointer").css("transform", "rotate(" + d + "deg)");
      $(".pointer").css("transition", "0.2s all");
      $(".box .confirm").click((e) => {
        e.stopPropagation();
        $(".box").addClass("hidden");
        $(".congratulatory" + j + "")
          .removeClass("hidden")
          .siblings()
          .addClass("hidden");
      });
    }

    // 切换类名换页面
    function toggleShow(a) {
      $(".congratulatory" + a + " .next").click((e) => {
        e.stopPropagation();
        $(".congratulatory" + a + "")
          .addClass("hidden")
          .siblings()
          .removeClass("hidden");
        $(".congratulatory")
          .removeClass("hidden")
          .siblings()
          .addClass("hidden");
        $(".congratulatory .prev").click((e) => {
          e.stopPropagation();
          $(".congratulatory")
            .addClass("hidden")
            .siblings()
            .removeClass("hidden");
          $(".congratulatory" + a + "")
            .removeClass("hidden")
            .siblings()
            .addClass("hidden");
        });
      });
    }
    // 切换颜色
    function toggleColor(i, number, color) {
      $(".congratulatory" + i + " .select_niu img").attr(
        "src",
        "./img/" + number + "_show_" + color + ".png"
      );
      imgUrl = "./img/" + number + "_show_" + color + ".png";
    }

    function previewBox(b, n) {
      $(".congratulatory .next").click((e) => {
        e.stopPropagation();
        $(".preview" + b + " .preview_text img").attr(
          "src",
          "./img/" + n + "_text1.png"
        );
        $(".ewm").addClass("hidden");
        $(".congratulatory").addClass("hidden");
        $(".preview" + b + "")
          .removeClass("hidden")
          .siblings()
          .addClass("hidden");
        $.each(textIndex, (index) => {
          $(".preview" + b + " .preview_text img").attr(
            "src",
            "./img/" + n + "_text" + (textIndex[index] + 1) + ".png"
          );
        });

        $(".preview" + b + " .preview_url img").attr("src", imgUrl);
        $(".preview" + b + " .ok").click((r) => {
          e.stopPropagation();
          $(".ewm").removeClass("hidden");
          $(".preview" + b + " button").addClass("hidden");
          $(".html2Image").removeClass("hidden");
          html2canvas(document.getElementById("view" + b + "")).then(
            function (canvas) {
              var dataUrl = canvas.toDataURL();
              $("#html2Image").attr("src", dataUrl);
            }
          );
        });
        $(".preview" + b + " .no").click((e) => {
          e.stopPropagation();
          $(".preview" + b + "").addClass("hidden");
          $(".congratulatory").removeClass("hidden");
        });
        $(".btn").click(() => {
          $(".html2Image").addClass("hidden");
          $(".preview" + b + "").removeClass("hidden");
          $(".ewm").addClass("hidden");
          $(".preview" + b + " button").removeClass("hidden");
        });
      });
    }
    function previewBox1(c, f) {
      $(".congratulatory .next").click(function () {
        $(".congratulatory").addClass("hidden");
        $(".preview" + c + "")
          .removeClass("hidden")
          .siblings()
          .addClass("hidden");
        $(".ewm").addClass("hidden");
        $.each($(".preview" + c + " .preview_url img"), function (idx) {
          $(this).attr("src", imgUrl1[idx]);
        });
        $.each(textIndex, (index) => {
          $(".preview" + c + " .preview_text img").attr(
            "src",
            "./img/" + f + "_text" + (textIndex[index] + 1) + ".png"
          );
        });
        $(".preview" + c + " .ok").click(function () {
          $(".ewm").removeClass("hidden");
          $(".preview" + c + " button").addClass("hidden");
          $(".html2Image").removeClass("hidden");
          html2canvas(document.getElementById("view" + c + "")).then(
            function (canvas) {
              var dataUrl = canvas.toDataURL();
              $("#html2Image").attr("src", dataUrl);
            }
          );
        });
        $(".preview" + c + " .no").click(function () {
          $(".preview" + c + "").addClass("hidden");
          $(".congratulatory").removeClass("hidden");
        });
        $(".btn").click(function () {
          $(".html2Image").addClass("hidden");
          $(".preview" + c + "").removeClass("hidden");
          $(".ewm").addClass("hidden");
          $(".preview" + c + " button").removeClass("hidden");
        });
      });
    }

    // 第二块
    $(".box .turntable div").click(function () {
      $(".box .select_niu img").hide().eq($(this).index()).show();
    });
    $(".box .confirm").click((e) => {
      e.stopPropagation();
      $(".box").addClass("hidden");
      $(".congratulatory3")
        .removeClass("hidden")
        .siblings()
        .addClass("hidden");
    });

    $(".one").click((e) => {
      e.stopPropagation();
      pointer(-80, "1");
    });
    $(".two").click((e) => {
      e.stopPropagation();
      pointer(-45, "2");
    });
    $(".three").click((e) => {
      e.stopPropagation();
      pointer(0, "3");
    });
    $(".four").click((e) => {
      e.stopPropagation();
      pointer(55, "4");
    });
    $(".five").click((e) => {
      e.stopPropagation();
      pointer(80, "5");
    });
    // 第三块

    $(".congratulatory1 .div").click(function () {
      $(this).addClass("active").siblings().removeClass("active");
    });

    $(".congratulatory1 .select_niu img").removeClass("hidden");
    $(".congratulatory1 .next").click(function () {
      let index = $(".congratulatory1 .div.active").index();
      if ($(".congratulatory1 .select_color .div").hasClass("active")) {
        $(".congratulatory1 .select_color .div").removeClass("active");
        ax.push($(".congratulatory1 .select_color .active").index());
        if (arr[index] == undefined) {
          console.log(1);
        } else {
          if (imgUrl1.length < 9) {
            imgUrl1.push(
              "./img/one_show_" + arr[index] + ax.length + ".png"
            );
            var new_arr = [];
            for (var i = 0; i < imgUrl1.length; i++) {
              var items = imgUrl1[i];
              //判断元素是否存在于new_arr中，如果不存在则插入到new_ar中
              if ($.inArray(items, new_arr) == -1) {
                new_arr.push(items);
              }
            }
          }
        }
        if (ax.length >= 9) {
          $(".congratulatory1").addClass("hidden");
          $(".congratulatory").removeClass("hidden");
          ax.pop();
        }
        previewBox1(4, "one");
        $(".congratulatory .prev").click((e) => {
          e.stopPropagation();
          $(".congratulatory").addClass("hidden");
          $(".congratulatory1").removeClass("hidden");
        });
      } else {
        $(".tit").removeClass("hidden");
        setTimeout(() => {
          $(".tit").addClass("hidden");
        }, 1000);
      }
    });
    $.each(arr, (q) => {
      $(".congratulatory1 .select_color ." + arr[q] + "").click(
        function () {
          $(".congratulatory1 .select_niu img")
            .eq(ax.length + 1)
            .attr(
              "src",
              "./img/one_show_" + arr[q] + "" + (ax.length + 1) + ".png"
            );
        }
      );
    });
    $(".congratulatory1 .prev").click(function () {
      if (
        $(".congratulatory1 .select_niu img")
          .eq(ax.length + 1)
          .attr("src", "./img/niu_bg.png")
      ) {
        ax.pop();
        imgUrl1.pop();
        console.log(ax);
      } else {
        $(".congratulatory1 .select_niu img")
          .eq(ax.length + 2)
          .attr("src", "./img/niu_bg.png");
      }
      let imgUr = $(".congratulatory1 .select_niu img").eq(1).attr("src");
      if (imgUr == "./img/niu_bg.png") {
        $(".congratulatory1").addClass("hidden");
        $(".box").removeClass("hidden");
      }
    });

    $(".swiper-slide").eq(0).addClass("active");
    $(".swiper-slide").click(function () {
      textIndex.push($(this).index());
      $(this).addClass("active").siblings().removeClass("active");
    });

    $(".congratulatory2 .prev").click(function () {
      $(".congratulatory2").addClass("hidden");
      $(".box").removeClass("hidden");
    });
    $(".congratulatory2 .next").click(function () {
      if ($(".congratulatory2 .div").hasClass("active")) {
        console.log(1);
      } else {
        $(".tit").removeClass("hidden");
        setTimeout(() => {
          $(".tit").addClass("hidden");
        }, 1000);
      }
    });
    $(".congratulatory2 .div").click(function () {
      $(this).addClass("active").siblings().removeClass("active");
    });
    $(".congratulatory2 .div1").click(function () {
      toggleColor("2", "two", "blur");
      toggleShow("2");
      previewBox(1, "two");
    });
    $(".congratulatory2 .div2").click(function () {
      toggleColor("2", "two", "silver");
      toggleShow("2");
      previewBox(1, "two");
    });
    $(".congratulatory2 .div3").click(function () {
      toggleColor("2", "two", "gilding");
      toggleShow("2");
      previewBox(1, "two");
    });

    $(".congratulatory3 .next").click(function () {
      if ($(".congratulatory3 .div").hasClass("active")) {
        console.log(1);
      } else {
        $(".tit").removeClass("hidden");
        setTimeout(() => {
          $(".tit").addClass("hidden");
        }, 1000);
      }
    });
    $(".congratulatory3 .div").click(function () {
      $(this).addClass("active").siblings().removeClass("active");
    });
    $(".congratulatory3 .prev").click(function () {
      $(".congratulatory3").addClass("hidden");
      $(".box").removeClass("hidden");
    });
    $(".congratulatory3 .div1").click(function () {
      toggleColor("3", "three", "blur");
      toggleShow("3");
      previewBox(2, "three");
    });
    $(".congratulatory3 .div2").click(function () {
      toggleColor("3", "three", "silver");
      toggleShow("3");
      previewBox(2, "three");
    });
    $(".congratulatory3 .div3").click(function () {
      toggleColor("3", "three", "gilding");
      toggleShow("3");
      previewBox(2, "three");
    });

    // // 第三块
    $(".congratulatory4 .div").click(function () {
      $(this).addClass("active").siblings().removeClass("active");
      $(".tit").addClass("hidden");
    });
    $(".congratulatory4 .select_niu img").removeClass("hidden");
    $(".congratulatory4 .next").click(function () {
      let index = $(".congratulatory4 .div.active").index();
      if ($(".congratulatory4 .select_color div").hasClass("active")) {
        ax.push($(".congratulatory4 .select_color .active").index());
        $(".congratulatory4 .select_color div").removeClass("active");
        console.log(ax);
      } else {
        $(".tit").removeClass("hidden");
      }
      if (ax.length == 9) {
        let index = $(".congratulatory4 .div.active").index();
        $(".congratulatory4").addClass("hidden");
        $(".congratulatory").removeClass("hidden");
      }
      imgUrl1.push("./img/four_show_" + arr1[index] + ax.length + ".png");
      previewBox1(5, "four");
      $(".congratulatory .prev").click(function () {
        $(".congratulatory").addClass("hidden");
        $(".congratulatory4").removeClass("hidden");
      });
    });
    $.each(arr1, function (m) {
      $(".congratulatory4 .select_color ." + arr1[m] + "").click(
        function () {
          $(".congratulatory4 .select_niu img")
            .eq(ax.length + 1)
            .attr(
              "src",
              "./img/four_show_" + arr1[m] + "" + (ax.length + 1) + ".png"
            );
        }
      );
    });
    $(".congratulatory4 .prev").click(function () {
      if (
        $(".congratulatory4 .select_niu img")
          .eq(ax.length + 1)
          .attr("src", "./img/niu_bg.png")
      ) {
        ax.pop();
      } else {
        $(".congratulatory4 .select_niu img")
          .eq(ax.length + 2)
          .attr("src", "./img/niu_bg.png");
      }
      let imgUr = $(".congratulatory4 .select_niu img").eq(1).attr("src");
      if (imgUr == "./img/niu_bg.png") {
        $(".congratulatory4").addClass("hidden");
        $(".box").removeClass("hidden");
      }
    });

    $(".congratulatory5 .next").click(function () {
      if ($(".congratulatory5 .div").hasClass("active")) {
        console.log(1);
      } else {
        $(".tit").removeClass("hidden");
        setTimeout(() => {
          $(".tit").addClass("hidden");
        }, 1000);
      }
    });
    $(".congratulatory5 .div").click(function () {
      $(this).addClass("active").siblings().removeClass("active");
    });
    $(".congratulatory5 .prev").click(function () {
      $(".congratulatory5").addClass("hidden");
      $(".box").removeClass("hidden");
    });
    $(".congratulatory5 .div1").click(function () {
      toggleColor("5", "five", "blur");
      toggleShow("5");
      previewBox(3, "five");
    });
    $(".congratulatory5 .div2").click(function () {
      toggleColor("5", "five", "silver");
      toggleShow("5");
      previewBox(3, "five");
    });
    $(".congratulatory5 .div3").click(function () {
      toggleColor("5", "five", "gilding");
      toggleShow("5");
      previewBox(3, "five");
    });
  });
</script>
<script type="text/javascript">
  var dataForWeixin = {
    appId: "<%=appid%>",
    MsgImg: "http://lx26.sunnyby.cn/2021-4-8/slt.jpg",
    TLImg: "http://lx26.sunnyby.cn/2021-4-8/slt.jpg",
    url: "http://lx26.sunnyby.cn/2021-4-8/index.aspx",
    title: "春节", // 分享后的标题,
    desc: "春节牛", // 分享后的描述信息
    timestamp: "<%=timestamp%>",
    nonceStr: "<%=nonceStr%>",
    signature: "<%=signature%>",
    jsApiList: [
      "onMenuShareTimeline",
      "onMenuShareAppMessage",
      "onMenuShareQQ",
      "onMenuShareWeibo",
    ],
    fakeid: "",
    callback: function () {},
  };
  wx.config({
    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    appId: dataForWeixin.appId, // 必填，公众号的唯一标识
    timestamp: dataForWeixin.timestamp, // 必填，生成签名的时间戳
    nonceStr: dataForWeixin.nonceStr, // 必填，生成签名的随机串
    signature: dataForWeixin.signature, // 必填，签名，见附录1
    jsApiList: dataForWeixin.jsApiList, // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
  });
  wx.ready(function () {
    //在此输入各种API
    //分享到朋友圈
    wx.onMenuShareTimeline({
      title: dataForWeixin.title, // 分享标题
      link: dataForWeixin.url, // 分享链接
      desc: dataForWeixin.desc, // 分享描述
      imgUrl: dataForWeixin.MsgImg, // 分享图标
      success: function () {
        // 用户确认分享后执行的回调函数
      },
      cancel: function () {
        // 用户取消分享后执行的回调函数
      },
    });
    //分享给朋友
    wx.onMenuShareAppMessage({
      title: dataForWeixin.title, // 分享标题
      desc: dataForWeixin.desc, // 分享描述
      link: dataForWeixin.url, // 分享链接
      imgUrl: dataForWeixin.TLImg, // 分享图标
      type: "", // 分享类型,music、video或link，不填默认为link
      dataUrl: "", // 如果type是music或video，则要提供数据链接，默认为空
      success: function () {
        // 用户确认分享后执行的回调函数
      },
      cancel: function () {
        // 用户取消分享后执行的回调函数
      },
    });
    //QQ
    wx.onMenuShareQQ({
      title: dataForWeixin.title, // 分享标题
      desc: dataForWeixin.desc, // 分享描述
      link: dataForWeixin.url, // 分享链接
      imgUrl: dataForWeixin.MsgImg, // 分享图标
      success: function () {
        // 用户确认分享后执行的回调函数
      },
      cancel: function () {
        // 用户取消分享后执行的回调函数
      },
    });
    //QQ微博
    wx.onMenuShareWeibo({
      title: dataForWeixin.title, // 分享标题
      desc: dataForWeixin.desc, // 分享描述
      link: dataForWeixin.url, // 分享链接
      imgUrl: dataForWeixin.TLImg, // 分享图标
      success: function () {
        // 用户确认分享后执行的回调函数
      },
      cancel: function () {
        // 用户取消分享后执行的回调函数
      },
    });
    // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，
    //所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
  });
  wx.error(function (res) {
    //alert(res);
    // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
  });
</script>
<script>
  // 背景音乐
  $(function () {
    var Hmedia = document.getElementById("media");
    // Hmedia.play();
    document.addEventListener(
      "WeixinJSBridgeReady",
      function () {
        Hmedia.load();
        Hmedia.play();
        Hmedia.loop = false;
      },
      false
    );
    //循环播放
    Hmedia.onended = function () {
      Hmedia.load();
      Hmedia.play();
    };
    wx.error(function (res) {
      //alert(res.errMsg);
    });
    //music icon
    $("#music-icon").click(function () {
      var _this = $(this);
      if (_this.hasClass("musicControl-active")) {
        _this.removeClass("musicControl-active");
        // Hmedia.load();
        Hmedia.pause();
      } else {
        _this.addClass("musicControl-active");
        Hmedia.load();
        Hmedia.play();
      }
    });
  });
</script>