js实现显示系统时间的表盘

核心:

　　1,document.styleSheets 修改css里的keyframes属性值

　　2,表针角度的计算

最终显示效果:

<!DOCTYPE html>
<html><head><title>实现表盘样式的时间显示</title><meta charset="utf-8"/><style>div[id^="a"]{position:absolute;font-size:.1em; text-align:center;width:7px; height:5px;top:0; left: 46.5px;transform-origin:50% 50px;}#a1{transform:rotate(30deg)}#a2{transform:rotate(60deg)}#a3{transform:rotate(90deg)}#a4{transform:rotate(120deg)}#a5{transform:rotate(150deg)}#a6{transform:rotate(180deg)}#a7{transform:rotate(210deg)}#a8{transform:rotate(240deg)}#a9{transform:rotate(270deg)}#a10{transform:rotate(300deg)}#a11{transform:rotate(330deg)}</style><style>#clock{width:100px; height:100px;border-radius:50%;border:4px solid black;position:relative;
}
#s{width:2px; height:55px;position:absolute; top:5px; left:49px;background-color:red;transform-origin:50% 45px;-webkit-animation:rotateS 60s linear infinite;
}
#m{width:4px; height:50px;position:absolute; top:10px; left:48px;background-color:black;transform-origin:50% 40px;-webkit-animation:rotateM 3600s linear infinite;
}
#h{width:6px; height:45px;position:absolute; top:15px; left:47px;background-color:black;transform-origin:50% 35px;-webkit-animation:rotateH 43200s linear infinite;
}
@-webkit-keyframes rotateS{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}
}
@-webkit-keyframes rotateM{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}
}
@-webkit-keyframes rotateH{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}
}</style></head><body><div id="clock"><div id="h"></div><div id="m"></div><div id="s"></div><div id="a1">I</div><div id="a2">II</div><div id="a3">III</div><div id="a4">IIII</div><div id="a5">V</div><div id="a6">VI</div><div id="a7">VII</div><div id="a8">VIII</div><div id="a9">IX</div><div id="a10">X</div><div id="a11">XI</div><div id="a12">XII</div></div><script>window.onload=function(){//获得当前页面第二个样式表文件var sheet=document.styleSheets[1];//获得sheet中三个keyframesvar Skeyframes=sheet.cssRules[4];var Mkeyframes=sheet.cssRules[5];var Hkeyframes=sheet.cssRules[6];//获得三个keyframes下的内嵌rulevar SStartRule=Skeyframes.cssRules[0];var SEndRule=Skeyframes.cssRules[1];var MStartRule=Mkeyframes.cssRules[0];var MEndRule=Mkeyframes.cssRules[1];var HStartRule=Hkeyframes.cssRules[0];var HEndRule=Hkeyframes.cssRules[1];//计算当前时间对应的三个指针的角度var now=new Date();var h=now.getHours();var m=now.getMinutes();var s=now.getSeconds();var hDeg=(h*3600+m*60+s)/(3600*12)*360;var mDeg=(m*60+s)/3600*360;var sDeg=360*s/60;//设置三个指针起始角度分别为sDeg,mDeg,hDeg
        SStartRule.style.transform="rotate("+sDeg+"deg)";MStartRule.style.transform="rotate("+mDeg+"deg)";HStartRule.style.transform="rotate("+hDeg+"deg)";//设置三个指针的结束较为分别为其起始角度+360度
        SEndRule.style.transform="rotate("+(sDeg+360)+"deg)";MEndRule.style.transform="rotate("+(mDeg+360)+"deg)";HEndRule.style.transform="rotate("+(hDeg+360)+"deg)";}</script></body>
</html>

转载于:https://www.cnblogs.com/web-fusheng/p/6735021.html

js实现显示系统时间的表盘相关推荐

JS中内置的日期类Date，显示系统时间、停止系统时间
目录一.关于Date类: 二.显示系统时间: 一.关于Date类: 可以用来获取时间/日期. 创建Date对象:Date date = new Date("2001/11/01" ...
js如何获取计算机当前时间,js获取当前系统时间
搜索热词下面是编程之家 jb51.cc 通过网络收集整理的代码片段. 编程之家小编现在分享给大家,也给大家做个参考. var myDate = new Date(); myDate.getYear( ...
php显示时间秒针走,Android_TextView显示系统时间(时钟功能带秒针变化，我们开启一个线程，线程每隔 - phpStudy...
TextView显示系统时间(时钟功能带秒针变化我们开启一个线程,线程每隔一秒发送一次消息,我们在消息中更新TextView上显示的时间就ok了. 首先我们在布局文件中放一个TextView用来显示 ...
以可读写可追加的方式显示系统时间
以可读可写可追加的方式显示系统时间,并且第二次执行记录下了第一次的行号,紧接着第一次的行号执行显示系统时间. #include <time.h> #include <stdio.h& ...
【响应式Web前端设计】在html页面实时显示系统时间
在html页面实时显示系统时间桌面新建记事本,将下列代码复制粘贴,重命名后缀为.html,保存,用浏览器打开即可 <html> <head><meta http-equ ...
【MFC】显示系统时间的状态栏
00. 目录文章目录 00. 目录 01. 案例概述 02. 开发环境 03. 关键技术 04. 程序设计 05. 秘笈心法 06. 源码下载 07. 附录 01. 案例概述状态栏主要用于显示程序 ...
状态栏编程（显示系统时间和进度条）
原文地址:http://welkangm.blog.163.com/blog/static/19065851020127941446182/ 显示系统时间 1. 在状态栏中设置两个新的栏位Timer和 ...
MFC状态栏编程（显示系统时间和进度条）
显示系统时间 1. 在状态栏中设置两个新的栏位Timer和Progress.首先到ResourceView中编辑String Table,增加IDS_TIMER(时间),PROGRESS(进度).然后 ...
Js获取当前系统时间，24小时制
Js获取当前系统时间 var myDate = new Date(); myDate.getYear(); //获取当前年份(2位) myDate.getFullYear(); / ...
C语言显示系统时间的几个办法
C语言显示系统时间的几个办法#include <time.h> #include <stdio.h> #include<stdlib.h>int main() {t ...

js实现显示系统时间的表盘

js实现显示系统时间的表盘相关推荐

最新文章

热门文章