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 相关文章推荐
javascript多种数据类型表格排序代码分析
Sep 11 Javascript
JQuery中的$.getJSON 使用说明
Mar 10 Javascript
到处都是jQuery选择器的年代 不了解它们的性能,行吗
Jun 18 Javascript
jQuery实现鼠标经过弹出提示信息的地图热点效果
Aug 07 Javascript
jquery小火箭返回顶部代码分享
Aug 19 Javascript
JS实现很实用的对联广告代码(可自适应高度)
Sep 18 Javascript
两种方法解决javascript url post 特殊字符转义 + &amp; #
Apr 13 Javascript
Javascript的动态增加类的实现方法
Oct 20 Javascript
基于JavaScript+HTML5 实现打地鼠小游戏逻辑流程图文详解(附完整代码)
Nov 02 Javascript
从源码里了解vue中的nextTick的使用
Nov 22 Javascript
ES6中的class是如何实现的(附Babel编译的ES5代码详解)
May 17 Javascript
React实现全选功能
Aug 25 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
SWFUpload与CI不能正确上传识别文件MIME类型解决方法分享
2011/04/18 PHP
使用php统计字符串中中英文字符的个数
2013/06/23 PHP
Smarty局部缓存的几种方法简介
2014/06/17 PHP
php读取文件内容到数组的方法
2015/03/16 PHP
thinkPHP订单数字提醒功能的实现方法
2016/12/01 PHP
JavaScript基本概念初级讲解论坛贴的学习记录
2009/02/22 Javascript
Javascript 日期处理之时区问题
2009/10/08 Javascript
JavaScript异步调用定时方法并停止该方法实现代码
2012/03/16 Javascript
jquery写个checkbox——类似邮箱全选功能
2013/03/19 Javascript
js获取本机的外网/广域网ip地址完整源码
2013/08/12 Javascript
ajax提交表单实现网页无刷新注册示例
2014/05/08 Javascript
JS中from 表单序列化提交的代码
2017/01/20 Javascript
使用 webpack 插件自动生成 vue 路由文件的方法
2019/08/20 Javascript
JavaScript实现轮播图片完整代码
2020/03/07 Javascript
全面解析JavaScript Module模式
2020/07/24 Javascript
基于element-ui封装表单金额输入框的方法示例
2021/01/06 Javascript
Python正则表达式匹配HTML页面编码
2015/04/08 Python
Python 查看文件的读写权限方法
2018/01/23 Python
Python简单生成随机数的方法示例
2018/03/31 Python
用pandas中的DataFrame时选取行或列的方法
2018/07/11 Python
使用python实现ftp的文件读写方法
2019/07/02 Python
python中break、continue 、exit() 、pass终止循环的区别详解
2019/07/08 Python
Django REST Framework之频率限制的使用
2019/09/29 Python
CSS3实现文字描边的2种方法(小结)
2020/02/14 HTML / CSS
巧克力领导品牌瑞士莲美国官网:Lindt Chocolate美国
2016/08/25 全球购物
澳大利亚最大的百货公司:Myer
2018/12/21 全球购物
Steiff台湾官网:德国金耳釦泰迪熊
2019/12/26 全球购物
世界上最受欢迎的花店:1-800-Flowers.com
2020/06/01 全球购物
廉政教育的心得体会
2014/09/01 职场文书
公司委托书范本5篇
2014/09/20 职场文书
2014年小学教研工作总结
2014/12/06 职场文书
庆元旦主持词
2015/07/06 职场文书
导游词之晋城蟒河
2019/12/12 职场文书
MySQL数字类型自增的坑
2021/05/07 MySQL
简单总结SpringMVC拦截器的使用方法
2021/06/28 Java/Android
分享提高 Python 代码的可读性的技巧
2022/03/03 Python