时钟
2018-07-23 本文已影响0人
木利
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#Xbody {
width: 1100px;
height: 500px;
margin: 0 auto;
border: 1px solid gray;
overflow: hidden;
}
#Xbody>div {
width: 120px;
height: 120px;
background: gold;
border-radius: 60px;
float: left;
margin-left: 30px;
margin-top: 30px;
position: relative;
}
#Xbody>div>h1 {
width: 100%;
position: absolute;
height: 100%;
top: 0px;
line-height: 80px;
color: #FFFFFF;
text-align: center;
}
#Xbody>div>h6 {
width: 100%;
position: absolute;
height: 100%;
top: 40%;
color: #FFFFFF;
text-align: center;
}
#Xbody>div>div {
width: 94px;
height: 94px;
background: lightgray;
border: 4px solid white;
border-radius: 60px;
float: left;
overflow: hidden;
margin-left: 9px;
margin-top: 8.5px;
overflow: hidden;
position: relative;
}
#Xbody>div>div>div {
width: 84px;
height: 84px;
background: #f1f1f1;
border-radius: 49px;
margin: 5px auto;
}
#Xbody>div>div>span {
position: absolute;
top: 0;
left: 0;
height: 100%;
background: #f1f1f1;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="Xbody">
<div>
<div id="yearDiv">
<div></div>
<span style="width: 70%;display: none;">
</span>
</div>
<h1 id="year">11</h1>
<h6>year</h6>
</div>
<div>
<div id="monthDiv">
<div></div>
<span style="width: 70%;display: none;">
</span>
</div>
<h1 id="month">11</h1>
<h6>month</h6>
</div>
<div>
<div id="daysDiv">
<div></div>
<span style="width: 70%;display: none;">
</span>
</div>
<h1 id="days">11</h1>
<h6>days</h6>
</div>
<div>
<div id="hoursDiv">
<div></div>
<span style="width: 60%;"></span>
</div>
<h1 id="hours">11</h1>
<h6>hours</h6>
</div>
<div>
<div id="minutesDiv">
<div></div>
<span style="width: 84%;"></span>
</div>
<h1 id="minutes">11</h1>
<h6>minutes</h6>
</div>
<div>
<div id="secondsDiv">
<div></div>
<span style="width: 85%;"></span>
</div>
<h1 id="seconds">11</h1>
<h6>seconds</h6>
</div>
<div>
<div id="milyonseconnetDiv">
<div></div>
<span style="width: 90%;"></span>
</div>
<h1 id="milyonseconnet">11</h1>
<h6>milyonseconnet</h6>
</div>
</div>
</body>
<script>
function ElemntDoc(id) {
return document.getElementById(id);
}
function change(func) {
if(func < 10) {
func = "0" + func
}
return func
}
var milyonseconnet = ElemntDoc("milyonseconnet");
var seconds = ElemntDoc("seconds");
var minutes = ElemntDoc("minutes");
var hours = ElemntDoc("hours");
var days = ElemntDoc("days");
var year = ElemntDoc("year");
var month = ElemntDoc("month");
var milyonseconnetDiv = ElemntDoc("milyonseconnetDiv");
var secondsDiv = ElemntDoc("secondsDiv");
var minutesDiv = ElemntDoc("minutesDiv");
var hoursDiv = ElemntDoc("hoursDiv");
var daysDiv = ElemntDoc("daysDiv");
var yearDiv = ElemntDoc("yearDiv");
var monthDiv = ElemntDoc("monthDiv");
var milyonseconnetDivI = 0;
var secondsDivI = 0;
var minutesDivI = 0;
var hoursDivI = 0;
var daysDivI = 0;
var yearDivI = 0;
var monthDivI = 0;
setInterval(function() {
var time = new Date();
milyonseconnet.innerHTML = time.getMilliseconds();
seconds.innerHTML = change(time.getSeconds());
minutes.innerHTML = change(time.getMinutes());
hours.innerHTML = change(time.getHours());
days.innerHTML = change(time.getDate());
year.innerHTML = time.getFullYear();
month.innerHTML = change((time.getMonth()+1));
milyonseconnetDiv.style.transform = "rotate("+ (time.getMilliseconds()*0.36 - 90) + "deg)";
secondsDiv.style.transform = "rotate("+ (time.getSeconds()*6 - 90) + "deg)";
minutesDiv.style.transform = "rotate("+ (time.getMinutes()*6 - 90) + "deg)";
hoursDiv.style.transform = "rotate("+ (time.getHours()*15 - 90) + "deg)";
})
</script>
</html>
