用javascript设计时钟
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>clock</title>
<link rel="stylesheet" type="text/css" href="css/clock.css"/>
<script type="text/javascript" src="js/clock.js"></script>
</head>
<body>
<div id="clock"></div>
<div id="hours"></div>
<div id="minutes"></div>
<div id="seconds"></div>
</body>
</html>
*{
margin: 0;
padding: 0;
}
body{
margin: auto;
width: 500px;
height: 500px;
/*border: 2px solid red;*/
position: relative;
}
#clock{
width: 240px;
height: 240px;
border: 3px solid black;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
/*表盘上的刻度*/
span{
display:block;
width: 40px;
height: 40px;
font-size: 60px;
color: black;
text-align: center;
line-height: 0px;
/*border: 2px solid red;*/
/* border-radius: 50%;*/
position: absolute;
transform:translate(-50%,-50%);
}
span:nth-child(1),span:nth-child(4),span:nth-child(9),span:nth-child(12){
font-size: 40px;
line-height: 40px;
}
span:nth-child(1){
top: 50%;
left: 0%;
}
span:nth-child(2){
top: 33.33%;
left: 16.67%;
transform:translate(-100%,-100%) rotate(45deg);
}
span:nth-child(3){
top: 16.67%;
left: 33.33%;
transform:translate(-100%,-100%) rotate(45deg);
}
span:nth-child(4){
top: 0%;
left: 50%;
}
span:nth-child(5){
top:16.67%;
left: 66.67%;
transform:translate(0%,-100%) rotate(-45deg);
}
span:nth-child(6){
top: 33.33%;
left: 83.3%;
transform:translate(0%,-100%) rotate(-45deg);
}
span:nth-child(7){
top: 66.67%;
left: 16.67%;
transform:translate(-100%,0%) rotate(-45deg);
}
span:nth-child(8){
top: 83.33%;
left: 33.33%;
transform:translate(-100%,0%) rotate(-45deg);
}
span:nth-child(9){
top: 100%;
left: 50%;
}
span:nth-child(10){
top: 83.33%;
left:66.67%;
transform:translate(0%,0%) rotate(45deg);
}
span:nth-child(11){
top: 66.67%;
left: 83.33%;
transform:translate(0%,0%) rotate(45deg);
}
span:nth-child(12){
top: 50%;
left: 100%;
}
/*表盘上的指针
* 1.将指针设置成一个原点
* 2.分别给时针，分针，秒针添加伪类before；
* */
#hours,#minutes,#seconds{
width: 10px;
height: 10px;
border-radius: 50%;
background: black;
/*给指针定位*/
position: absolute;
top: 50%;
left: 50%;
transition: all;
}
#hours:before,#minutes:before,#seconds:before{
content: "";
display: block;
position: absolute;
}
#hours:before{
width: 6px;
height: 50px;
background: red;
top: -50px;
left: 2px;
}
#minutes:before{
width: 4px;
height: 80px;
background: green;
top: -80px;
left: 3px;
}
#seconds:before{
width: 2px;
height: 100px;
background: blue;
top: -100px;
left: 4px;
}
window.onload=function(){
/*获得盒子clock的id*/
var clock=document.getElementById("clock");
/*在clock盒子里面追加12个span*/
var num=8;/*表盘数字*/
for(let i=14;i>2;i--){
if(i>8){/*上表盘的上的刻度*/
num++;
}else{
num=i;/*下表盘的上的刻度*/
}
/*追加元素节点span*/
var text=document.createElement("span");
if(num%3==0){
text.innerText=num;
}else{
text.innerText=".";
}
clock.appendChild(text);
}
time();
setInterval(time,1000);
function time(){
/*获取当前时间对象*/
var myDate = new Date();
var hours=parseInt(myDate.getHours());
/*alert(hours);*/
var minutes=parseInt(myDate.getMinutes());
/*alert(minutes);*/
var seconds=parseInt(myDate.getSeconds());
/*alert(seconds);*/
var hoursMove=document.getElementById("hours");
var minutesMove=document.getElementById("minutes");
var secondsMove=document.getElementById("seconds");
secondsMove.style.transform= "translate(-50%,-50%)"+"rotate("+6*(seconds)%360+"deg)";
minutesMove.style.transform= "translate(-50%,-50%)"+"rotate("+6*minutes+"deg)";
hoursMove.style.transform= "translate(-50%,-50%)"+"rotate("+30*(Math.abs(hours-12)+minutes/60)+"deg)";
}
clearInterval(time);
};
