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

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

代码：

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">

<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': '-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制作超酷的圆盘时钟表的更多相关文章

jQuery和CSS3超酷表单美化插件
这是一款效果很精美炫酷的jQuery和CSS3联系方式表单美化插件.大多数站点上都有让用户填写的联系方式表单,一个设计良好的表单可以大大的提升用户的体验度.该表单美化插件在原生HTML表单的基础上进 ...
10款基于jquery实现的超酷动画源码
1.jQuery二级下拉菜单下拉箭头翻转动画之前我们分享过不少基于jQuery的二级下拉菜单,甚至是多级的下拉菜单,比如这款jQuery/CSS3飘带状多级下拉菜单就非常华丽.但今天要介绍的这款j ...
基于jQuery和CSS3超酷Material Design风格滑动菜单导航特效
分享一款效果非常炫酷的谷歌 Material Design 风格jQuery和CSS3滑动选项卡特效.该选项卡特效集合了扁平风格设计和按钮点击波特效.是一款设计的非常不错的Material Desig ...
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.输 ...
HTML5/CSS3超酷环形动画菜单
在线演示本地下载
8款耀眼的jQuery/HTML5焦点图滑块插件
1.HTML5/CSS3超酷焦点图特效带前后翻页按钮今天要分享的这款HTML5/CSS3焦点图插件切换效果比较简单,但是外观和功能却十分强大.该CSS3焦点图在切换图片时,图片以淡入淡出的方式缩小 ...
超炫酷的jQuery/HTML5应用效果及源码
jQuery非常强大,我们之前也用jQuery分享过很多实用的插件.HTML5可以让网页变得更加绚丽多彩,将HTML5和jQuery结合使用那将发挥更棒的效果. 今天向大家收集了一些关于HTML5和j ...
8款超酷的HTML5 3D图片动画源码
1.HTML5移动端图片左右切换动画今天要给大家分享一款很不错的图片左右切换焦点图动画,并且支持移动端触摸滑动.功能上,这款HTML5图片播放器支持鼠标滑动.手机端触摸滑动以及自动播放.外观上,这款 ...
精选10款超酷的HTML5/CSS3菜单
今天向大家精选了10款超酷的HTML5/CSS3菜单,给你的网页添加不一样的精彩,一起来围观一下吧. 1.CSS3手风琴菜单下拉展开带弹性动画利用CSS3技术可以实现各种各样的网页菜单,我们之前也 ...

随机推荐

git-【十】忽略文件
1.在Git工作区的根目录下创建一个特殊的.gitignore文件,然后把要忽略的文件名填进去,Git就会自动忽略这些文件. 不需要从头写.gitignore文件,GitHub已经为我们准备了各种配置 ...
PAT 1132 Cut Integer[简单]
1132 Cut Integer(20 分) Cutting an integer means to cut a K digits lone integer Z into two integers o ...
Django进阶 (二)
规范确立规范的好处: 代码可读性高方便代码的定位极其查找为以后代码扩容带来便利场景: 在多个APP的场景下,单个app的URL函数功能较多的时候,我们可以通过以下方法来解决. 把Views写成 ...
java8中接口中的default方法
在java8以后,接口中可以添加使用default或者static修饰的方法,在这里我们只讨论default方法,default修饰方法只能在接口中使用,在接口种被default标记的方法为普通方法, ...
Python: 使用生成器创建新的迭代模式
使用一个生成器函数来定义一个函数模式. def frange(start, stop, increment): x = start while x < stop: yield x x += in ...
根据Excel文件中的内容，修改指定文件夹下的文件名称
问题:根据Excel文件中内容,把文件名称由第2列,改为第1列.比如:把文件“123.jpg”修改为“1.jpg”.
20155201 实验二《Java面向对象程序设计》实验报告
20155201 实验二<Java面向对象程序设计>实验报告一.实验内容 1. 初步掌握单元测试和TDD 2. 理解并掌握面向对象三要素:封装.继承.多态 3. 初步掌握UML建模 4. ...
20145221 《Java程序设计》实验报告三：敏捷开发与XP实践
20145221 <Java程序设计>实验报告三:敏捷开发与XP实践实验要求以结对编程的方式编写一个软件,Blog中要给出结对同学的Blog网址记录TDD和重构的过程,测试代码不要少 ...
JS封装简单后代选择器
大概思路是这样的:通过判断传过来的参数是什么类型,如果是对象,那这里就是this(因为封装是自己用的,肯定不会随便乱传一个对象过来),如果是一个函数(匿名函数),那就是Dom加载(这里先不讲),如果是 ...
sqlite的时间筛选字段
唉,需要不停的踩坑呀 commandText = commandText + string.Format("where [CollectDateTime] <'{0}' and [Co ...

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

您可能感兴趣的文章:

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

随机推荐

热门专题