您的位置：首页 > Web前端 > CSS

使用CSS和Js实现时钟效果

2017-07-13 15:12 756 查看
通过div和CSS构建时钟的表盘和指针

通过CSS动画实现指针跳动效果

通过js获取时间，并设置初始值

效果如图所示：



具体代码如下

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title> 使用CSS和Js实现时钟 </title>
<style>
.clock{width:400px;height:400px;margin:200px auto;position:relative;}
.clock_pan{width:396px;height:396px;border:2px solid #000;border-radius:50%;position:absolute;top:2px;left:2px;}
.clock_ge{height:380px;background:#000;position:absolute;top:8px;left:50%;transform-origin:0 50%;}
.clock_ge-0{width:4px;transform:rotate(0deg) translateX(-50%);z-index:2;}
.clock_ge-1{width:2px;transform:rotate(30deg) translateX(-50%);}
.clock_ge-2{width:2px;transform:rotate(60deg) translateX(-50%);}
.clock_ge-3{width:4px;transform:rotate(90deg) translateX(-50%);z-index:2;}
.clock_ge-4{width:2px;transform:rotate(120deg)translateX(-50%);}
.clock_ge-5{width:2px;transform:rotate(150deg) translateX(-50%);}
.clock_short{position:absolute;width:340px;height:340px;background:#fff;border-radius:50%;top:30px;left:30px;}
.clock_long{position:absolute;width:300px;height:300px;background:#fff;border-radius:50%;top:50px;left:50px;z-index:3;}
.clock_zhen{position:absolute;z-index:4;top:50%;left:50%;transform-origin:50% 100%;}
/* 通过设置animation-duration的不同时间，达到不同指针的效果*/
.clock_hour{width:6px;height:100px;background:#000;animation:clockrotate 43200s linear infinite;}
.clock_minute{width:4px;height:120px;background:#ff0;animation:clockrotate 3600s linear infinite;}
/* 通过animation-timing-function:steps(60,start) 达到秒针跳动的效果 */
.clock_second{width:2px;height:150px;background:#f00;animation:clockrotate 60s steps(60,start) infinite;}
@keyframes clockrotate{
0%{transform:translate(-50%,-100%) rotate(0deg);}
100%{transform:translate(-50%,-100%) rotate(360deg);}
}
</style>
</head>
<body>
<div class="clock">
<!--  构建表盘  -->
<div class="clock_pan">
<!-- 设置刻度 -->
<div class="clock_ge clock_ge-0"> </div>
<div class="clock_ge clock_ge-1"> </div>
<div class="clock_ge clock_ge-2"> </div>
<div class="clock_ge clock_ge-3"> </div>
<div class="clock_ge clock_ge-4"> </div>
<div class="clock_ge clock_ge-5"> </div>
</div>
<!-- 通过2层遮盖，设置表盘上的刻度 -->
<div class="clock_short"> </div>
<div class="clock_long"> </div>
<!--  /构建表盘  -->
<!--  构建指针  -->
<div class="clock_zhen clock_hour"> </div>
<div class="clock_zhen clock_minute"> </div>
<div class="clock_zhen clock_second"> </div>
<!--  /构建指针  -->
</div>
<script>
//通过Date()对象获取当前时间
var odate = new Date();
var seconds = odate.getSeconds();
var miniutes = odate.getMinutes();
var hour = odate.getHours();
//通过设置animation-delay为负值，使动画马上开始，跳过设置秒数进入动画。
document.querySelector('.clock_hour').style.animationDelay = -(hour * 3600 + miniutes * 60 + seconds) + 's';
document.querySelector('.clock_minute').style.animationDelay = -(miniutes * 60 + seconds) + 's';
document.querySelector('.clock_second').style.animationDelay = -(seconds) + 's';
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  css html javascript
相关文章推荐
新的分享
章节导航