search

Home >Web Front-end >JS Tutorial >js timer code sharing that imitates the appearance of apple iwatch_javascript skills

js timer code sharing that imitates the appearance of apple iwatch_javascript skills

WBOY
WBOYOriginal
2016-05-16 15:42:231596browse

The example in this article describes the special effects similar to the Apple iwatch timer implemented by JS CSS3. Share it with everyone for your reference. The details are as follows:
The special effect similar to the Apple iwatch timer implemented by JS CSS3 is a piece of code that implements the effect similar to the most popular Apple iwatch timer recently. It has start and reset buttons and supports counting display.
运行效果图：                                -------------------查看效果 下载源码----------- --------

Tips: If the browser does not work properly, you can try switching the browsing mode.
The JS CSS3 implementation similar to the Apple iwatch timer special effects code shared with you is as follows 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>牛人js防苹果iwatch计时器</title>
<link href="css/zzsc.css" rel="stylesheet" type="text/css">
</head>
<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/zzsc.js"></script>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
</div>
</body>
</html>

The above is the JS CSS3 implementation similar to the Apple iwatch timer special effect code shared with you. I hope you can like it.

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：JavaScript reference type time Date and array Array_javascript skillsNext article：JavaScript reference type time Date and array Array_javascript skills

Related articles

See more