酷酷的网页时钟
clock.html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="clock.css"/>
</head>
<body>
<div class="container">
<div class="hour"></div>
<div class="minute"></div>
<div class="second"></div>
<div class="center"></div>
</div>
<sapn style="margin-left: 100px; font-size: 12px; font-family: 仿宋;">现在时刻是<span class="time"></span></sapn>
<script src="clock.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
clock.css
body{
background-color: #95a5a6;
padding: 0;
margin: 0;
}
.container{
position: relative;
top: 100px;
margin: auto;
width: 200px;
height: 200px;
border-radius: 50%;
box-sizing: border-box;
border:10px solid #60a3bc;
box-shadow:0px 0px 10px red,inset 0px 0px 10px red;
background: url(demo4.jpg) top left/200px 200px no-repeat;
}
.moment{
position: absolute;
margin:0 auto;
top: 0;
left:89px;
width: 2px;
height: 10px;
opacity: 0.9;
border-radius: 5px;
background-color: #22a6b3;
transform-origin:1px 90px;
}
.hour{
position: absolute;
margin:0 auto;
top: 0;
left:86px;
width: 8px;
height: 50px;
opacity: 0.9;
margin-top: 40px;
border-radius: 5px;
background-color: #e55039;
transform-origin:4px 50px;
}
.minute{
position: absolute;
top: 0;
left :87px;
margin: 0 auto;
width: 6px;
height: 65px;
opacity: 0.6;
margin-top: 25px;
border-radius: 5px;
transform-origin: 3px 65px;
background-color:#B53471;
}
.second{
position: absolute;
top: 0;
left:88px;
width: 4px;
height: 90px;
opacity: 0.4;
border-radius: 5px;
transform-origin: 2px 90px;
background-color:#12CBC4;
}
.center{
position: absolute;
left: 82px;
top: 82px;
width: 16px;
height: 16px;
border-radius: 50px;
background-color: #2c2c54;
z-index: 9;
box-shadow: 0px 0px 10px #1B1464;
}
clock.js
var data,hour,minute,second;
var deghour,degminute,degsecond;
var domhour,domminute,domsecond;
var domSpan = document.querySelector("span.time");
var domContainer = document.querySelector(".container");
function createMoment(){
for(var i = 0; i<12 ;i++){
var item = document.createElement("div");
item.setAttribute("class","moment");
var degIn = i * 30;
item.style.transform = `rotate(${degIn}deg)`;
domContainer.appendChild(item);
}
}
function showSpan(){
setInterval(function(){
data = new Date();
hour = data.getHours();//获取小时
minute = data.getMinutes(); //获取分钟
second = data.getSeconds(); //获取秒
deghour = hour*30;
degminute = minute*6;
degsecond = second*6;
domhour = document.querySelector(".hour");
domminute = document.querySelector(".minute");
domsecond = document.querySelector(".second");
domhour.style.transform = `rotate(${deghour}deg)`;
domminute.style.transform = `rotate(${degminute}deg)`;
domsecond.style.transform = `rotate(${degsecond}deg)`;
domSpan.textContent = hour+":"+minute+":"+second;
},1000);
}
createMoment();
showSpan();