HTML5时钟制作教程-优快云博客

本文链接：https://blog.youkuaiyun.com/webAG/article/details/51853131

<!DOCTYPE html PUBddC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>time</title>
</head>
<style>
.container{
width:500px;
height:400px;
margin:0px auto;
}
.show_time{
width:300px;
height:300px;
position:relative;
border-radius: 100%;
transform:rotate(-90deg);
background-color:#FF0;
}
#s{
width:45%;
height:2px;
position:absolute;
left:149px;
top:149px;
background-color:#0f0;
border-radius: 0px 100% 100% 0px;
transform:rotate(0deg);
transform-origin:1px 1px;
}
#min{
width:38%;
height:4px;
position:absolute;
left:148px;
top:148px;
background-color:#00f;
border-radius: 0px 100% 100% 0px;
transform:rotate(0deg);
transform-origin:2px 2px;
}
#h{
width:25%;
height:6px;
position:absolute;
left:147px;
top:147px;
background-color:#f00;
border-radius: 0px 100% 100% 0px;
transform:rotate(0deg);
transform-origin:3px 3px;
}
.core{
width:10px;
height:10px;
position:absolute;
left:145px;
top:145px;
background:#000;
border-radius:100%;
}
.show_time dl{
position:absolute;
position:relative;
left:0px; top:0px;
width:300px;
height:300px;
border-radius:100%;
text-align:center;
}
.show_time dd{
position:absolute;
ddst-style:none;
text-align:center;
margin:137.5px 137.5px;
}
.show_time dd:nth-child(1){
font-size:25px;
transform:rotate(90deg);
transform-origin: 34px 107px;
}
.show_time dd:nth-child(2){
font-size:25px;
transform:rotate(90deg);
transform-origin: -13px 106px;
}
.show_time dd:nth-child(3){
font-size:25px;
transform:rotate(90deg);
transform-origin: -50px 80px;
}
.show_time dd:nth-child(4){
font-size:25px;
transform:rotate(90deg);
transform-origin: -80px 40px;
}
.show_time dd:nth-child(5){
font-size:25px;
transform:rotate(90deg);
transform-origin: -80px -8px;
}
.show_time dd:nth-child(6){
font-size:25px;
transform:rotate(90deg);
transform-origin: -50px -50px;
}
.show_time dd:nth-child(7){
font-size:25px;
transform:rotate(90deg);
transform-origin: -15px -75px;
}
.show_time dd:nth-child(8){
font-size:25px;
transform:rotate(90deg);
transform-origin: 35px -72px;
}
.show_time dd:nth-child(9){
font-size:25px;
transform:rotate(90deg);
transform-origin: 80px -50px;
}
.show_time dd:nth-child(10){
font-size:25px;
transform:rotate(90deg);
transform-origin: 100px -10px;
}
.show_time dd:nth-child(11){
font-size:25px;
transform:rotate(90deg);
transform-origin: 100px 37px;
}
.show_time dd:nth-child(12){
font-size:25px;
transform:rotate(90deg);
transform-origin: 80px 80px;
}
#sztime {
margin-left:120px;
margin-top:20px; font-size:20px;
}
</style>
<body>
<div class="container">
<div class="show_time">
<div id="h"></div>
<div id="min"></div>
<div id="s"></div>
<div class="core"></div>
<dl>
<dd>1</dd>
<dd>2</dd>
<dd>3</dd>
<dd>4</dd>
<dd>5</dd>
<dd>6</dd>
<dd>7</dd>
<dd>8</dd>
<dd>9</dd>
<dd>10</dd>
<dd>11</dd>
<dd>12</dd>
</dl>
</div>
<div id="sztime">h-m-s</div>
</div>
<script>
var date=new Date();
var h=date.getHours();
var m=date.getMinutes();
var s=date.getSeconds();
var h_deg=document.getElementById("h");
var m_deg=document.getElementById("min");
var s_deg=document.getElementById("s");
var sztime=document.getElementById("sztime");
setInterval(function(){
s++;
if(s>=60){
s=0;
m++;
}
if(m>=60){
m=0;
h++;
}
if(h>=24){
h=0;
}
sztime.innerHTML=h+"-"+m+"-"+s;
s_deg.style.transform="rotate("+360/60*s+"deg)";
m_deg.style.transform="rotate("+360/60*m+"deg)";
h_deg.style.transform="rotate("+360/12*h+"deg)";
},1000);
</script>
</body>
</html>

时钟dome,css3