专栏首页小蔚记录css+ js 实现圆环时钟

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 左右侧边栏固定宽,中间宽度自适应

    小蔚
  • html --- bootstrap 框架 (栅格系统布局)

    小蔚
  • CSS Hack解决浏览器IE部分属性兼容性问题

    不同厂商的流览器或某浏览器的不同版本(如IE6-IE11,Firefox/Safari/Opera/Chrome等),对CSS的支持、解析不一样,导致在不同浏览...

    小蔚
  • 2.布局解决方案 两列、三列、多列、不定宽+一列自适应<6>

    和上面的解决方案是一样的,自己动脑筋哦 下面的overflow的方式 display:table和flex大家自己练习。

    河湾欢儿
  • python排序算法(三)

    。快排比较复杂,花了快两天琐碎时间琢磨了感觉还不是很好,据我们老师说当年提出快排的人是在上课突然想起来的,我等只能深深膜拜了

    py3study
  • IntelliJ IDEA 和 Eclipse等工具部署项目到Tomcat

    时下流行的两款IDE工具多为idea,Eclipse等产品,相比之下,idea更便捷,以页面样式,快捷性赢得了市场大部分开发者的喜爱。

    疯狂的KK
  • 【开源公告】腾讯Node.js基础设施TSW正式开源

    腾讯开源
  • 塔秘 | 深度学习应该使用复数吗?

    导 读 深度学习只能使用实数吗?本文简要介绍了近期一些将复数应用于深度学习的若干研究,并指出使用复数可以实现更鲁棒的层间梯度信息传播、更高的记忆容量、更准确的...

    灯塔大数据
  • 深度 | 深度学习应该使用复数吗?

    选自Medium 机器之心编译 参与:Nurhachu Nul、路雪 深度学习只能使用实数吗?本文简要介绍了近期一些将复数应用于深度学习的若干研究,并指出使用复...

    机器之心
  • 【开源公告】腾讯Node.js基础设施TSW正式开源

    TSW是面向WEB前端开发者,以提升问题定位效率为初衷,提供云抓包、全息日志和异常发现的Node.js基础设施。

    TSW

扫码关注云+社区

领取腾讯云代金券