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

代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<!DOCTYPE html PUBLIC "-//W3C//h2D XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/h2D/xhtml1-transitional.h2d">
<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>

演示图：

软件工程师薪水
php工程师待遇
前端工程师

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

jquery+html5制作超酷的圆盘时钟表的更多相关文章

  1. jQuery和CSS3超酷表单美化插件

     这是一款效果很精美炫酷的jQuery和CSS3联系方式表单美化插件.大多数站点上都有让用户填写的联系方式表单,一个设计良好的表单可以大大的提升用户的体验度.该表单美化插件在原生HTML表单的基础上进 ...

  2. 10款基于jquery实现的超酷动画源码

    1.jQuery二级下拉菜单 下拉箭头翻转动画 之前我们分享过不少基于jQuery的二级下拉菜单,甚至是多级的下拉菜单,比如这款jQuery/CSS3飘带状多级下拉菜单就非常华丽.但今天要介绍的这款j ...

  3. 基于jQuery和CSS3超酷Material Design风格滑动菜单导航特效

    分享一款效果非常炫酷的谷歌 Material Design 风格jQuery和CSS3滑动选项卡特效.该选项卡特效集合了扁平风格设计和按钮点击波特效.是一款设计的非常不错的Material Desig ...

  4. PS如何制作超酷3D字效果

    效果图.jpg (24.94 KB) 2008-4-4 21:46 1.打开PS 执行文件-新建-新建550X400像素空白文档 1.jpg (36.69 KB) 2008-4-4 21:46 2.输 ...

  5. HTML5/CSS3超酷环形动画菜单

    在线演示 本地下载

  6. 8款耀眼的jQuery/HTML5焦点图滑块插件

    1.HTML5/CSS3超酷焦点图特效 带前后翻页按钮 今天要分享的这款HTML5/CSS3焦点图插件切换效果比较简单,但是外观和功能却十分强大.该CSS3焦点图在切换图片时,图片以淡入淡出的方式缩小 ...

  7. 超炫酷的jQuery/HTML5应用效果及源码

    jQuery非常强大,我们之前也用jQuery分享过很多实用的插件.HTML5可以让网页变得更加绚丽多彩,将HTML5和jQuery结合使用那将发挥更棒的效果. 今天向大家收集了一些关于HTML5和j ...

  8. 8款超酷的HTML5 3D图片动画源码

    1.HTML5移动端图片左右切换动画 今天要给大家分享一款很不错的图片左右切换焦点图动画,并且支持移动端触摸滑动.功能上,这款HTML5图片播放器支持鼠标滑动.手机端触摸滑动以及自动播放.外观上,这款 ...

  9. 精选10款超酷的HTML5/CSS3菜单

    今天向大家精选了10款超酷的HTML5/CSS3菜单,给你的网页添加不一样的精彩,一起来围观一下吧. 1.CSS3手风琴菜单 下拉展开带弹性动画 利用CSS3技术可以实现各种各样的网页菜单,我们之前也 ...

随机推荐

  1. 8.Git撤销修改

    有一个文件内容如下: $ cat README.md the first ... the second ... the third ... - 文件自修改后还没有被放到暂存区,现在,撤销修改就回到和版 ...

  2. node-schedule 实现定时任务使用方法记录

    在项目中有个每天0点执行的函数,本来想用setInterval来实现,但觉得这种需求以后应该还会有,自己写可能拓展性不高.搜了一下发现了node-schedule这个包.现在记录一下使用方法 node ...

  3. java, android的aes等加密库

    https://github.com/scottyab/AESCrypt-Android https://github.com/PDDStudio/EncryptedPreferences       ...

  4. django之中间件、缓存、信号、admin内置后台

    目录: 中间件 缓存 信号 admin后台 一.中间件 1.什么是中间件? 中间件是一个.一个的管道,如果相对任何所有的通过Django的请求进行管理都需要自定义中间件 中间件可以对进来的请求和出去的 ...

  5. mysql数据库访问权限限制设置

    ---只能本地访问,设置随意访问 update user set host='%' where host='localhost': flush privileges; ---随意访问,设置只能本地访问 ...

  6. 6.2 Controllers -- Representing Multipe Models

    1. 一个controller的model可以代表几个记录也可以代表单个.这里,路由的model hook返回一个歌曲数组: app/routes/songs.js export default Em ...

  7. SVD在餐馆菜肴推荐系统中的应用

    SVD在餐馆菜肴推荐系统中的应用 摘要:餐馆可以分为很多类别,比如中式.美式.日式等等.但是这些类别不一定够用,有的人喜欢混合类别.对用户对菜肴的点评数据进行分析,可以提取出区分菜品的真正因素,利用这 ...

  8. AtCoder Beginner Contest 114 Solution

    A 753 Solved. #include <bits/stdc++.h> using namespace std; ]; int main() { mp[] = mp[] = mp[] ...

  9. uva 10254

    如果我们设f[i]为4个柱子时把i个东东从一个柱子移到另一个柱子所用的最少步骤,设g[i]为3个柱子时对应的值,我们可以得到f[n]=min{2*f[k]+g[n-k]},其中g[i]是已知的为2^i ...

  10. 587. Erect the Fence（凸包算法）

    问题 给定一群树的坐标点,画个围栏把所有树围起来(凸包). 至少有一棵树,输入和输出没有顺序. Input: [[1,1],[2,2],[2,0],[2,4],[3,3],[4,2]] Output: ...