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">& ...
随机推荐
- 给定一颗完全二叉树，给每一层添加上next的指针，从左边指向右边
给你机会发出声音,但是不给你机会证明高层的决定是错的 RT: 时间复杂度O(n) 空间复杂度O(1) 原理就是有指针指向父节点和当前的节点,左孩子必指向右孩子,右孩子必指向父节点的下一个节点的左孩子 ...
- 【Android】图片（文件）上传的请求分析结构
怎么在android中上传文件,即怎么用Java向服务器上传文件.上传图片,这是个老问题了,在网上能搜到现成的代码,很多朋友用起来也比较熟了,但是为什么这么写,可能很多朋友并不清楚,这篇文章就来分析一 ...
- 导出到Excel中NPOI
源地址:http://www.cnblogs.com/dreamof/archive/2010/06/02/1750151.html\ 1.NPOI官方网站:http://npoi.codeplex. ...
- Ajax学习笔记(2)--load()方法
<head runat="server"> <title></title> <script src="http://localh ...
- 九度OJ 1177：查找 （字符串操作）
时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:6729 解决:1981 题目描述: 读入一组字符串(待操作的),再读入一个int n记录记下来有几条命令,总共有2中命令:1.翻转 从下标 ...
- 在java项目中使用protobuf
1 通用方式 第一步,定义数据结构 第二步,使用protoc.exe生成java代码 第三步,序列化 第四步,反序列化 2 grpc方式 grpc官方推荐的方式,通过maven插件来生成java代码. ...
- 【C语言天天练（十）】结构体
引言:数据常常以成组的形式存在.在C中,使用结构能够把不同类型的值存放在一起. 结构的声明有两种 1.struct SIMPLE{ int a; char b; float c; };然后用标签SIM ...
- (1366, "Incorrect string value: '\\xF3\\xB0\\x84\\xBC</...' for column 'content' at row 1")
插数据库报错 (1366, "Incorrect string value: '\\xF3\\xB0\\x84\\xBC</...' for column 'content' at r ...
- SpringBoot2.0之整合ActiveMQ（发布订阅模式）
发布订阅模式与前面的点对点模式很类似,简直一毛一样 注意:发布订阅模式 先启动消费者 公用pom: <project xmlns="http://maven.apache.org/PO ...
- 如何让你的手机U盘集PE工具、系统安装、无线破解等众多功能于一身
不久前,手里的U盘坏了,于是乎,又在网上淘了一个Type-C U盘,刚好手机电脑都可以用. 那么现在U有了,我们要做什么呢? 第一:让U盘插在手机上时,可以供手机读写,实现手机存储扩容,随插随用,简单 ...