//由于刚学HTML时间不久，JavaScript也是刚刚接触，有很多繁琐代码，希望多多体谅，后续会慢慢改进的
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>简单时钟</title>
<style type="text/css">
.wrap{
width: 400px;
height: 400px;
border:1px solid black;
border-radius: 50%;
margin: 50px auto;
position: relative;
}
.wrap .center .circle{
border-radius: 50%;
width: 10px;
height: 10px;
background-color: orangered;
position: absolute;
top: 50%;
left: 50%;
margin-top: -5px;
margin-left: -5px;
}
.inner12_6,.inner1_7,.inner2_8,.inner3_9,.inner4_10,.inner5_11{
width: 4px;
height: 400px;
/*background: black;*/
position: absolute;
left: 50%;
margin-left: -2px;
}
.inner1_7{
transform: rotateZ(30deg);
}
.inner2_8{
transform: rotateZ(60deg);
}
.inner3_9{
transform: rotateZ(90deg);
}
.inner4_10{
transform: rotateZ(120deg);
}
.inner5_11{
transform: rotateZ(150deg);
}
.inner12,.inner1,.inner2,.inner3,.inner4,.inner5{
width: 4px;
height: 20px;
background: black;
position: absolute;
top: 0;
}
.inner6,.inner7,.inner8,.inner9,.inner10,.inner11{
width: 4px;
height: 20px;
background: black;
position: absolute;
bottom: 0;
}
.inner12>span{
position: absolute;
top: 20px;
left: -5px;
}
.inner6>span{
position: absolute;
bottom: 20px;
left: -3px;
}
.inner1>span{
position: absolute;
top: 20px;
left: -3px;
transform: rotateZ(-30deg);
}
.inner7>span{
position: absolute;
bottom: 20px;
left: -3px;
transform: rotateZ(-30deg);
}
.inner2>span{
position: absolute;
top: 20px;
left: -3px;
transform: rotateZ(-60deg);
}
.inner8>span{
position: absolute;
bottom: 20px;
left: -3px;
transform: rotateZ(-60deg);
}
.inner3>span{
position: absolute;
top: 20px;
left: -3px;
transform: rotateZ(-90deg);
}
.inner9>span{
position: absolute;
bottom: 20px;
left: -3px;
transform: rotateZ(-90deg);
}
.inner4>span{
position: absolute;
top: 20px;
left: -3px;
transform: rotateZ(-120deg);
}
.inner10>span{
position: absolute;
bottom: 20px;
left: -5px;
transform: rotateZ(-120deg);
}
.inner5>span{
position: absolute;
top: 20px;
left: -3px;
transform: rotateZ(-150deg);
}
.inner11>span{
position: absolute;
bottom: 20px;
left: -5px;
transform: rotateZ(-150deg);
}
.wrap .center{
position: absolute;
top: 50%;
left: 50%;
transform: rotate(180deg);
}
.hour{
width: 6px;
height: 100px;
background: seagreen;
position: absolute;
left: 2px;
border-radius: 6px;
transform-origin: 0px 3px;
}
.minu{
width: 4px;
height: 150px;
background: dodgerblue;
position: absolute;
transform-origin: 0px 2px;
left: -2px;
}
.sec{
width: 2px;
height: 180px;
background: red;
position: absolute;
left: -2px;
transform-origin: 0px 1px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="inner12_6">
<div class="inner12"><span>12</span></div>
<div class="inner6"><span>6</span></div>
</div>
<div class="inner1_7">
<div class="inner1"><span>1</span></div>
<div class="inner7"><span>7</span></div>
</div>
<div class="inner2_8">
<div class="inner2"><span>2</span></div>
<div class="inner8"><span>8</span></div>
</div>
<div class="inner3_9">
<div class="inner3"><span>3</span></div>
<div class="inner9"><span>9</span></div>
</div>
<div class="inner4_10">
<div class="inner4"><span>4</span></div>
<div class="inner10"><span>10</span></div>
</div>
<div class="inner5_11">
<div class="inner5"><span>5</span></div>
<div class="inner11"><span>11</span></div>
</div>
<div class="center">
<div class="hour"></div>
<div class="minu"></div>
<div class="sec"></div>
<div class="circle"></div>
</div>
</div>
</body>
<script type="text/javascript">
var hour = document.querySelector(".hour");
var minu = document.querySelector(".minu");
var sec = document.querySelector(".sec");
function clock(){
var now = new Date;
var hoursDeg = now.getHours()/12*360;
var minutesDeg = now.getMinutes()/60*360;
var secondsDeg = now.getSeconds()/60*360+360;
//console.log(hoursDeg,minutesDeg,secondsDeg);
hour.style.transform = "rotate("+hoursDeg+"deg)";
minu.style.transform = "rotate("+minutesDeg+"deg)";
sec.style.transform = "rotate("+secondsDeg+"deg)";
}
clock();
setInterval(clock,1000);
</script>
</html>
浙公网安备 33010602011771号