js仿苹果iwatch计时器

高手用JavaScript仿苹果iWatch计时器。和真是的计时器几乎一模一样，有分圈计时，点击开始，开始计时，点击计时，计时一圈，每计时一圈，会显示一个点，当计时度多圈，会形成一条线，可以看出没圈的水平。点击停止，停止计时。上面三个表盘，分别代表分、秒和毫秒。右上角显示当前时间。
表盘完全用css3写的，所以不兼容IE8及其以下版本的浏览器。


1、引入5imoban.net.css

2、在body放入下面的额代码：

<div class="container">
  <div class="frame">
    <div class="go pause" id="watch">
      <div class="blur-top"></div>
      <div class="face">
        <div class="row-1">
          <div class="timer">
            <span id="timer_min">00</span>
            <span>:</span>
            <span id="timer_sec">01</span>
            <span>.</span>
            <span id="timer_mil">44</span>
          </div>
          <div class="time">
            <span id="time_mins">14</span>
            <span>:</span>
            <span id="time_hours">17</span>
          </div>
        </div>
        <div class="row-2">
          <div class="clock c c1">
            <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
            <span class="inner-cover"></span>
            <i></i><i></i><i></i>
            <span class="outer-cover"></span>
            <div class="ns ns1">
              <b>05</b><b>10</b><b>15</b><b>20</b><b>25</b><b>30</b>
            </div>
            <span class="pin"></span>
            <span class="hand"></span>
          </div>
          <div class="clock c c2">
            <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
            <span class="inner-cover"></span>
            <i></i><i></i><i></i><i></i><i></i><i></i>
            <span class="outer-cover"></span>
            <div class="ns ns2">
              <b>15</b><b>30</b><b>45</b><b>60</b>
            </div>
            <span class="pin"></span>
            <span class="hand"></span>
          </div>
          <div class="clock d c3">
            <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
            <span class="inner-cover"></span>
            <i></i><i></i><i></i><i></i><i></i>
            <span class="outer-cover"></span>
            <div class="ns ns3">
              <b>1</b><b>2</b><b>3</b><b>4</b><b>5</b><b>6</b><b>7</b><b>8</b><b>9</b><b>0</b>
            </div>
            <span class="pin"></span>
            <span class="hand"></span>
          </div>
        </div>
        <div class="row row-3">
          <div class="lap_timer">
            <span id="lap_min">00</span>
            <span>:</span>
            <span id="lap_sec">00</span>
            <span>.</span>
            <span id="lap_mil">63</span>
          </div>
        </div>
        <div class="canvasContainer">
          <canvas id="graph" width="185" height="73"></canvas>
        </div>
        <div id="avg_time"></div>
        <div class="lap_numbers_container">
          <div id="lap_numbers"></div>
        </div>
        <div class="ctrls">
          <a class="" href="#start" id="start">开始</a>
          <a href="#stop" id="stop" class="hide">停止</a>
          <a href="#reset" id="reset" class="">重置</a>
          <a class="hide" href="#lap" id="lap">计时</a>
        </div>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript" src="js/5imoban.net.js"></script>

部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！