实现时钟效果的方式还是比较多的，我们这里就给出两种实现方式，一种是纯CSS实现的，还有一种是利用HTML5的canvas来实现，我们一起来看看吧！
注意：本文为了展示方便，把HTML结构，css代码，以及js代码写在一个文件里面，大家在写代码的时候不要这样哦，最好还是分成不同的文件来写。
1、CSS实现
（1）第一步：写HTML结构
<body>
<div class="wrap">
<!--这里面放刻度-->
<ul class="list" id="list"></ul>
<div class="hour" id="hour"></div>
<div class="minute" id="minute"></div>
<div class="second" id="second"></div>
<div class="point" id="point"></div>
</div>
</body>（2）第二步：写样式
*{
margin: 0;
padding: 0;
}
ul,li{
list-style: none;
}
.wrap{
position: absolute;
left:50%;
top: 50%;
transform: translate3d(-50%,-50%,0);
width: 350px;
height: 350px;
border: 14px solid #325FA2;
border-radius: 50%;
}
.point{
position: absolute;
left:50%;
top: 50%;
transform: translate3d(-50%,-50%,0);
width: 0px;
height: 0px;
border: 14px solid #325FA2;
border-radius: 50%;
}
.hour{
position:absolute;
left: 160px;
top:70px;
width: 10px;
height: 130px;
background-color: #000;
border-radius: 5px;
-webkit-transform-origin: 5px 122px;
}
.minute{
position:absolute;
left: 171px;
top:45px;
width: 8px;
height: 160px;
background-color: #000;
border-radius: 50%;
-webkit-transform-origin: 6px 134px;
}
.second{
position:absolute;
left: 172px;
top:36px;
width: 6px;
height: 170px;
background-color:red;
border-radius: 50%;
-webkit-transform-origin: 3px 140px;
}
.kd{
width: 4px;
height: 8px;
background-color: #000000;
position: absolute;
left: 173px;
top:21px;
-webkit-transform-origin: center 155px;
}
.kd:nth-child(5n+1){
height:14px;
}（3）第三步：用js语句循环生成刻度，并让时钟动起来
var list = document.getElementById("list");
var kdStyle = document.getElementById("css");
// 获取时分秒
var oHour = document.getElementById("hour");
var omin = document.getElementById("minute");
var osec = document.getElementById("second");
var Scss = "";
for (var i = 0; i < 60; i++) {
// 循环刻度
list.innerHTML += "<li class='kd'></li>";
Scss += ".kd:nth-of-type(" + (i + 1) + "){-webkit-transform: rotate(" + i * 6 + "deg);}"
}
kdStyle.innerHTML += Scss;
time();
setInterval(time,1000);
function time(){
var date=new Date();
var s=date.getSeconds();
var m=date.getMinutes()+s/60;
var h=date.getHours()+m/60;
h=h>12?h-12:h;
osec.style.transform = "rotate("+s*6+"deg)";
omin.style.transform = "rotate("+m*6+"deg)";
oHour.style.transform = "rotate("+h*30+"deg)";
}这里附上完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>时钟特效</title>
<style id="css">
*{
margin: 0;
padding: 0;
}
ul,li{
list-style: none;
}
.wrap{
position: absolute;
left:50%;
top: 50%;
transform: translate3d(-50%,-50%,0);
width: 350px;
height: 350px;
border: 14px solid #325FA2;
border-radius: 50%;
}
.point{
position: absolute;
left:50%;
top: 50%;
transform: translate3d(-50%,-50%,0);
width: 0px;
height: 0px;
border: 14px solid #325FA2;
border-radius: 50%;
}
.hour{
position:absolute;
left: 160px;
top:70px;
width: 10px;
height: 130px;
background-color: #000;
border-radius: 5px;
-webkit-transform-origin: 5px 122px;
}
.minute{
position:absolute;
left: 171px;
top:45px;
width: 8px;
height: 160px;
background-color: #000;
border-radius: 50%;
-webkit-transform-origin: 5px 134px;
}
.second{
position:absolute;
left: 172px;
top:36px;
width: 6px;
height: 170px;
background-color:red;
border-radius: 50%;
-webkit-transform-origin: 3px 140px;
}
.kd{
width: 4px;
height: 8px;
background-color: #000000;
position: absolute;
left: 173px;
top:21px;
-webkit-transform-origin: center 155px;
}
.kd:nth-child(5n+1){
height:14px;
}
</style>
</head>
<body>
<div class="wrap">
<!--这里面放刻度-->
<ul class="list" id="list"></ul>
<div class="hour" id="hour"></div>
<div class="minute" id="minute"></div>
<div class="second" id="second"></div>
<div class="point" id="point"></div>
</div>
</body>
<script type="text/javascript">
var list = document.getElementById("list");
var kdStyle = document.getElementById("css");
// 获取时分秒
var oHour = document.getElementById("hour");
var omin = document.getElementById("minute");
var osec = document.getElementById("second");
var Scss = "";
for (var i = 0; i < 60; i++) {
// 循环刻度
list.innerHTML += "<li class='kd'></li>";
Scss += ".kd:nth-of-type(" + (i + 1) + "){-webkit-transform: rotate(" + i * 6 + "deg);}"
}
kdStyle.innerHTML += Scss;
time();
setInterval(time,1000);
function time(){
var date=new Date();
var s=date.getSeconds();
var m=date.getMinutes()+s/60;
var h=date.getHours()+m/60;
h=h>12?h-12:h;
osec.style.transform = "rotate("+s*6+"deg)";
omin.style.transform = "rotate("+m*6+"deg)";
oHour.style.transform = "rotate("+h*30+"deg)";
}
</script>
</html>2、canvas实现
（1）第一步：先把canvas容器设置好，并给容器设置一些样式（这里为了方便大家查看就把样式直接写在HTML文件里面，大家在平时写代码的时候最好不要这样，最好把样式单独写在CSS文件里面）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>时钟特效</title>
<style>
*{
margin: 0;
padding: 0;
}
#clock{
background-color: gray;
position: absolute;
left:50%;
top: 50%;
transform: translate3d(-50%,-50%,0);
}
</style>
</head>
<body>
<!--指定canvas标签并指定宽高和id，默认的width是300，height是150-->
<canvas id="clock" width="500px" height="500px">
<!--如果浏览器支持画布元素，下面这行提示字就不会显示-->
<sapn>您的浏览器不支持画布元素，请您换成Google浏览器</sapn>
</canvas>
</body>
</html>接下来就是在script标签里面来写命令控制canvas画笔了
（2）第二步：写时钟效果函数（这里用move函数来表示）
function move(){
// 初始化画布
clk.save();
clk.translate(250,250);
clk.rotate(-90*Math.PI/180);
clk.strokeStyle="black";
clk.lineWidth=8;
clk.lineCap="round";
clk.beginPath();
//外层圆盘
clk.save();
clk.strokeStyle="#325FA2";
clk.lineWidth=14;
clk.beginPath();
clk.arc(0,0,200,0,360*Math.PI/180);
clk.stroke();
clk.restore();
//时针刻度
clk.save();
for(let i=0;i<12;i++){
clk.rotate(30*Math.PI/180);
clk.beginPath();
clk.moveTo(160,0);
clk.lineTo(180,0);
clk.stroke();
}
clk.restore();
//分针刻度
clk.save();
for(let i=0;i<60;i++){
if(i%5!=0){
clk.beginPath();
clk.moveTo(170,0);
clk.lineTo(180,0);
clk.stroke();
}
clk.rotate(6*Math.PI/180);
}
clk.restore();
//获取当前时间
let date=new Date();
let s=date.getSeconds();
let m=date.getMinutes()+s/60;
let h=date.getHours()+m/60;
h=h>12?h-12:h;
//时针
clk.save();
clk.lineWidth=14;
clk.rotate(h*30*Math.PI/180);
clk.beginPath();
clk.moveTo(-20,0);
clk.lineTo(80,0);
clk.stroke();
clk.restore();
//分针
clk.save();
clk.lineWidth=10;
clk.rotate(m*6*Math.PI/180);
clk.beginPath();
clk.moveTo(-28,0);
clk.lineTo(110,0);
clk.stroke();
clk.restore();
//秒针
clk.save();
clk.lineWidth=6;
clk.strokeStyle="red";
clk.rotate(s*6*Math.PI/180);
clk.beginPath();
clk.moveTo(-28,0);
clk.lineTo(130,0);
clk.stroke();
clk.restore();
//表座
clk.save();
clk.fillStyle="red";
clk.beginPath();
clk.arc(0,0,10,0,360*Math.PI/180);
clk.fill();
clk.restore();
clk.restore();
}（3）第三步：设置一个计时器让时钟动起来
setInterval(function(){
clk.clearRect(0,0,500,500); //每次都需要清除画布
move();
},1000);下面附上完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>时钟特效</title>
<style>
*{
margin: 0;
padding: 0;
}
#clock{
background-color: gray;
position: absolute;
left:50%;
top: 50%;
transform: translate3d(-50%,-50%,0);
}
</style>
</head>
<body>
<canvas id="clock" width="500px" height="500px">
<!--如果浏览器支持画布元素，下面这行提示字就不会显示-->
<sapn>您的浏览器不支持画布元素，请您换成Google浏览器</sapn>
</canvas>
</body>
<script type="text/javascript">
window.onload=function(){
let clock=document.querySelector("#clock");
if(clock.getContext){
let clk = clock.getContext("2d");
//设置定时器让时钟动起来
setInterval(function(){
clk.clearRect(0,0,500,500); //每次都需要清除画布
move();
},1000);
move();
function move(){
// 初始化画布
clk.save();
clk.translate(250,250);
clk.rotate(-90*Math.PI/180);
clk.strokeStyle="black";
clk.lineWidth=8;
clk.lineCap="round";
clk.beginPath();
//外层圆盘
clk.save();
clk.strokeStyle="#325FA2";
clk.lineWidth=14;
clk.beginPath();
clk.arc(0,0,200,0,360*Math.PI/180);
clk.stroke();
clk.restore();
//时针刻度
clk.save();
for(let i=0;i<12;i++){
clk.rotate(30*Math.PI/180);
clk.beginPath();
clk.moveTo(160,0);
clk.lineTo(180,0);
clk.stroke();
}
clk.restore();
//分针刻度
clk.save();
for(let i=0;i<60;i++){
if(i%5!=0){
clk.beginPath();
clk.moveTo(170,0);
clk.lineTo(180,0);
clk.stroke();
}
clk.rotate(6*Math.PI/180);
}
clk.restore();
//获取当前时间
let date=new Date();
let s=date.getSeconds();
let m=date.getMinutes()+s/60;
let h=date.getHours()+m/60;
h=h>12?h-12:h;
//时针
clk.save();
clk.lineWidth=14;
clk.rotate(h*30*Math.PI/180);
clk.beginPath();
clk.moveTo(-20,0);
clk.lineTo(80,0);
clk.stroke();
clk.restore();
//分针
clk.save();
clk.lineWidth=10;
clk.rotate(m*6*Math.PI/180);
clk.beginPath();
clk.moveTo(-28,0);
clk.lineTo(110,0);
clk.stroke();
clk.restore();
//秒针
clk.save();
clk.lineWidth=6;
clk.strokeStyle="red";
clk.rotate(s*6*Math.PI/180);
clk.beginPath();
clk.moveTo(-28,0);
clk.lineTo(130,0);
clk.stroke();
clk.restore();
//表座
clk.save();
clk.fillStyle="red";
clk.beginPath();
clk.arc(0,0,10,0,360*Math.PI/180);
clk.fill();
clk.restore();
clk.restore();
}
}
}
</script>
</html>
