js仿苹果iwatch外观的计时器代码分享


Posted in Javascript onAugust 26, 2015

本文实例讲述了JS+CSS3实现的类似于苹果iwatch计时器特效。分享给大家供大家参考。具体如下:
JS+CSS3实现的类似于苹果iwatch计时器特效是一段实现了类似于最近最火爆的苹果iwatch计时器效果的代码,带有开始和重置按钮,支持计次显示。
运行效果图:                                -------------------查看效果 下载源码-------------------

js仿苹果iwatch外观的计时器代码分享

小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式。
为大家分享的JS+CSS3实现的类似于苹果iwatch计时器特效代码如下

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

以上就是为大家分享的JS+CSS3实现的类似于苹果iwatch计时器特效代码,希望大家可以喜欢。

Javascript 相关文章推荐
一句话JavaScript表单验证代码
Aug 02 Javascript
js 利用className得到对象的实现代码
Nov 15 Javascript
javascript针对DOM的应用分析(三)
Apr 15 Javascript
jQuery实现密保互斥问题解决方案
Aug 16 Javascript
js截取字符串的两种方法及区别详解
Nov 05 Javascript
IE中getElementsByName()对有些元素无效的解决方案
Sep 28 Javascript
浅谈Node.js 子进程与应用场景
Jan 24 Javascript
LayerClose弹窗关闭刷新方法
Aug 17 Javascript
使用Vuex解决Vue中的身份验证问题
Sep 28 Javascript
微信小程序日历效果
Dec 29 Javascript
vue element中axios下载文件(后端Python)
May 10 Javascript
JavaScript面试中常考的字符串操作方法大全(包含ES6)
May 10 Javascript
jQuery下拉友情链接美化效果代码分享
Aug 26 #Javascript
jQuery ui实现动感的圆角渐变网站导航菜单效果代码
Aug 26 #Javascript
jquery实现平滑的二级下拉菜单效果
Aug 26 #Javascript
纯javascript实现分页(两种方法)
Aug 26 #Javascript
jquery实现LED广告牌旋转系统图片切换效果代码分享
Aug 26 #Javascript
jquery实现图片水平滚动效果代码分享
Aug 26 #Javascript
jquery validate和jquery form 插件组合实现验证表单后AJAX提交
Aug 26 #Javascript
You might like
咖啡知识大全
2021/03/03 新手入门
php 启动报错如何解决
2014/01/17 PHP
ThinkPHP实现带验证码的文件上传功能实例
2014/11/01 PHP
PHP将Excel导入数据库及数据库数据导出至Excel的方法
2015/06/24 PHP
yii2 数据库读写分离配置示例
2017/02/10 PHP
ThinkPHP框架整合微信支付之JSAPI模式图文详解
2019/04/09 PHP
prototype1.4中文手册
2006/09/22 Javascript
javascript为按钮注册回车事件(设置默认按钮)的方法
2015/05/09 Javascript
JS实现横向拉伸动感伸缩菜单效果代码
2015/09/04 Javascript
jQuery实现图片上传和裁剪插件Croppie
2015/11/29 Javascript
react native与webview通信的示例代码
2017/09/25 Javascript
nodejs实现的连接MySQL数据库功能示例
2018/01/25 NodeJs
vue中axios解决跨域问题和拦截器的使用方法
2018/03/07 Javascript
jQuery-ui插件sortable实现自由拖动排序
2018/12/01 jQuery
[09:13]2014DOTA2国际邀请赛 中国区预选赛coser表演
2014/05/23 DOTA
[09:59]DOTA2-DPC中国联赛2月7日Recap集锦
2021/03/11 DOTA
python使用cookie库操保存cookie详解
2014/03/03 Python
matplotlib.pyplot画图 图片的二进制流的获取方法
2018/05/24 Python
python日期相关操作实例小结
2019/06/24 Python
Windows平台Python编程必会模块之pywin32介绍
2019/10/01 Python
tensorflow没有output结点,存储成pb文件的例子
2020/01/04 Python
Python装饰器原理与基本用法分析
2020/01/07 Python
在python tkinter界面中添加按钮的实例
2020/03/04 Python
美国领先的家庭智能音响系统品牌:Sonos
2018/07/20 全球购物
为什么要用EJB
2014/04/17 面试题
办公室保洁员岗位职责
2013/12/02 职场文书
经理秘书找工作求职信
2013/12/19 职场文书
宾馆总经理岗位职责
2014/02/14 职场文书
幼儿园教师工作感言
2014/02/15 职场文书
期末学生评语大全
2014/04/24 职场文书
十佳护士先进事迹
2014/05/08 职场文书
冬季施工防火方案
2014/05/17 职场文书
反四风对照检查材料
2014/09/22 职场文书
个人批评与自我批评范文
2014/10/17 职场文书
党的群众路线教育实践活动总结材料
2014/10/30 职场文书
团支部书记竞选稿
2015/11/21 职场文书