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();
});
演示图:
以上所述就是本文的全部内容了,希望大家能够喜欢。
时间: 2015-04-13
html制作圆盘时钟,jquery+html5制作超酷的圆盘时钟表相关推荐
- 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 ...
- html制作状态栏数字时钟,用HTML5制作数字时钟的教程_html5教程技巧
就是这个数字时钟,当时觉得这个创意不错,但是也没去折腾.直到昨天同事又在网上看到这个案例,他觉得很酷炫,就跑过来问我,这个是怎么实现的,然后我大概想了一下实现方法后也来了点兴趣,就花了一点时间模仿做出 ...
- html5 拉窗帘 效果,jQuery和CSS3超酷3D拉窗帘式滚动导航特效
这是一款效果炫酷的jQuery和CSS3 3D拉窗帘式导航特效.该特效使用CSS transformations 和 jQuery使两块"窗帘"沿Z轴方向模拟被拉开的效果. HTM ...
- python制作动态时钟_python+pygame制作一个可自定义的动态时钟和详解
#第1步:导出模块 importsys, random, math, pygamefrom pygame.locals import * from datetime importdatetime, d ...
- 20个HTML5/CSS3超酷应用(附免积分下载地址)
免积分下载地址:http://download.csdn.net/detail/yangwei19680827/6956667 1.HTML5视频破碎重组特效 强大视觉冲击 HTML5视频播放器很多, ...
最新文章
- android 图片压缩方法分析
- 体检系统前端源码_给您的前端进行健康检查
- 二本本科生连发10篇SCI被喷“灌水严重”?原来是因为......
- Python 爬取斗图啦图片
- 基于业务解释的特征重要性计算
- Spring Cloud OpenFeign夺命连环9问,这谁受得了?
- Vue Document
- SpringMVC (三)处理器映射器的配置和AbstractController的使用
- ArcGIS操作实例视频教程38讲全集(转)
- 多元统计之因子分析模型及Python分析示例
- 人类简史下载pdf_人类简史 从动物到上帝pdf电子书下载
- Java版推箱子(搬箱子)游戏开发入门示例及源码
- MySQL官方教程及各平台的安装教程和配置详解入口
- 【学习笔记】Windows格式文档转换成Unix格式
- 买个云服务器搭建自己的ngrok做微信公众号开发
- zbrush是个什么神仙软件?学会zbrush可以做什么?
- air dots 配对_Redmi AirDots可以作为iphone的合格伴侣吗?
- linux+ros2 launch文件开机自启动
- 牛X公司的开会方式,明天开始参照执行
- 【youcans 的 OpenCV 例程200篇】129. 形态算法之骨架 (重建开运算)
热门文章
- 不用网关或代理的单点远程办公如何实现,Aruba推出EdgeConnect Microbranch
- 到底什么是“无源物联网”?
- 一文教你如何在生产环境中在Kubernetes上部署Jaeger
- 因为一个跨域请求,我差点丢了饭碗
- 腾讯视频云支持超300万场次直播带货 助力企业一天搭建直播间
- 45K!拿下 AI 技术岗,这些知识点全考了!
- AI ProCon倒计时6天:60+业内技术专家,探秘9大核心技术专题
- c语言逗号占几个字符,C语言 scanf输入多个数字只能以逗号分隔的操作
- Centos/Red Hat6.8 安装、配置、启动Gitlab (内网环境)心得分享
- Springboot2学习博客