我要评论学了一段时间的html、css和js后，给大家做一款漂亮的不像实力派的html时钟，先看图：
涉及到的知识点有： css3动画、dom操作、定时器、圆点坐标的计算（好多人是不是已经还给自己的老师了~）
接下来，我们用5步来制作它
step1、准备html
首先，我们需要准备html结构，背景、表盘、指针（时针、分针、秒针）、数字。
<div id="clock"> <div class="bg"> <div class="point"> <div id="hour"></div> <div id="minute"></div> <div id="second"></div> <div class="circle"></div> </div> </div> < /div>
step2、准备css
定义好指针的颜色和大小，需要说明的是transform: rotate(-90deg); 用来旋转指针，transform-origin:0 6px; 用来设置旋转中心点。
<style>
*{
margin: 0;
padding: 0;
}
#clock{
margin: 5% auto;
width: 400px;
height: 400px;
border-radius: 10px;
background: #aaa;
position: relative;
transform: rotate(-90deg);
}
#clock .bg{
width: 360px;
height: 360px;
border-radius: 50%;
background: #fff;
position: absolute;
left: 50%;
top: 50%;
margin-left: -180px;
margin-top: -180px;
}
#clock .point{
position: absolute;
left: 50%;
top: 50%;
margin-left: -14px;
margin-top: -14px;
}
#clock #hour{
width: 80px;
height: 16px;
background: #000;
margin: 6px 0 0 14px;
/*transform: rotate(30deg);*/
transform-origin:0 8px;
/*animation: hour 3s linear 100!* alternate*!;*/
border-radius: 16px;
}
#clock #minute{
width: 120px;
height: 12px;
background: #000;
margin: -14px 0 0 14px;
transform-origin:0 6px;
border-radius: 12px;
}
#clock #second{
width: 160px;
height: 6px;
background: #f00;
margin: -9px 0 0 14px;
transform-origin:0 3px;
border-radius: 6px;
}
#clock .point .circle{
width: 28px;
height: 28px;
border-radius: 50%;
background: #000;
position: absolute;
left: 0;
top: 0;
}
@keyframes hour {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}
#clock .number{
position: absolute;
font-size: 34px;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
transform: rotate(90deg);
}
< /style>
step3、计算时针位置
js通过date对象获取当前时间，gethours获取小时、getminutes获取分钟、getseconds获取秒。时针转动一周是12格，每格角度就是360°/12，分钟和秒都是60格，每格角度360°/60。
function clock(){
var date = new date();//获取当前时间
//时(0-23) 分(0-59)秒(0-59)
//计算转动角度
var hourdeg = date.gethours()*360/12;
var minutedeg = date.getminutes()*360/60;
var seconddeg = date.getseconds()*360/60;
//console.log(hourdeg, minutedeg, seconddeg);
//设置指针
hour.style.transform = 'rotate('+hourdeg+'deg)';
minute.style.transform = 'rotate('+minutedeg+'deg)';
second.style.transform = 'rotate('+seconddeg+'deg)';
}
step4、时钟转动
通过setinterval设置定时器，每秒刷新一次。注意，需要初始化执行一次，否则会在1s后才能看到效果。
//初始化执行一次 clock(); setinterval(clock,1000);
step5、绘制数字时间
数字时间也是在一个圆周上，我们只用确定好半径，然后得到半径上的坐标。通过左边来定位每个数字就好了。看一下圆坐标系的计算规则：
* 圆半径坐标计算：
* x = pointx + r*cos(angle);
* y = pointy + r*sin(angle);
但是注意，我们计算的坐标是圆弧上点的坐标，当定位每个数字时，都是以元素的左上角点进行定位，这样我们的数字就会存在偏移。也就是说数字的中心点不在圆弧上，解决办法就是把坐标点(x,y)平移自身的一半(x-w/2, y-h/2)
，这样数字的中心点就在圆弧上了。
var pointx = 200;
var pointy = 200;
var r = 150;
function drawnumber(){
var deg = math.pi*2/12;//360°
for (var i = 1; i <= 12; i++) {
//计算每格的角度
var angle = deg*i;
//计算圆上的坐标
var x = pointx + r*math.cos(angle);
var y = pointy + r*math.sin(angle);
//创建div,写入数字
var number = document.createelement('div');
number.classname = 'number';
number.innerhtml = i;
//减去自身的一半, 让div的中心点在圆弧上
number.style.left = x - 25 + 'px';
number.style.top = y - 25 + 'px';
//添加到页面
myclock.appendchild(number);
}
}
完整js代码：
<script>
/***
* 时钟:
* 1> 旋转: rotate(90deg)
* 2> 旋转中心点: transform-origin
* */
//todo step1: 获取时钟的指针
var hour = document.getelementbyid('hour');//时针
var minute = document.getelementbyid('minute');//分针
var second = document.getelementbyid('second');//秒针
var myclock = document.getelementbyid('clock');//时钟
//todo step2: 获取当前时间,把指针放在正确的位置
function clock(){
var date = new date();//获取当前时间
//时(0-23) 分(0-59)秒(0-59)
//计算转动角度
var hourdeg = date.gethours()*360/12;
var minutedeg = date.getminutes()*360/60;
var seconddeg = date.getseconds()*360/60;
//console.log(hourdeg, minutedeg, seconddeg);
//设置指针
hour.style.transform = 'rotate('+hourdeg+'deg)';
minute.style.transform = 'rotate('+minutedeg+'deg)';
second.style.transform = 'rotate('+seconddeg+'deg)';
}
//初始化执行一次
clock();
//todo step3: 设置定时器
setinterval(clock,1000);
/***
* 圆半径坐标计算：
* x = pointx + r*cos(angle);
* y = pointy + r*sin(angle);
* */
var pointx = 200;
var pointy = 200;
var r = 150;
//todo step4: 画时钟数字
function drawnumber(){
var deg = math.pi*2/12;//360°
for (var i = 1; i <= 12; i++) {
//计算每格的角度
var angle = deg*i;
//计算圆上的坐标
var x = pointx + r*math.cos(angle);
var y = pointy + r*math.sin(angle);
//创建div,写入数字
var number = document.createelement('div');
number.classname = 'number';
number.innerhtml = i;
//减去自身的一半, 让div的中心点在圆弧上
number.style.left = x - 25 + 'px';
number.style.top = y - 25 + 'px';
//添加到页面
myclock.appendchild(number);
}
}
drawnumber();
< /script>
怎么样，会了吗？
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！
网友评论