master

分支 (1)

管理

管理

master

danyeadd
/
index.html

<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>加减挑战</title>
  <link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.2/style/weui.min.css">
  <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.0/css/jquery-weui.min.css">
  <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <link rel="stylesheet" href="css/common.css">
  <link rel="stylesheet" href="css/game.css">
  <script src="js/rem.js"></script>
</head>

<body>

  <!-- 主页部分 -->
  <div id="index" style="display: block" class="index-wrap">
    <div class="weui-flex">
      <div class="weui-flex__item">
        <div class="top-img">
          <img src="image/top.png" alt="">
        </div>
      </div>
    </div>
    <div class="weui-flex padlr-15">
      <div class="weui-flex__item">
        <div class="text-yjp" style="margin-top: -40px;">挑战成功赢奖品</div>
      </div>
    </div>
    <div class="weui-flex">
      <div class="weui-flex__item">
        <div class="gzxq">
          <a href="">规则详情</a>
        </div>
      </div>
    </div>
    <div class="weui-flex">
      <div class="weui-flex__item">
        <div class="text-xxtz text-center">
          <!-- 小小挑战
          <br>  -->
          加减挑战
        </div>
      </div>
    </div>
    <div class="weui-flex padlr-15">
      <div class="weui-flex__item">
        <a id="startGame" class="btn-start">开始游戏</a>
      </div>
    </div>
    <div class="weui-flex padlr-15 mt-15">
      <div class="weui-flex__item">
        <a id="myRecord" class="btn-start">我的战绩</a>
      </div>
    </div>
    <div class="weui-flex padlr-15">
      <div class="weui-flex__item">
        <div class="weui-tab mt-15">
          <div class="weui-navbar">
            <a class="weui-navbar__item weui-bar__item--on" href="#rank-ry">
              荣誉榜
            </a>
            <a class="weui-navbar__item" href="#rank-yl">
              毅力榜
            </a>
            <a class="weui-navbar__item" href="#rank-jp">
              奖品展示
            </a>

          </div>
          <div class="weui-tab__bd">
            <div id="rank-ry" class="weui-tab__bd-item weui-tab__bd-item--active">
              <div class="weui-cells" style="background: transparent;">
                <div class="weui-cell">
                  <div class="weui-cell__hd">
                    <div class="tab-rank-number">1</div>
                  </div>
                  <div class="weui-cell__hd">
                    <img class="tab-ava-img" src="image/a.jpg" alt="">
                  </div>
                  <div class="weui-cell__bd">
                    <span>nickname</span>
                  </div>
                  <div class="weui-cell__ft">获得奖品
                    <span>10</span> 个</div>
                </div>
                <div class="weui-cell">
                  <div class="weui-cell__hd">
                    <div class="tab-rank-number">1</div>
                  </div>
                  <div class="weui-cell__hd">
                    <img class="tab-ava-img" src="image/a.jpg" alt="">
                  </div>
                  <div class="weui-cell__bd">
                    <span>nickname</span>
                  </div>
                  <div class="weui-cell__ft">获得奖品
                    <span>10</span> 个</div>
                </div>
              </div>
            </div>
            <div id="rank-yl" class="weui-tab__bd-item">
              <div class="weui-cells" style="background: transparent;">
                <div class="weui-cell">
                  <div class="weui-cell__hd">
                    <div class="tab-rank-number">1</div>
                  </div>
                  <div class="weui-cell__hd">
                    <img class="tab-ava-img" src="image/a.jpg" alt="">
                  </div>
                  <div class="weui-cell__bd">
                    <span>nickname</span>
                  </div>
                  <div class="weui-cell__ft">挑战
                    <span>100</span> 次</div>
                </div>
                <div class="weui-cell">
                  <div class="weui-cell__hd">
                    <div class="tab-rank-number">1</div>
                  </div>
                  <div class="weui-cell__hd">
                    <img class="tab-ava-img" src="image/a.jpg" alt="">
                  </div>
                  <div class="weui-cell__bd">
                    <span>nickname</span>
                  </div>
                  <div class="weui-cell__ft">挑战
                    <span>100</span> 次</div>
                </div>
              </div>
            </div>
            <div id="rank-jp" class="weui-tab__bd-item">
              <div class="weui-flex">
                <div class="weui-flex__item">
                  <a class="btn-lqjp" href="">挑战成功，领取奖品</a>
                </div>
              </div>
              <div class="weui-flex">
                <div class="weui-flex__item">
                  <div class="jp-wrap">
                    <p>
                      <img width="100%" src="image/jp.jpg" alt="">
                    </p>
                  </div>
                  <p class="text-center">奖品展示</p>
                </div>
              </div>
              <div class="weui-flex">
                <div class="weui-flex__item">
                  <div class="jp-wrap">
                    <p>
                      <img width="100%" src="image/jp.jpg" alt="">
                    </p>
                  </div>
                  <p class="text-center">奖品展示</p>
                </div>
              </div>
            </div>

          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 我的战绩部分 -->
  <div id="record" style="display:none;height: 100%;background: #1390e0;">
    <div class="record-top-wrap">
      <div class="text-center record-ava-img">
        <img src="image/a.jpg" alt="">
        <p class="record-nickname">nickname,可领取
          <span>0</span>个奖品</p>
      </div>
      <div class="record-wrap">
        <div class="record-item">
          <p>
            <span>0</span> 次</p>
          <p>挑战机会</p>
        </div>
        <div class="record-item">
          <p>
            <span>0</span> 次</p>
          <p>已挑战</p>
        </div>
        <div class="record-item">
          <p>
            <span>0</span> 分</p>
          <p>最高分</p>
        </div>
      </div>
      <div class="record-btn-wrap">
        <div class="btn-shareRank">
          <a href="javascript:void(0)">
            <i class="fa fa-weixin"></i> 炫耀战绩</a>
        </div>
        <div class="btn-space"></div>
        <div class="btn-shareLife">
          <a href="javascript:void(0)">获得挑战机会</a>
        </div>
      </div>
    </div>
    <div class="weui-flex padlr-15">
      <div class="weui-flex__item">
        <a id="backIndex" class="btn-start">返回主页</a>
      </div>
    </div>
  </div>

  <!-- 开始游戏部分 -->
  <id id="game" style="display: none">
    <div class="game-wrap">
      <!-- 游戏上半部分 -->
      <div class="game-top">
        <div class="weui-flex">
          <div class="weui-flex__item">
            <p style="display: block;" class="text-djs">倒计时：
              <span id="djs">3</span>秒</p>
              <p class="text-djs">剩余时间：</p>
            <div class="weui-progress">
              <div class="weui-progress__bar" style="border-radius: 15px;">
                <div id="djs-progress" class="weui-progress__inner-bar js_progress" style="width:100%;border-radius: 15px;"></div>
              </div>
            </div>
          </div>
        </div>
        <div class="weui-flex">
          <div class="weui-flex__item">
            <p class="text-guanshu text-center">当前关数：
              <span id="gs">1</span>
            </p>
          </div>
        </div>
        <div class="weui-flex">
          <div class="weui-flex__item">
            <div class="gameMainWrap">
              <span id="one">1</span>
              <span id="add">+</span>
              <span id="two">1</span>
              <br>
              <span class="dengyu">=</span>
              <span id="wenhao">3</span>
            </div>
          </div>
        </div>
      </div>
      <!-- 游戏上半部分end -->
      <div class="game-bottom">
        <div class="weui-flex" style="height: 100%;">
          <div class="weui-flex__item">
            <button type="button" id="dui" class="btn-dc btn-dui">
              <i class="fa fa-check"></i>
            </button>
          </div>
          <div class="weui-flex__item">
            <button type="button" id="cuo" class="btn-dc btn-cuo">
              <i class="fa fa-remove"></i>
            </button>
          </div>
        </div>
      </div>
      <!-- 音频 -->
      <audio preload="auto" id="musicDui">
        <source src="audio/dui.mp3" type="audio/mp3">
        <source src="audio/dui.ogg" type="audio/ogg">
      </audio>
      <audio preload="auto" id="musicCuo">
        <source src="audio/cuo.mp3" type="audio/mp3">
        <source src="audio/cuo.ogg" type="audio/ogg">
      </audio>
    </div>
  </id>

  <!-- 游戏结束部分 -->
  <div id="gameOver" style="height: 100%;display: none;">
    <div class="gameover-wrap" style="height: 100%;">
      <div class="weui-flex">
        <div class="weui-flex__item">
          <div class="gameover-text">游戏结束</div>
        </div>
      </div>
      <div class="weui-flex padlr-15">
        <div class="weui-flex__item">
          <a id="gameoverBackIndex" class="btn-start">返回主页</a>
        </div>
      </div>
    </div>
  </div>

  <script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/jquery-weui/1.2.0/js/jquery-weui.min.js"></script>
  <script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
  <script src="js/game.js"></script>
</body>
<script>
  //主页部分ID index
  //我的战绩部分ID record
  //开始游戏部分ID game
  //游戏结束部分ID gameOver
  $(document).ready(function () {
    // 开始游戏按钮点击
    $("#startGame").click(function () {
      $("#index").hide();
      $("#record").hide();
      $("#game").show();
      startGame();
      // $.getScript("http://isundayweb.com/test/danyeadd/js/game.js"); //加载js文件
      // $.getScript("http://isundayweb.com/test/danyeadd/js/game.js", function () { //加载test.js,成功后，并执行回调函数
      //   console.log("加载js文件");
      // });

    });
    // 我的战绩按钮点击
    $("#myRecord").click(function () {
      $("#index").hide();
      $("#record").show();
    });
    // 我的战绩返回主页按钮点击
    $("#backIndex").click(function () {
      $("#record").hide();
      $("#index").show();
    });
    //游戏结束返回主页按钮
    $("#gameoverBackIndex").click(function () {
      $("#gameOver").hide();
      $("#record").hide();
      $("#game").hide();
      $("#index").show();
    });
  });
</script>

</html>