css+ js 实现圆环时钟

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>多彩炫酷环形时钟效果</title>

<style type="text/css">

#fancyClock{

margin:40px auto;

height:200px;

border:1px solid #111111;

width:600px;

}

.clock{

/* 时钟div */

height:200px;

width:200px;

position:relative;

overflow:hidden;

float:left;

}

.clock .rotate{

/* 两个旋转的div，每个都分为左右两部分 */

position:absolute;

width:200px;

height:200px;

top:0;

left:0;

}

.rotate.right{

display:none;

z-index:11;

}

.clock .bg, .clock .front{

width:100px;

height:200px;

position:absolute;

top:0;

}

.clock .display{

/* 小时，分钟，秒钟的显示 */

position:absolute;

width:200px;

font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;

z-index:20;

color:#F5F5F5;

font-size:60px;

text-align:center;

top:55px;

left:0;

/* CSS3 文字阴影 */

text-shadow:4px 4px 5px #333333;

}

/* 左半边部分 */

.clock .bg.left{ left:0; }

/* 每个不同颜色的背景图: */

.orange .bg.left{ background:url(http://image.zhangxinxu.com/image/blog/201008/bg_orange.png) no-repeat left top; }

.green .bg.left{ background:url(http://image.zhangxinxu.com/image/blog/201008/bg_green.png) no-repeat left top; }

.blue .bg.left{ background:url(http://image.zhangxinxu.com/image/blog/201008/bg_blue.png) no-repeat left top; }

/* 右边部分 */

.clock .bg.right{ left:100px; }

.orange .bg.right{ background:url(http://image.zhangxinxu.com/image/blog/201008/bg_orange.png) no-repeat right top; }

.green .bg.right{ background:url(http://image.zhangxinxu.com/image/blog/201008/bg_green.png) no-repeat right top; }

.blue .bg.right{ background:url(http://image.zhangxinxu.com/image/blog/201008/bg_blue.png) no-repeat right top; }

.clock .front.left{

left:0;

z-index:10;

}

</style>

</head>

<body>

<div id="fancyClock">

<div class="orange clock">

<div class="display" id="hours">00</div>

<div class="front left"></div>

<div class="rotate left" id="orangeRotateLeft">

<div class="bg left"></div>

</div>

<div class="rotate right" id="orangeRotateRight">

<div class="bg right"></div>

</div>

<div class="blue clock">

<div class="display" id="minuts">00</div>

<div class="front left"></div>

<div class="rotate left" id="blueRotateLeft">

<div class="bg left"></div>

</div>

<div class="rotate right" id="blueRotateRight">

<div class="bg right"></div>

</div>

<div class="green clock">

<div class="display" id="seconds">00</div>

<div class="front left"></div>

<div class="rotate left" id="greenRotateLeft">

<div class="bg left"></div>

</div>

<div class="rotate right" id="greenRotateRight">

<div class="bg right"></div>

</div>

<script type="text/javascript">

(function(){

var $ = function(id){

return document.getElementById(id);

};

var o = {

hour: $("hours"), //小时数值对象

minu: $("minuts"), //分钟数值对象

sec: $("seconds"), //秒钟数值对象

orgl: $("orangeRotateLeft"), //黄色旋转左半区

orgr: $("orangeRotateRight"), //黄色旋转右半区

bluel: $("blueRotateLeft"), //蓝色旋转左半区

bluer: $("blueRotateRight"), //蓝色旋转右半区

sec: $("seconds"), //秒钟数值对象

greenl: $("greenRotateLeft"), //绿色旋转左半区

greenr: $("greenRotateRight") //绿色旋转右半区

};

var f = {

css: function(o,key){

return o.currentStyle? o.currentStyle[key] : document.defaultView.getComputedStyle(o,false)[key];

},

zero: function(n, top){

n = parseInt(n, 10), top = top || "00";

if(n > 0){

if(n <= 9){

n = "0" + n;

}

return String(n);

}else{

return top.toString();

}

},

angle: function(v, total){

var scale = v / total, offsetx = 0, offsety = 0, an;

var angle = scale * 360; //当前角度值

//IE矩阵角度值计算

var m11 = Math.cos(Math.PI*2 / 360 * angle)

var m21 = Math.sin(Math.PI*2 / 360 * angle);

if(angle > 90){

an = angle - 90;

}else{

an = angle;

}

offsety = offsetx = (200 - 200 * Math.sqrt(2) * Math.cos(Math.PI / 180 * Math.abs(an - 45))) / 2 ;

return {

trans: "rotate("+angle+"deg)",

ie: "progid:DXImageTransform.Microsoft.Matrix(M11="+m11+",M12=-"+m21+",M21="+m21+",M22="+m11+",SizingMethod='auto expand',FilterType='nearest neighbor')",

offset: {

x: offsetx,

y: offsety

}

};

},

cartoon: function(l, r, v, part){

var total = part * 2, angleV, anglePart;

if(v <= part && v > 0){

angleV = f.angle(v, total);

l.style.display = "block";

l.style.filter = angleV.ie;

l.style.MozTransform = l.style.WebkitTransform = l.style.transform = angleV.trans;

r.style.display = "none";

//ie 旋转非居中旋转的修复

if(document.all){

l.style.left = angleV.offset.x + "px";

l.style.top = angleV.offset.y + "px";

}

}else{

v = Math.abs(v - part);

angleV = f.angle(v, total);

anglePart = f.angle(part, total);

l.style.display = "block";

l.style.filter = anglePart.ie;

l.style.MozTransform = l.style.WebkitTransform = l.style.transform = anglePart.trans;

r.style.display = "block";

r.style.filter = angleV.ie;

r.style.MozTransform = r.style.WebkitTransform = r.style.transform = angleV.trans;

if(document.all){

r.style.left = angleV.offset.x + "px";

r.style.top = angleV.offset.x + "px";

}

},

ui: function(){

var mytime = new Date();

var h = mytime.getHours(), m = mytime.getMinutes(), s = mytime.getSeconds();

o.hour.innerHTML = f.zero(h);

o.minu.innerHTML = f.zero(m, 60);

o.sec.innerHTML = f.zero(s, 60);

f.cartoon(o.orgl, o.orgr, h, 12);

f.cartoon(o.bluel, o.bluer, m, 30);

f.cartoon(o.greenl, o.greenr, s, 30);

setTimeout(f.ui, 1000);

}

};

f.ui();

})();

</script>

</body>

</html>

css+ js 实现圆环时钟的更多相关文章

转 CSS3+js实现多彩炫酷旋转圆环时钟效果
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
【CSS3】纯CSS代码实现模拟时钟，+js对时功能。
使用CSS3纯代码来实现模拟时钟,及指针动画功能. 在这里主要使用到css3一些基本元素: border-radius:圆角边框,画圆形:表盘 Transform:变换,旋转,扭曲:刻度盘,指针形状 ...
js动态数字时钟
js动态数字时钟主要用到知识点: 主要是通过数组的一些方法,如:Array.from() Array.reduce() Array.find() 时间的处理和渲染 js用到面向对象的写法实现的功能 ...
js数字滑动时钟
js数字滑动时钟: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
[JS,Canvas]日历时钟
[JS,Canvas]日历时钟 Html: <!doctype html> <html> <head> <meta charset="UTF-8&q ...
CSS & JS 制作滚动幻灯片
==================纯CSS方式==================== <!DOCTYPE html> <html> <head> <met ...
【转】Maven Jetty 插件的问题（css/js等目录死锁）的解决
Maven Jetty 插件的问题(css/js等目录死锁,不能自动刷新)的解决: 1. 打开下面的目录:C:\Users\用户名\.m2\repository\org\eclipse\jetty ...
Css Js Loader For Zencart
Css Js Loader 描述:这个插件很早就出来了,可能知道人非常少这个插件的功能是整合所有的网站的CSS和JS内容到一个文件里边. 因为CSS和JS文件到了一个文件,加快了程序的运行在配合其 ...
购物车数字加减按钮HTML+CSS+JS（有需要嫌麻烦的小伙伴拿走不谢）
之前在写详情页的时候,如下图因为自己嫌麻烦,就去看其他网站是怎么写的,想直接拿来用,后来看来看去觉得写得很麻烦,于是最后还是决定自己写,附上HTML+CSS+JS代码,一条龙一站式贴心服务2333 ...

随机推荐

泪奔，配好了bioconductor环境
最近因为极度忙,没有写总结.今天补一下总结. 今天完成关静最后给的大project这个作业来说,结合自己的研究方向是个让我纠结一周多的事.好在找到了对应的研究内容. R的书目前还是很多的.R我一开始觉 ...
使用Java操作Redis（一）
Redis是一款基于key-value的数据库服务器,安装完成后我们可以通过redis-cli使用Redis提供的命令完成各种操作.redis-cli实际上就是一款客户端,和redis-server建 ...
JTable表格案例
package com.szht.gpy.frame; import java.awt.BorderLayout; import java.awt.event.ActionEvent; import ...
今日SGU 5.27
SGU 122 题意:给你n个人,每个人有大于 N / 2(向上取整)的朋友,问你1这个人有一个书,每个人都想看,只能从朋友之间传递,然后最后回到了1这个人,问你是否有解,然后有解输出路径收获:哈 ...
百度地图API的使用示例
刚刚工作的时候写过百度地图API文档,那时候没有记录到技术博客里面,今天在群里看见有个姑娘在问这个问题,重温了一遍,这个API还算好用.百度地图API,集成简单好用,全面,兼容问题,文档全面: 官方文 ...
nyoj 1104 just for you
just for you 时间限制:1000 ms | 内存限制:65535 KB 难度:0 描写叙述今天tlp和ly想去看电影了到了电影院才发现买票的人特别多 .ly不想让tlp等着急了,就先 ...
Gonet2 游戏server框架解析之gRPC提高（5）
上一篇blog是关于gRPC框架的基本使用,假设说gRPC仅仅是远程发几个參数,那和一个普通的http请求也没多大区别了. 所以今天我就来学习一下gRPC高级一点的用法. 流! 流能够依据用法,分为单 ...
OpenGL编程逐步深入（三）在窗口中显示一个三角形
这一节教程的内容会比较少,我们仅仅是对上一节教程中的代码进行扩展,在窗口中渲染一个三角形出来. 本节我们以下图所示正方形来讲解OpenGl中的坐标系统.当沿着Z轴负方向看时,可见顶点的坐标必须在这个正 ...
关于jacob支持BSTR类型的经验总结
作者:朱金灿来源:http://blog.csdn.net/clever101 jacob是实现Java和COM之间互操作的一个开源中间件.网上大多的程序示例基本上是使用jacob调用微软的offi ...
获取windows版本信息的做法
作者:朱金灿来源:http://blog.csdn.net/clever101 个人不建议用 GetVersion 或GetVersionEx 之类的 API 来获取系统版本号.注意微软也说过,这个 ...

css+ js 实现圆环时钟

css+ js 实现圆环时钟的更多相关文章

随机推荐

热门专题