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 相关文章推荐
JS学习之一个简易的日历控件
Mar 24 Javascript
js模拟点击事件实现代码
Nov 06 Javascript
js获取客户端网卡的IP地址、MAC地址
Mar 26 Javascript
使用iojs的jsdom库实现同步系统时间
Apr 20 Javascript
微信小程序 UI与容器组件总结
Feb 21 Javascript
关于Angular2 + node接口调试的解决方案
May 28 Javascript
VueJS 集成 Medium Editor的示例代码 (自定义编辑器按钮)
Aug 24 Javascript
详解使用angular的HttpClient搭配rxjs
Sep 01 Javascript
关于react中组件通信的几种方式详解
Dec 10 Javascript
Node.js 的 GC 机制详解
Jun 03 Javascript
Vue.js组件实现选项卡以及切换特效
Jul 24 Javascript
js属性对象的hasOwnProperty方法的使用
Feb 05 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
NT IIS下用ODBC连接数据库
2006/10/09 PHP
如何阻止网站被恶意反向代理访问(防网站镜像)
2014/03/18 PHP
CI框架安全类Security.php源码分析
2014/11/04 PHP
JavaScript 学习技巧
2010/02/17 Javascript
jQuery语法总结和注意事项小结
2012/11/11 Javascript
理解JavaScript的变量的入门教程
2015/07/07 Javascript
Google Maps基础及实例解析
2016/08/06 Javascript
Vue.js:使用Vue-Router 2实现路由功能介绍
2017/02/22 Javascript
vue-resource调用promise取数据方式详解
2017/07/21 Javascript
JavaScript键盘事件响应顺序详解
2019/09/30 Javascript
Vue-cli3项目引入Typescript的实现方法
2019/10/18 Javascript
Vue中rem与postcss-pxtorem的应用详解
2019/11/20 Javascript
js中的面向对象之对象常见创建方法详解
2019/12/16 Javascript
原生JavaScript写出Tabs标签页的实例代码
2020/07/20 Javascript
[46:44]VG vs TNC Supermajor小组赛B组败者组决赛 BO3 第一场 6.2
2018/06/03 DOTA
python 字符串格式化代码
2013/03/17 Python
python通过自定义isnumber函数判断字符串是否为数字的方法
2015/04/23 Python
python生成不重复随机数和对list乱序的解决方法
2018/04/09 Python
python3.6.3+opencv3.3.0实现动态人脸捕获
2018/05/25 Python
Python RabbitMQ消息队列实现rpc
2018/05/30 Python
浅谈Python2、Python3相对路径、绝对路径导入方法
2018/06/22 Python
Django csrf 验证问题的实现
2018/10/09 Python
Python docx库用法示例分析
2019/02/16 Python
python日志模块logbook使用方法
2019/09/19 Python
浅谈ROC曲线的最佳阈值如何选取
2020/02/28 Python
Python语言编写智力问答小游戏功能
2020/10/13 Python
python 怎样进行内存管理
2020/11/10 Python
电大自我鉴定范文
2013/10/01 职场文书
中医药大学毕业生自荐信
2013/11/08 职场文书
应急处置方案
2014/06/16 职场文书
2014年体育教学工作总结
2014/12/09 职场文书
教师“一帮一”结对子活动总结
2015/05/07 职场文书
纪委立案决定书
2015/06/24 职场文书
小学运动会入场口号
2015/12/24 职场文书
MySQL 8.0 驱动与阿里druid版本兼容问题解决
2021/07/01 MySQL
MySQL约束(创建表时的各种条件说明)
2022/06/21 MySQL