jquery+html5制作超酷的圆盘时钟表
2015-04-14 11:44
951 查看
自己封装的一个用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制作超酷的圆盘时钟表
- 使用HTML5和jQuery插件Reel实现一个超酷的星际争霸2兵种动画360度预览效果
- jQuery结合HTML5制作的爱心树表白动画
- jquery特效大全,jquery+css+css3+html+html5的特效制作
- 使用超酷的jQuery缩略图生成插件NailThumb制作漂亮的缩略图web应用
- 20个最炫HTML5,jQuery和CSS3下拉菜单制作教程(附示例/源码)
- 『HTML5制作仿JQuery效果』减速&加速滑动的实现
- 超酷手机端HTML5电子请柬在线免费制作与分享
- 使用超酷的jQuery缩略图生成插件NailThumb制作漂亮的缩略图web应用
- 通过jQuery制作电子时钟表的代码
- 使用超酷的jQuery缩略图生成插件NailThumb制作漂亮的缩略图web应用
- 使用HTML5和jQuery插件Quicksand实现一个超酷的星际争霸2兵种分类展示效果
- 使用超酷的jQuery缩略图生成插件NailThumb制作漂亮的缩略图web应用
- 使用HTML5和jQuery插件Quicksand实现一个超酷的星际争霸2兵种分类展示效果
- 使用HTML5和jQuery插件Quicksand实现一个超酷的星际争霸2兵种分类展示效果
- 使用HTML5和jQuery插件Reel实现一个超酷的星际争霸2兵种动画360度预览效果
- jQuery插件:超酷的多列网格式拖放插件gridster.js
- MyEclipse 2013已经正式发布 支持HTML5、JQuery
- jquery插件制作 -- 6.手风琴Panel
- HTML5 + AJAX ( jQuery版本 ) 文件上传带进度条