js css3实现钟表效果
原理：
利用transform-origin改变旋转的圆心，实现秒数和分钟数的刻度线，利用transfrom translate实现钟表小时刻度的显示
html:
<div class="time">
<div class="line"></div>
<div class="hour-line"></div>
<div class="second-line"></div>
<div class="minute-line"></div>
</div>
1 绘制圆盘
.time{
width: 300px;
height: 300px;
border-radius: 50%;
margin: 100px auto;
background-color: #000;
color: #fff;
position: relative;
padding: 5px;
}
2 绘制秒数
css
.second,.minute,.hour{
position: absolute;
left:;
right:;
top:;
bottom:;
}
.second div,.minute div{
background-color: #fff;
position:absolute;
width: 2px;
left: 50%;
top: 50%;
transform: translate(50%,145px);
}
.second div{
height: 5px;
}
js：
function draw(num,r,className,flag){
for(var i=0; i<num; i++){
var x=Math.cos(2*Math.PI/360*(360/num*i-60))*r;//如果是小时绘制出来从是0度1刻度开始，与始终的角度偏差60度，所以要减60
var y=Math.sin(2*Math.PI/360*(360/num*i-60))*r;
if(flag){
var second=$('<div class="hour"><div style="transform:translate('+x+'px,'+y+'px)">'+(i+1)+'</div></div><div class="'+className+'" style="transform:rotate('+360/num*i+'deg) "><div></div></div>');
}else{
var second=$('<div class="'+className+'" style="transform:rotate('+360/num*i+'deg) "><div></div></div>');
}
$(".time").append(second);
}
}
draw(60,145,'second');
绘制的是60个刻度，每个刻度的角度是360/60*i
4 绘制分钟刻度，12个刻度线，原理同上
css
.minute div{
height: 10px;
transrform: translate(50%,135px);
}
js
draw(12,120,'minute',true)
没有减60 是这样的
5 绘制钟表中心点以及秒针 分针 时针
css:
.time .line,.time .hour-line,.time .minute-line,.time .second-line{
position:absolute;
top: 50%;
left: 50%;
background-color: #fff;
transform-origin: left top;
/*transform: rotate(-90deg);*/
}
.time .line{
width: 14px;
height: 14px;
border-radius: 50%;
margin-left: -7px;
margin-top: -7px;
}
.time .hour-line{
width: 70px;
height: 4px;
margin-top: -2px;
}
.time .minute-line{
width: 90px;
height: 2px;
margin-top: -2px;
}
.time .second-line{
width: 120px;
height: 2px;
margin-top: -1px;
}
获取当前时间，获取时分秒，获取时针 分针 秒针 旋转的角度，算出的角度是从0开始旋转的，需要减去90度
js
function drawLine(hour,minute,second){
var secondAngle=360/60*second-90;//秒
var minuteAngle=360/60*minute-90;//秒
var hourAngle=360/12*(hour+minute/60)-90;//秒
$(".hour-line").css({
'transform':"rotate("+hourAngle+"deg)"
});
$(".minute-line").css({
'transform':"rotate("+minuteAngle+"deg)"
});
$(".second-line").css({
'transform':"rotate("+secondAngle+"deg)"
});
}
setInterval(function(){
var time=new Date();
var hour=time.getHours();
if(hour>12){
hour=hour-12;
}
var minute=time.getMinutes();
var second=time.getSeconds();
drawLine(hour,minute,second);
},1000);
最终效果
整体代码：
<!DOCTYPE >
<html>
<head>
<title>
</title>
<style type="text/css">
body,html{
margin: 0;
padding: 0;
}
.time{
width: 300px;
height: 300px;
border-radius: 50%;
margin: 100px auto;
background-color: #000;
color: #fff;
position: relative;
padding: 5px;
}
.second,.minute,.hour{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.second div,.minute div{
background-color: #fff;
position:absolute;
width: 2px;
left: 50%;
top: 50%;
transform: translate(50%,145px);
}
.second div{
height: 5px; }
.minute div{
height: 10px;
transrform: translate(50%,135px);
}
.hour div{
position:absolute;
left: 50%;
top: 50%;
margin-top: -10px;
margin-left: -9px;
}
.time .line,.time .hour-line,.time .minute-line,.time .second-line{
position:absolute;
top: 50%;
left: 50%;
background-color: #fff;
transform-origin: left top;
/*transform: rotate(-90deg);*/ }
.time .line{
width: 14px;
height: 14px;
border-radius: 50%;
margin-left: -7px;
margin-top: -7px;
}
.time .hour-line{
width: 70px;
height: 4px;
margin-top: -2px;
}
.time .minute-line{
width: 90px;
height: 2px;
margin-top: -2px;
}
.time .second-line{
width: 120px;
height: 2px;
margin-top: -1px;
}
</style>
</head>
<body>
<div class="time">
<div class="line"></div>
<div class="hour-line"></div>
<div class="second-line"></div>
<div class="minute-line"></div>
</div>
</body>
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js">
</script>
<script type="text/javascript">
window.onload=function(){
draw(60,145,'second');
draw(12,120,'minute',true);
setInterval(function(){
var time=new Date();
var hour=time.getHours();
if(hour>12){
hour=hour-12;
}
var minute=time.getMinutes();
var second=time.getSeconds();
drawLine(hour,minute,second);
},1000); } function drawLine(hour,minute,second){
var secondAngle=360/60*second-90;//秒
var minuteAngle=360/60*minute-90;//秒
var hourAngle=360/12*(hour+minute/60)-90;//秒
$(".hour-line").css({
'transform':"rotate("+hourAngle+"deg)"
});
$(".minute-line").css({
'transform':"rotate("+minuteAngle+"deg)"
});
$(".second-line").css({
'transform':"rotate("+secondAngle+"deg)"
});
}
function draw(num,r,className,flag){
for(var i=0; i<num; i++){
var x=Math.cos(2*Math.PI/360*(360/num*i-60))*r;
var y=Math.sin(2*Math.PI/360*(360/num*i-60))*r;
if(flag){
var second=$('<div class="hour"><div style="transform:translate('+x+'px,'+y+'px)">'+(i+1)+'</div></div><div class="'+className+'" style="transform:rotate('+360/num*i+'deg) "><div></div></div>');
}else{
var second=$('<div class="'+className+'" style="transform:rotate('+360/num*i+'deg) "><div></div></div>');
} $(".time").append(second);
}
}
</script>
</html>
js css3实现钟表效果的更多相关文章
- 史上最简单的js+css3实现时钟效果
今天我看到百度搜索的时间那个效果不错,于是就产生了模仿一下的效果,不过为了节省时间,就随便布了下局,废话不多说,先看看效果吧,顺便把百度的效果也拿过来. 对比样子差了好多啊,但是基本功能都是实现了的, ...
- 用CSS3实现钟表效果
背景:最近在学习CSS3,看到了一个小案例,通过自己的学习,动手实现了它,现在把它分享出来. 效果图 实现过程 1.首先我们需要在页面中写出一个静态的钟表效果.首先我们需要一个表盘div wrap 对 ...
- Js+CSS3实现手风琴效果
效果截图: HTML代码: <div id="container"> <img src="images/photo01.jpg" alt=&q ...
- css3实现钟表效果
利用css3 transform属性刻画钟表的的刻度以及指针的角度,代码如下: <head> <meta charset="UTF-8"> <titl ...
- tiltShift.js - CSS3 滤镜实现移轴镜头效果
tiltShift.js 是一款很棒的 jQuery 插件,使用 CSS3 图片滤镜来实现照片的移轴镜头效果.使用非常简单,使用 data 属性配置参数.温馨提示:为保证最佳的效果,请在 IE10+. ...
- H5+JS+CSS3 综合应用
慕课网新教程H5+JS+CSS3 实现的七夕言情主题效果已经出炉了 从设计到实现到录制与编写用了快1个月的时间,说真的这个案例是慕课定制的,我之前也没有系统的做过这样的一个效果,在实现的时候自己也重新 ...
- [JS,NodeJs]个人网站效果代码集合
上次发的个人网站效果代码集合: 代码集合: 1.彩色文字墙[鼠标涟漪痕迹] 2.彩色旋转圆环 [模仿http://www.moma.org/interactives/exhibitions/2012/ ...
- js+css3+HTML5拖动滑块(type="range")改变值
最近在做一个H5的改版项目,产品和设计给出的效果中有一个拖动滑块可以改变输入值的效果,类似如下图这样: 拿到这样的设计稿后,我有点懵了,自己写一个js?去网上找一个这样的效果?自己写一个可以,只是实现 ...
- 用js+css3做一个小球投篮的动画（easing）
<!DOCTYPE html> <html> <head> <script src="jquery-1.11.3.min.js">& ...
随机推荐
- mongo的碎片整理
由于业务原因,需要将过期数据删除,但有一个问题出现了,频繁删除数据之后,会产生很多磁盘碎片,这些碎片如果没有被重复利用, 进而会影响查询性能(表查询时仍然会扫描这部分删除数据的磁盘空间块),随需要处理 ...
- JAVA使用并行流(ParallelStream)时要注意的一些问题
https://blog.csdn.net/xuxiaoyinliu/article/details/73040808
- ANDROID 推送到底哪家强（转）
之前在群里有同学问我关于推送的一些问题,解答之后我觉得这个话题还挺有用,因为几乎大部分人都会遇到这个问题,那姑且就写篇文章总结给你们吧. 1. 为什么要用推送? 推送功能可谓是现如今任何一个 App ...
- c# 备份数据
#region 备份数据文件 /// <summary> /// 备份数据文件 /// </summary> /// <param name="strFileN ...
- iOS改变UIAlertView、UIActionSheet、UIAlertController系统字体颜色
废话不多说,直接上代码,效果是最好的说服力 1.改变UIAlertView字体颜色 [UIView appearance].tintColor = [UIColor greenColor]; 个人还是 ...
- 关联android-support-v4源码关联不上的解决办法
在android项目中查看android-support-v4中的源码提示“Android Private Libraries which does not modified source attac ...
- update module （更新模块）
[转自http://blog.csdn.net/zhongguomao/article/details/6712568] function module:更新程序必须用一个特殊的FM(update m ...
- 你不得不知的几款常用的在线API管理工具
在项目开发过程中,总会涉及到接口文档的设计编写,之前使用的都是ms office工具,不够漂亮也不直观,变更频繁的话维护成本也更高,及时性也是大问题.基于这个背景,下面介绍几个常用的API管理工具,方 ...
- 9patch图片
9patch图片可直接缩放,放在drawable文件夹下就可以 右边和下边指定内容区域
- POJ 2063 Investment （完全背包）
A - Investment Time Limit:1000MS Memory Limit:30000KB 64bit IO Format:%I64d & %I64u Subm ...