前言
之前搜索前端实现时钟没找到现成的,或者是只写一半,于是自己结合几个博客写了出来,还算有趣,分享一下。
因为隔得有点久,已经忘记当时看的博客,就不引用了,直接上代码(代码也有点乱,凑合看吧)
核心思路
- 设置以左侧中心为中心旋转元素
transform-origin: left center;
- 设置旋转角度
transform: rotate
,比如指针有六十个,遍历设置角度时每次递增360/60=6deg - 最后设置translate,让他们像坐火箭一样发射出去,就是要微调x轴y轴的偏移,这点比较麻烦
- 数字的话反向旋转来抵消发射时调整的角度,所以用span包裹
预览
代码
HTML
<!-- 时钟 -->
<clock>
<div class="clock">
<div class="circle"></div>
<ul class="min"></ul>
<ul class="hour"></ul>
<ul class="numbers"></ul>
<ul class="pointer">
<li class="p-hour"></li>
<li class="p-min"></li>
<li class="p-sec"></li>
</ul>
</div>
</clock>
CSS
/* 表盘 */
.clock {
width: 200px;
height: 200px;
margin: 30px auto;
border-radius: 100px;
background-color: #292a38;
position: relative;
}
.circle {
position: absolute;
top: 50%;
left: 50%;
background: white;
width: 10px;
height: 10px;
border-radius: 5px;
margin-top: -5px;
margin-left: -5px;
}
/* 刻度 */
li {
list-style: none;
}
.hour li {
position: absolute;
width: 10px;
height: 8px;
left: 50%;
top: 50%;
background-color: #fff;
transform-origin: left center;
/* transform: translate(85px, -5px); */
}
.numbers li {
position: absolute;
left: 50%;
top: 50%;
color: #fff;
transform-origin: left center;
/* transform: translate(85px, -5px); */
}
.numbers li span{
display: block;
}
.min li {
position: absolute;
width: 5px;
height: 2px;
left: 50%;
top: 50%;
background-color: #fff;
transform-origin: left center;
/* transform: translate(85px, -5px); */
}
/* 指针 */
.p-hour {
position: absolute;
width: 45px;
height: 3px;
top: 50%;
left: 50%;
transform-origin: left center;
background: #fff;
margin-top: -2px;
}
.p-min {
position: absolute;
width: 60px;
height: 2px;
top: 50%;
left: 50%;
transform-origin: left center;
background: #fff;
margin-top: -2px;
}
.p-sec {
position: absolute;
width: 80px;
height: 1px;
top: 50%;
left: 50%;
transform-origin: left center;
background: #fff;
margin-top: -2px;
}
JS
CreateHourLines();
function CreateHourLines() {
/* 绘制钟表的时钟刻度线 */
var html = "";
// key1表示x方向上的偏移量,key2表示y方向上的偏移量
var val, key1, key2;
for (var i = 0; i < 12; i++) {
val = i * 30;
key1 = 88;
key2 = 0;
if (val > 180 && val < 360) {
key1 = 90;
}
if (val > 0 && val < 180) {
key1 = 85
}
if (val > 90 && val < 270) {
key2 = 3;
}
if (val < 90 || val > 270) {
key2 = -3;
}
html += "<li style='transform: rotate(" + val + "deg) translate(" + key1 + "px, " + key2 + "px)'></li>";
}
$(".hour").html(html);
}
//分钟
CreateMinLines();
function CreateMinLines() {
/* 绘制钟表的时钟刻度线 */
var html = "";
// key1表示x方向上的偏移量,key2表示y方向上的偏移量
var val, key1, key2;
for (var i = 0; i < 60; i++) {
val = i * 6;
key1 = 90;
key2 = 0;
html += "<li style='transform: rotate(" + val + "deg) translate(" + key1 + "px, " + key2 + "px)'></li>";
}
$(".min").html(html);
}
//数字
CreateNumber();
function CreateNumber() {
/* 绘制钟表的时钟刻度线 */
var html = "";
// key1表示x方向上的偏移量,key2表示y方向上的偏移量
var val, key1, key2;
for (var i = 0; i < 12; i++) {
val = i * 30;
key1 = 70;
key2 = 0;
if (val > 180 && val < 360) {
key1 = 75;
}
if (val > 0 && val < 180) {
key1 = 65
}
if (val > 90 && val < 270) {
key2 = 3;
}
if (val < 90 || val > 270) {
key2 = -3;
}
var num=i+3;//从3开始
if(num>12){
num=i-9;
}
html += "<li style='transform: rotate(" + val + "deg) translate(" + key1 + "px, " + key2 + "px)'><span style='transform: rotate(-" + val + "deg)'>" + num + "</span></li>";
}
$(".numbers").html(html);
}
move();
function move() {
setInterval(function () {
// 获取当前时刻
var date = new Date();
var sec = date.getSeconds();
var min = date.getMinutes();
var hour = date.getHours();
// 计算各指针对应的角度
var secAngle = sec * 6 - 90; // s*6-90
var minAngle = min * 6 + sec * 0.1 - 90; // m*6+s*0.1-90
var hourAngle = hour * 30 + min * 0.5 - 90; // h*30+m*0.5 - 90
// 转动指针
$(".p-sec").css("transform", "rotate(" + secAngle + "deg)");
$(".p-min").css("transform", "rotate(" + minAngle + "deg)");
$(".p-hour").css("transform", "rotate(" + hourAngle + "deg)");
}, 1000)
}