html制作钟表盘,jquery+html5制作超酷的圆盘时钟表
自己封装的一个用HTML5+jQuery写的时钟表
代码:
超酷数码钟表
//引用的是在线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%)'
});
//钟表盘中心圆
$("
'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';
}
$("
'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 = $("
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);
$(function(){
$('#clock').drawClock();
});
演示图:
以上所述就是本文的全部内容了,希望大家能够喜欢。
html制作钟表盘,jquery+html5制作超酷的圆盘时钟表相关推荐
- html制作圆盘时钟,jquery+html5制作超酷的圆盘时钟表
自己封装的一个用HTML5+jQuery写的时钟表 代码: 超酷数码钟表 //引用的是在线jquery地址,如果不行请自行下载切换 (function($){ $.fn.drawClock = fun ...
- 20个HTML5/CSS3超酷应用
http://www.gbtags.com/gb/share/2818.htm?utm_source=tuicool 20个HTML5/CSS3超酷应用 #文章 CSS3 HTML5 jQuery 申 ...
- jQuery插件:超酷的多列网格式拖放插件gridster.js
为什么80%的码农都做不了架构师?>>> 日期:2012-8-15 来源:GBin1.com 在线演示 本地下载 以往的文章中,我们分享了很多jQuery相关拖放插件,今天 ...
- 使用jQuery开发一个超酷的倒计时效果
转自:http://www.gbtags.com/technology/jquerytutorial/20110105countdownjquery/ 使用jQuery开发一个超酷的倒计时效果 日期: ...
- html制作图像画廊,基于HTML5的超酷图片画廊-Juicebox Lite
图片画廊是web或者网站开发中经常会用到的组件,非常适合作为图片展示,个人作品展示和相册使用.今天我们将介绍一个非常棒的基于HTML5的图片画廊 - Juicebox Lite,希望大家喜欢! Jui ...
- html5 制作书架展示 PHP,html5制作转盘的详解及实例
今天给大家带来的案列是html5转盘实例,可以直接拿来做抽奖程序,有需要的朋友可以拿去使用,下面是案列代码. html5制作转盘游戏 h1{ width: 100%; height: 3rem; li ...
- html5 拉窗帘 效果,jQuery和CSS3超酷3D拉窗帘式滚动导航特效
这是一款效果炫酷的jQuery和CSS3 3D拉窗帘式导航特效.该特效使用CSS transformations 和 jQuery使两块"窗帘"沿Z轴方向模拟被拉开的效果. HTM ...
- 20个HTML5/CSS3超酷应用(附免积分下载地址)
免积分下载地址:http://download.csdn.net/detail/yangwei19680827/6956667 1.HTML5视频破碎重组特效 强大视觉冲击 HTML5视频播放器很多, ...
- 10款基于jquery实现的超酷动画源码
1.jQuery二级下拉菜单 下拉箭头翻转动画 之前我们分享过不少基于jQuery的二级下拉菜单,甚至是多级的下拉菜单,比如这款jQuery/CSS3飘带状多级下拉菜单就非常华丽.但今天要介绍的这款j ...
- html 一条线两种颜色,HTML5/CSS3超酷进度条 不同进度多种颜色
本文作者html5tricks,转载请注明出处 这是一款线条状的 下面我们来看看实现这款进度条的过程和源码,代码主要由HTML.CSS以及jQuery组成,实现过程也相对比较简单. HTML代码: 0 ...
最新文章
- 忘记mysq rootl密码
- P10 线性系统状态空间设计-《Matlab/Simulink与控制系统仿真》程序指令总结
- 启动PyCharm,提示No Python interpreter selected的问题
- Linux-用户和组管理以及设置允许远程登录Root
- VTK:网格之SolidClip
- 内网网段划分ciso交换机配置
- Nodejs学习笔记(四)——http协议与服务器
- hystrix基于request cache请求缓存技术优化批量数据查询接口
- oracle序列不连续,Oracle不连续的值,如何实现查找上一条、下一条
- Python智能对话机器人实现
- 最小二乘估计与卡尔曼滤波公式推导
- 《庄子·杂篇·列御寇第三十二》
- 我的Jdon安装第三步出错解决
- 如何在win10中安装jdk
- 全景视角下的世界探索——三维全景地图
- js版四舍六入五成双方法
- 【项目设计】基于OneNet平台的心率监测系统 -嵌入式 -物联网
- 清除dns缓存cmd命令行方式
- nutch核心代码分析——crawl.injector总结
- BSP 工程管理实验