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学习笔记(五) Array 数组类型介绍
Jun 19 Javascript
浅谈javascript中onbeforeunload与onunload事件
Dec 10 Javascript
jQuery siblings()用法实例详解
Apr 26 Javascript
Jquery表单验证失败后不提交的解决方法
Oct 18 Javascript
jquery css实现邮箱自动补全
Nov 14 Javascript
js自定义QQ菜单效果
Jan 10 Javascript
js实现下拉菜单效果
Mar 01 Javascript
vue中的provide/inject的学习使用
May 09 Javascript
vue+elementUI 复杂表单的验证、数据提交方案问题
Jun 24 Javascript
js中console在一行内打印字符串和对象的方法
Sep 10 Javascript
Vue引入Stylus知识点总结
Jan 16 Javascript
Vue.js中v-for指令的用法介绍
Mar 13 Vue.js
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部分常见问题总结
2006/10/09 PHP
使PHP自定义函数返回多个值
2006/11/26 PHP
php去除换行符的方法小结(PHP_EOL变量的使用)
2013/02/16 PHP
php中error与exception的区别及应用
2014/07/28 PHP
Yii实现简单分页的方法
2016/04/29 PHP
PHP+redis实现的悲观锁机制示例
2018/06/12 PHP
取得父标签
2006/11/14 Javascript
Javascript调用C#代码
2011/01/17 Javascript
一款Jquery 分页插件的改造方法(服务器端分页)
2011/07/11 Javascript
利用js 进行输入框自动匹配字符的小例子
2013/06/29 Javascript
使用js画图之圆、弧、扇形
2015/01/12 Javascript
jquery实现鼠标滑过后动态图片提示效果实例
2015/08/10 Javascript
基于BootStarp的Dailog
2016/04/28 Javascript
微信小程序 地图定位简单实例
2016/10/14 Javascript
vue 监听某个div垂直滚动条下拉到底部的方法
2018/09/15 Javascript
Vue通过getAction的finally来最大程度避免影响主数据呈现问题
2020/04/24 Javascript
[02:23]完美世界全国高校联赛街访DOTA2第一期
2019/11/28 DOTA
[03:11]完美世界DOTA2联赛PWL DAY8集锦
2020/11/09 DOTA
Python中多线程thread与threading的实现方法
2014/08/18 Python
python 递归遍历文件夹,并打印满足条件的文件路径实例
2017/08/30 Python
python逐行读写txt文件的实例讲解
2018/04/03 Python
python 执行shell命令并将结果保存的实例
2018/05/11 Python
pytorch使用Variable实现线性回归
2019/05/21 Python
Python使用pyautocad+openpyxl处理cad文件示例
2019/07/11 Python
python logging添加filter教程
2019/12/24 Python
详解python 降级到3.6终极解决方案
2020/02/06 Python
PyCharm 2020.1版安装破解注册码永久激活(激活到2089年)
2020/09/24 Python
一个入门级python爬虫教程详解
2021/01/27 Python
Html5 canvas实现粒子时钟的示例代码
2018/09/06 HTML / CSS
为什么group by 和order by会使查询变慢
2014/05/16 面试题
总经理助理职责
2014/02/04 职场文书
人力资源部门的主要职能
2014/02/22 职场文书
民主生活会整改措施(党员)
2014/09/18 职场文书
2016大学先进团支部事迹材料
2016/03/01 职场文书
java设计模式--七大原则详解
2021/07/21 Java/Android
Golang原生rpc(rpc服务端源码解读)
2022/04/07 Golang