smart-campus
/
EverydaysignIn.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>每日签到</title>
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"
    />
    <link rel="stylesheet" type="text/css" href="signIn/css/style.css" />
    <script src="signIn/js/zepto.min.js" type="text/javascript"></script>
    <script src="signIn/js/flexible.js" type="text/javascript"></script>
  </head>
  <body>
    <div class="top-title">每日签到</div>
    <!--签到-->
    <div class="sign-in">
      <div class="sign-info">
        <div class="score">
          <span>+5</span>
          <span>+10</span>
          <span>+15</span>
          <span class="text-yellow">+20</span>
          <span>+25</span>
          <span>+30</span>
          <span class="text-yellow">+35</span>
        </div>
        <div class="num sign2">
          <span class="active">1</span>
          <span class="active now">2</span>
          <span>3</span>
          <span>4</span>
          <span>5</span>
          <span>6</span>
          <span>7</span>
        </div>
        <div class="date">
          <span>第1天</span>
          <span>第2天</span>
          <span>第3天</span>
          <span>第4天</span>
          <span>第5天</span>
          <span>第6天</span>
          <span>第7天</span>
        </div>
      </div>
      <div class="sign-btn">
        <a href="javascript:;" class="btn bg-blue" id="sign">签&nbsp;到</a>
      </div>
    </div>
    <!--说明-->
    <div class="explain">
      <div class="title"><span>签到说明</span></div>
    </div>
    <div class="explain-desc">
      <ul>
        <li>每日签到一次，连续签到奖励更多</li>
        <li>每日一名签到幸运星次日公布，可获得神秘大奖</li>
      </ul>
    </div>
    <!--昨日星-->
    <div class="star">
      <div class="head">
        <img src="signIn/picture/head.png" alt="" />
        <span>明德小新</span>
      </div>
      <div>
        <span class="tip">获得</span>
        <span class="text-blue">+200成长值</span>
      </div>
    </div>
    <!--弹窗-->
    <div class="dialog">
      <div class="mask"></div>
      <div class="dialog-box">
        <div class="content">
          <p>已连续签到<span class="text-blue">1</span>天</p>
          <p class="gold"><img src="signIn/picture/gold.png" /><span class="text-blue">+5</span></p>
          <a href="javascript:;" class="btn bg-blue">明天签到可获得10积分</a>
        </div>
      </div>
      <div class="dialog-close"></div>
    </div>
  </body>
</html>
<script type="text/javascript">
  // 签到
  $("#sign").click(function () {
    $(".dialog").fadeIn();
    // 以下为模拟签到，具体应该根据后端返回的数据来处理逻辑
    var index = $(".sign-info .num span.active").length;
    console.log(index);
    if (index == 7) {
      alert("恭喜您，成功签到一周");
      return;
    }
    $(".sign-info .num span.active")
      .eq(index - 1)
      .removeClass("now");
    $(".sign-info .num span").eq(index).addClass("active now");
    $(".sign-info .num").addClass("sign" + (index + 1));
  });
  // 关闭弹窗
  $(".dialog-close,.dialog .mask").click(function () {
    $(".dialog").fadeOut();
  });
</script>