蚂蚁部落

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 64|回复: 0

[时间日期] js和css3圆形钟表实现过程详解

[复制链接]
发表于 2017-1-11 22:21:38 | 显示全部楼层 |阅读模式
本帖最后由 antzone 于 2017-1-11 22:21 编辑

js和css3圆形钟表实现过程详解:
分享一段代码实例,它利用css和js实现了圆形钟表效果。
并且能够实时获取本机的时间,下面就通过代码实例详细介绍一下它的实现过程。
代码实例如下:
[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
.box{
  width: 300px;
  height: 300px;
  border-radius: 50%;
  border: 5px solid #ccc;
  margin: 100px auto;
  position: relative;
}
.kedu{
  width: 300px;
  height: 300px;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
}
.kedu div{
  height: 300px;
  position: absolute;
  left: 50%;
}
.kedu div:nth-child(1){
  width: 6px;
  background: #333;
  margin-left: -3px;
}
.kedu div:nth-child(2){
  width: 2px;
  background: #666;
  margin-left: -3px;
  transform: rotate(30deg);
}
.kedu div:nth-child(3){
  width: 2px;
  background: #666;
  margin-left: -3px;
  transform: rotate(60deg);
}
.kedu div:nth-child(4){
  width: 6px;
  background: #333;
  margin-left: -3px;
  transform: rotate(90deg);
}
.kedu div:nth-child(5){
  width: 2px;
  background: #666;
  margin-left: -3px;
  transform: rotate(120deg);
}
.kedu div:nth-child(6){
  width: 2px;
  background: #666;
  margin-left: -3px;
  transform: rotate(150deg);
}
.disc{
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #000;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -10px;
  margin-top: -10px;
  z-index: 2;
}
.middisc{
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -130px;
  margin-top: -130px;
}
.hour{
  width: 6px;
  height: 60px;
  background: #000;
  position: absolute;
  top: -50px;
  left: 50%;
  margin-left: -3px;
  transform-origin: bottom center;
  /*animation: move 43200s steps(60) 0s infinite;*/
}
.minu{
  width: 4px;
  height: 80px;
  background: green;
  position: absolute;
  top: -70px;
  left: 50%;
  margin-left: -2px;
  transform-origin: bottom center;
  /*animation: move 3600s steps(60) 0s infinite;*/
}
.second{
  width: 2px;
  height: 100px;
  background: #f00;
  position: absolute;
  top: -90px;
  left: 50%;
  margin-left: -1px;
  transform-origin: bottom center;
  /*-webkit-animation: move 60s steps(60) infinite;*/
}
.cover{
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #000;
  position: absolute;
}
@keyframes move{
  0%{
    transform: rotate(0deg);
  }
  100%{
    transform: rotate(360deg);
  }
}
</style>
<script>
function $(id){
  return document.getElementById(id);
}
function fnime(){
  var time = new Date();
  var hour = time.getHours();
  var minute = time.getMinutes();
  var second = time.getSeconds();
  if(hour>12){
    hour = hour - 12;
  }
  $("second").style.transform = "rotate("+second*6+"deg)";
  $("minu").style.transform = "rotate("+minute*6+"deg)";
  $("hour").style.transform = "rotate("+(hour+minute/60)*5*6+"deg)";
}
window.onload = function () {
  fnime();
  setInterval(fnime, 1000)
}        
</script>
</head>
<body>
<div class="box">
  <div class="kedu">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div class="disc">
    <div class="hour" id="hour"></div>
    <div class="minu" id="minu"></div>
    <div class="second" id="second"></div>
    <div class="cover"></div>
  </div>
  <div class="middisc"></div>
</div>
</body>
</html>

上面的代码实现了我们的要求,下面介绍一下它的实现过程。
一.代码注释:
[CSS] 纯文本查看 复制代码
.box{
  width: 300px;
  height: 300px;
  border-radius: 50%;
  border: 5px solid #ccc;
  margin: 100px auto;
  position: relative;
}

设置圆形表盘边框的样式,边框5px就是我们看到的钟表灰色边框。
同时设置为相对定位,那么它定位的子元素就可以用它作为定位参考对象。
[CSS] 纯文本查看 复制代码
.kedu{
  width: 300px;
  height: 300px;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
}

这个是设置表盘的样式,和上面相比没有边框,只有内部空白的部分,用来放置刻度。
[CSS] 纯文本查看 复制代码
.kedu div{
  height: 300px;
  position: absolute;
  left: 50%;
}

设置刻度的复用的样式。
都是绝对定位,left值50%(会和后面margin-left配合使其达到居中效果)。
[CSS] 纯文本查看 复制代码
.kedu div:nth-child(1){
  width: 6px;
  background: #333;
  margin-left: -3px;
}

设置垂直刻度,也就是12点和6点的刻度。
width值是6px,然后设置margin-left为-3px,那么就可以将其实现居中了。
[CSS] 纯文本查看 复制代码
.disc{
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #000;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -10px;
  margin-top: -10px;
  z-index: 2;
}

设置钟表中心黑色小圆形部分的样式。
[CSS] 纯文本查看 复制代码
.middisc{
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -130px;
  margin-top: -130px;
}

在上面我们说过.kedu的div是用来放置刻度的,并且每一个刻度都是贯穿的,为什么只会看到两端的一小段刻度呢。
就是因为通过这个圆形div的遮挡来实现的。
[CSS] 纯文本查看 复制代码
.hour{
  width: 6px;
  height: 60px;
  background: #000;
  position: absolute;
  top: -50px;
  left: 50%;
  margin-left: -3px;
  transform-origin: bottom center;
}

设置小时指针的样式。
二.相关阅读:
(1).border-radius可以参阅CSS3 border-radius圆角一章节。
(2).:nth-child()可以参阅CSS E:nth-child(n)伪类选择符一章节。
(3).transform可以参阅CSS3 transform属性一章节。
(4).transform-origin可以参阅css3 transform-origin一章节。
(5).@keyframes可以参阅CSS3 @keyframes一章节。
(6).setInterval()可以参阅window.setInterval()方法一章节。

发表回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复返回顶部 返回列表