jQuery计时器_JS CSS3实现苹果iwatch计时器

本Demo是使用JS和CSS3实现苹果iwatch计时器、带有开始和重置按钮、支持计次显示、效果还是非常不错的、希望对大家有用、以下为程序运行的效果图

HTML代码

<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>

JS代码

function start() {
  if (!interval) {
	  offset = Date.now();
	  watch.classList.add(´go´);
	  watch.classList.remove(´pause´);
	  startButton.classList.add(´hide´);
	  stopButton.classList.remove(´hide´);
	  resetButton.classList.add(´hide´);
	  lapButton.classList.remove(´hide´);
	  interval = setInterval(update, 1);
	  graph.state.pause = false;
	  if (!graph.state.inUse) {
		  breakLoop = 0;
		  graph.animate(canvas, ctx, graph.msc.startTime);
		  graph.state.inUse = true;
	  }
  }
}

function stop() {
  if (interval) {
	  watch.classList.add(´pause´);
	  startButton.classList.remove(´hide´);
	  stopButton.classList.add(´hide´);
	  resetButton.classList.remove(´hide´);
	  lapButton.classList.add(´hide´);
	  clearInterval(interval);
	  interval = null;
	  graph.state.pause = true;
  }
}

function reset() {
  clock = 0;
  lapClock = 0;
  lapOffset = 0;
  lapTotal = 0;
  watch.classList.remove(´go´);
  watch.classList.remove(´pause´);
  render();
  graph.resetGraph(ctx, canvas);
}

function lap() {
  //记时
  var temp = clock - lapTotal;

  lapTotal  = temp;
  lapOffset = clock;
  var val = graph.recordLap(graph.coords);

  var current = {
	  ´time_ms´: temp,
	  ´lap_number´: val.lap_number,
	  ´x´: graph.coords.prev.x,
	  ´y´: graph.coords.prev.y
  }
  laps.push(current);
}

function update() {
  clock  = delta();
  lapClock = clock - lapOffset;
  render();
}

最后给贴上Demo的源代码、希望对大家有用、有兴趣的哥们可以下载看看

源代码下载链接: http://dwtedx.com/download.html?bdkey=s/1eQpQw0q 密码: ht89