制作CSS3时钟
2017-01-17 本文已影响308人
旧丶时候
0. 前言
今天，用CSS3做一个小小的时钟，跟现实中的时钟，功能一样，都能实现看时间的效果。
时钟.jpg
1. 简介
时钟：现实中咱们主要功能是来看时间的，其次可以说是一个装饰品。
2. 制作时钟的思路
- 第一步画表盘
- 第二步添加时针，分针，秒针
- 第三步设置指针
3. 代码
3.1画表盘
*{
padding: 0;
margin: 0;
}
#box{
width: 200px;
height: 200px;
position: relative;
border-radius: 50%;
border: 5px solid black;
margin: 100px auto;
}
#kedu{
width: 200px;
height: 200px;
position: absolute;
}
#kedu div{
width: 20px;
height: 200px;
position: absolute;
left: 90px;
}
<div id="box">
<div id="kedu">
<div><span>12</span></div>
<div><span>1</span></div>
<div><span>2</span></div>
<div><span>3</span></div>
<div><span>4</span></div>
<div><span>5</span></div>
<div><span>6</span></div>
<div><span>7</span></div>
<div><span>8</span></div>
<div><span>9</span></div>
<div><span>10</span></div>
<div><span>11</span></div>
</div>
</div>
表盘.png
你会好奇，为什么数字都会在一块，因为定位了啊，那么，怎么让他们分开？可以用循环变换角度。。。
var keduDivs = document.querySelectorAll("#kedu div");
//循环控制刻度形变的角度
for (var i = 0; i < keduDivs.length; i++) {
//表盘一圈360度，总共有12个刻度，每个刻度之间是360/12=30度
keduDivs[i].style.transform = "rotate(" + i * 30 + "deg)";
}
时钟.png
又有问题了，那字怎么倒了啊，怎么整啊？在反转回去，这里别反转div，要是反转div的话，字又回去了，那你看我的HTML结构，我在反转span标签就欧克了。
for (var i = 0; i < keduDivs.length; i++) {
//表盘一圈360度，总共有12个刻度，每个刻度之间是360/12=30度
keduDivs[i].style.transform = "rotate(" + i * 30 + "deg)";
//解决刻度值显示正向问题，反向转回去就可以了
keduDivs[i].firstChild.style.transform = "rotate(" + -i * 30 + "deg)";
}
时钟.png
3.2 添加时针，分针，秒针
*{
padding: 0;
margin: 0;
}
#box{
width: 200px;
height: 200px;
position: relative;
border-radius: 50%;
border: 5px solid black;
margin: 100px auto;
}
#kedu{
width: 200px;
height: 200px;
position: absolute;
}
#kedu div{
width: 20px;
height: 200px;
position: absolute;
left: 90px;
}
#box span{
display: block;
position: absolute;
}
#hour{
width: 8px;
height: 50px;
position: absolute;
background-color: red;
left: 95px;
top: 50px;
/*这个属性可以改变旋转的中心点*/
transform-origin: bottom center;
}
#minute{
width: 6px;
height: 70px;
position: absolute;
background-color: cyan;
left: 96px;
top: 30px;
/*这个属性可以改变旋转的中心点*/
transform-origin: bottom center;
}
#second{
width: 4px;
height: 90px;
position: absolute;
background-color: pink;
left: 97px;
top: 10px;
/*这个属性可以改变旋转的中心点*/
transform-origin: bottom center;
}
<div id="box">
<div id="kedu">
<div><span>12</span></div>
<div><span>1</span></div>
<div><span>2</span></div>
<div><span>3</span></div>
<div><span>4</span></div>
<div><span>5</span></div>
<div><span>6</span></div>
<div><span>7</span></div>
<div><span>8</span></div>
<div><span>9</span></div>
<div><span>10</span></div>
<div><span>11</span></div>
</div>
<div id="hour"></div>
<div id="minute"></div>
<div id="second"></div>
</div>
时钟.png
3.3 设置指针
//获取时分秒针DIV
var hourDiv = document.querySelector("#hour");
var minuteDiv = document.querySelector("#minute");
var secondDiv = document.querySelector("#second");
//获取时分秒
var date = new Date();
//把小时转换成12进制，方便运算
var hour = date.getHours() % 12;
var minute = date.getMinutes();
var second = date.getSeconds();
//设置指针
function setPointers() {
second++;
if (second == 60) {
second = 0;
minute++;
if (minute == 60) {
minute = 0;
hour++;
if (hour == 13) {
hour = 0;
}
}
}
//一圈360度，一圈60秒，每秒是360/60=6度
secondDiv.style.transform = "rotate(" + second * 6 + "deg)";
//一圈360度，一圈60分，每分是360/60=6度
minuteDiv.style.transform = "rotate(" + minute * 6 + "deg)";
//一圈360度，一圈12小时，每秒是360/12=30度
//一小时是30度，一小时是60分钟，一分钟是30/60=0.5度
hourDiv.style.transform = "rotate(" + (hour * 30 + minute * 0.5) + "deg)";
}
setPointers();
//创建定时器
setInterval(function () {
setPointers();
},1000);
时钟.gif
4. 完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
#box{
width: 200px;
height: 200px;
position: relative;
border-radius: 50%;
border: 5px solid black;
margin: 100px auto;
}
#kedu{
width: 200px;
height: 200px;
position: absolute;
}
#kedu div{
width: 20px;
height: 200px;
position: absolute;
left: 90px;
}
#box span{
display: block;
position: absolute;
}
#hour{
width: 8px;
height: 50px;
position: absolute;
background-color: red;
left: 95px;
top: 50px;
/*这个属性可以改变旋转的中心点*/
transform-origin: bottom center;
}
#minute{
width: 6px;
height: 70px;
position: absolute;
background-color: cyan;
left: 96px;
top: 30px;
/*这个属性可以改变旋转的中心点*/
transform-origin: bottom center;
}
#second{
width: 4px;
height: 90px;
position: absolute;
background-color: pink;
left: 97px;
top: 10px;
/*这个属性可以改变旋转的中心点*/
transform-origin: bottom center;
}
</style>
</head>
<body>
<div id="box">
<div id="kedu">
<div><span>12</span></div>
<div><span>1</span></div>
<div><span>2</span></div>
<div><span>3</span></div>
<div><span>4</span></div>
<div><span>5</span></div>
<div><span>6</span></div>
<div><span>7</span></div>
<div><span>8</span></div>
<div><span>9</span></div>
<div><span>10</span></div>
<div><span>11</span></div>
</div>
<div id="hour"></div>
<div id="minute"></div>
<div id="second"></div>
</div>
<script type="text/javascript">
var keduDivs = document.querySelectorAll("#kedu div");
//循环控制刻度形变的角度
for (var i = 0; i < keduDivs.length; i++) {
//表盘一圈360度，总共有12个刻度，每个刻度之间是360/12=30度
keduDivs[i].style.transform = "rotate(" + i * 30 + "deg)";
//解决刻度值显示正向问题，反向转回去就可以了
keduDivs[i].firstChild.style.transform = "rotate(" + -i * 30 + "deg)";
}
//获取时分秒针DIV
var hourDiv = document.querySelector("#hour");
var minuteDiv = document.querySelector("#minute");
var secondDiv = document.querySelector("#second");
//获取时分秒
var date = new Date();
//把小时转换成12进制，方便运算
var hour = date.getHours() % 12;
var minute = date.getMinutes();
var second = date.getSeconds();
//设置指针
function setPointers() {
second++;
if (second == 60) {
second = 0;
minute++;
if (minute == 60) {
minute = 0;
hour++;
if (hour == 13) {
hour = 0;
}
}
}
//一圈360度，一圈60秒，每秒是360/60=6度
secondDiv.style.transform = "rotate(" + second * 6 + "deg)";
//一圈360度，一圈60分，每分是360/60=6度
minuteDiv.style.transform = "rotate(" + minute * 6 + "deg)";
//一圈360度，一圈12小时，每秒是360/12=30度
//一小时是30度，一小时是60分钟，一分钟是30/60=0.5度
hourDiv.style.transform = "rotate(" + (hour * 30 + minute * 0.5) + "deg)";
}
setPointers();
setInterval(function () {
setPointers();
},1000);
</script>
</body>
</html>
5. 结束语
时间还是得一天一天的过，希望大家能开心每一天。加油！！！
