jquery+html5制作超酷的圆盘时钟表


Posted in Javascript onApril 14, 2015

自己封装的一个用HTML5+jQuery写的时钟表

代码:

<!DOCTYPE html PUBLIC "-//W3C//h2D XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/h2D/xhtml1-transitional.h2d">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>超酷数码钟表</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs
/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
//引用的是在线jquery地址,如果不行请自行下载切换
(function($){
  $.fn.drawClock = function(options){
    var mainId = $(this);
     
    //设置默认参数
    var defaultOptions = {
      'width': '300px',
      'height': '300px',
      'margin': '200px auto',
      'border': '1px solid #888',
      'border-radius': '50%',
      'box-shadow': '2px 2px 4px #111'
    };
    var options = $.extend(defaultOptions, options);
     
    mainId.css({
      'width': options.width, 
      'height': options.height, 
      'margin': options.margin,
      'border': options.border,
      'border-radius': options['border-radius'],
      'box-shadow': options['box-shadow'], 
      'position': 'relative'
    }).css({
      'background': '-webkit-gradient(radial, ' + mainId.width()/2 + ' ' + mainId.height()/2 + ', 0, ' + mainId.width()/2 + ' ' + mainId.height()/2 + ', ' + mainId.width()/2 + ', from(#ffe), to(#eee))', 
      'background': '-moz-radial-gradient(circle closest-side, #ffe 0%, #eee 100%)'
    });
     
    //钟表盘中心圆
    $("<div id='circle'></div>").appendTo(mainId).css({
      'width': '20px',
      'height': '20px',
      'border-radius': '50%',
      'box-shadow': '0 0 5px rgba(0,0,0,0.8)',
      'position': 'absolute',
      'z-index': 999,
      'background': '-webkit-gradient(radial, ' + mainId.width()/2 + ' ' + mainId.height()/2 + ', 0, ' + mainId.width()/2 + ' ' + mainId.height()/2 + ', ' + mainId.width()/2 + ', from(#ffe), to(#eee))',
      'background': '-moz-radial-gradient(circle, #eee 30%, #ffe 100%)'
    }).css({
      'left': mainId.width()/2 - $('#circle').width()/2,
      'top': mainId.height()/2 - $('#circle').height()/2
    });
     
    var dateTime = new Date();
    var oHours = dateTime.getHours();
    var oMinutes = dateTime.getMinutes();
    var oSeconds = dateTime.getSeconds();
     
    //初始化时分秒
    var hPointer = drawPointer(mainId.width()/2, mainId.height()/2, mainId.width()/2*(3/6), 5, "#333", -90+oHours*30+oMinutes*6/12);
    var mPointer = drawPointer(mainId.width()/2, mainId.height()/2, mainId.width()/2*(4/6), 4, "#666", -90+oMinutes*6);
    var sPointer = drawPointer(mainId.width()/2, mainId.height()/2, mainId.width()/2*(5/6), 3, "#f00", -90+oSeconds*6);
     
    //运动时分秒
    var timer = setInterval(function(){
      dateTime = new Date();
      oHours = dateTime.getHours();
      oMinutes = dateTime.getMinutes();
      oSeconds = dateTime.getSeconds();    
      hPointer.css({'transform': 'rotate(' + (-90+oHours*30+oMinutes*6/12) + 'deg)'});
      mPointer.css({'transform': 'rotate(' + (-90+oMinutes*6) + 'deg)'});
      sPointer.css({'transform': 'rotate(' + (-90+oSeconds*6) + 'deg)'});
    }, 1000);
     
     
    //绘制钟表刻度
    for(var i=0; i<60; i++){
      var width = 3, height = 6, oBcolor = '#111';
      if(i%5 == 0){
        width = 5;
        height = 10;
      }
      if(i%15 == 0){
        oBcolor = 'red';
      }
      $("<div class='clockMark'></div>").appendTo(mainId).css({
        'width': width,
        'height': height,
        'position': 'absolute',
        'top': 0,
        'left': mainId.width()/2,
        'background': oBcolor,
        'transform': 'rotate(' + i*6 + 'deg)',
        "transform-origin": "0 " + mainId.width()/2+'px'
      });
    }
     
    //绘制钟表指针
    function drawPointer (startx, starty, width, height, bcolor, angle) {
      var oPointer = $("<div></div>");
      oPointer.appendTo(mainId).css({
        'width': width,
        'height': height,
        'position': 'absolute',
        'top': starty,
        'left': startx,
        'background': bcolor,
        'transform': 'rotate(' + angle + 'deg)',
        'transform-origin': '0 0'
      });
      return oPointer;
    }
     
    return this;
  }
})(jQuery);
</script>
<script type="text/javascript">
$(function(){
  $('#clock').drawClock();
});
</script>
</head>
 
<body>
  <div id="clock"></div>
</body>
</html>

演示图:

jquery+html5制作超酷的圆盘时钟表 

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
让iframe自适应高度(支持XHTML,支持FF)
Jul 24 Javascript
JavaScript 直接操作本地文件的实现代码
Dec 01 Javascript
在JS中解析HTML字符串示例代码
Apr 16 Javascript
JS基于面向对象实现的拖拽库实例
Sep 24 Javascript
javascript实现对表格元素进行排序操作
Nov 18 Javascript
javascript实现uploadify上传格式以及个数限制
Nov 23 Javascript
利用js+css+html实现固定table的列头不动
Dec 08 Javascript
js判断PC端与移动端跳转
Dec 24 Javascript
详解打造 Vue.js 可复用组件
Mar 24 Javascript
使用ajax的post同步执行(实现方法)
Dec 21 Javascript
jQuery实现定时隐藏对话框的方法分析
Feb 12 jQuery
js运算符的一些特殊用法
Jul 29 Javascript
JavaScript将字符串转换为整数的方法
Apr 14 #Javascript
使用javascript实现判断当前浏览器
Apr 14 #Javascript
jQuery获得指定元素坐标的方法
Apr 14 #Javascript
JavaScript时间转换处理函数
Apr 14 #Javascript
JavaScript整除运算函数ceil和floor的区别分析
Apr 14 #Javascript
js正则表达式匹配数字字母下划线等
Apr 14 #Javascript
JavaScript使用Replace进行字符串替换的方法
Apr 14 #Javascript
You might like
php 文件上传类代码
2011/08/06 PHP
PHP 获取文件路径(灵活应用__FILE__)
2013/02/15 PHP
基于php上传图片重命名的6种解决方法的详细介绍
2013/04/28 PHP
php接口和抽象类使用示例详解
2014/03/02 PHP
JavaScript Date对象使用总结
2009/05/14 Javascript
jquery中的$(document).ready()与window.onload的区别
2009/11/18 Javascript
javascript时间自动刷新实现原理与步骤
2013/01/06 Javascript
Node.js中的事件驱动编程详解
2014/08/16 Javascript
angularjs中的e2e测试实例
2014/12/06 Javascript
jquery+CSS实现的多级竖向展开树形TRee菜单效果
2015/08/24 Javascript
vuejs在解析时出现闪烁的原因及防止闪烁的方法
2016/09/19 Javascript
详解前端构建工具gulpjs的使用介绍及技巧
2017/01/19 Javascript
Bootstrap下拉菜单更改为悬停(hover)触发的方法
2017/05/24 Javascript
CSS3+JavaScript实现翻页幻灯片效果
2017/06/28 Javascript
浅谈Node模块系统及其模式
2017/11/17 Javascript
Nodejs中crypto模块的安全知识讲解
2018/01/03 NodeJs
vue2中引用及使用 better-scroll的方法详解
2018/11/15 Javascript
JavaScript作用域链实例详解
2019/01/21 Javascript
原生js实现获取form表单数据代码实例
2019/03/27 Javascript
vue-cli点击实现全屏功能
2020/03/07 Javascript
[01:18:21]EG vs TNC Supermajor小组赛B组败者组第一轮 BO3 第一场 6.2
2018/06/03 DOTA
[01:17:47]TNC vs VGJ.S 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python3制作捧腹网段子页爬虫
2017/02/12 Python
Python SQLite3简介
2018/02/22 Python
使用python自动追踪你的快递(物流推送邮箱)
2020/03/17 Python
解决Opencv+Python cv2.imshow闪退问题
2020/04/24 Python
欧缇丽美国官网:Caudalie美国
2016/12/31 全球购物
英国家庭和商业健身器材购物网站:Fitness Options
2018/07/05 全球购物
水上运动奥特莱斯:Wasterports Outlet
2018/08/08 全球购物
专科毕业生自我鉴定
2013/12/01 职场文书
面试后感谢信怎么写
2014/02/01 职场文书
保密承诺书范文
2014/03/27 职场文书
护理专业自荐书
2014/06/04 职场文书
党员评议表自我评价范文
2014/10/20 职场文书
业务员年终工作总结2015
2015/05/28 职场文书
Angular CLI发布路径的配置项浅析
2021/03/29 Javascript