HTML 钟表小时钟-CSDN博客

该放假了,心情不好,写个小表针感慨一下时间为什么过得如此之快,写了个小钟表.

提示 1:这个钟表的秒针转的非常快,如果需要和当前的网络时间一样,请修改</script>上一行的代码,把1换成1000

　　 2:无需素材.直接运行即可

　　 3:如有bug请直接留言

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#main{
width: 300px;
height: 300px;
background: #CCCCCC;
border-radius: 50%;
position: relative;
margin: auto;
}
.div1{
width: 40px;
height: 150px;
position: absolute;
left: 130px;
text-align: center;
transform-origin: bottom;
font-size: 18px;
}
.seconds{
width: 4px;
height: 130px;
font-size: 10px;
margin-top: 20px;
left: 148px;
background: white;
text-align: center;
transform-origin: bottom;
position: absolute;
z-index: 10;
border-radius: 40%;
}
.minutes{
width: 6px;
height: 120px;
font-size: 6px;
margin-top: 30px;
left: 147px;
background: greenyellow;
color: white;
text-align: center;
transform-origin: bottom;
position: absolute;
border-radius: 40%;
z-index: 11;

}
.span{
display: block;
}
.hour{
width: 8px;
height: 100px;
font-size: 8px;
margin-top: 50px;
left: 146px;
background: red;
color: white;
text-align: center;
transform-origin: bottom;
position: absolute;
border-radius: 40%;
}
body{
background: blanchedalmond;
}
.yuanDian{
width: 30px;
height: 30px;
border-radius: 50%;
background: gold;
position: absolute;
margin-left: 135px;
margin-top: 135px;
z-index: 12;
}

</style>
</head>
<body>
<div id="main">
<div class="yuanDian"></div>
<div class="div1"><span class="span">12</span></div>
<div class="div1"><span class="span">1</span></div>
<div class="div1"><span class="span">2</span></div>
<div class="div1"><span class="span">3</span></div>
<div class="div1"><span class="span">4</span></div>
<div class="div1"><span class="span">5</span></div>
<div class="div1"><span class="span">6</span></div>
<div class="div1"><span class="span">7</span></div>
<div class="div1"><span class="span">8</span></div>
<div class="div1"><span class="span">9</span></div>
<div class="div1"><span class="span">10</span></div>
<div class="div1"><span class="span">11</span></div>
<div class="seconds"></div>
<div class="minutes"></div>
<div class="hour"></div>
</div>

<script type="text/javascript">
var nowDate = new Date;
// alert(nowDate);
// 现在的秒数
var nowSeconds = nowDate.getSeconds() ;
// 现在的分数
var nowMinutes = nowDate.getMinutes() ;
// 现在的小时数
var nowHour = nowDate.getHours() ;
var div1 = document.getElementsByClassName('div1');
var span1 = document.getElementsByClassName('span');
//秒数
var second = document.getElementsByClassName('seconds')[0];
//分钟
var minutes = document.getElementsByClassName('minutes')[0];
//小时
var hour = document.getElementsByClassName('hour')[0];
for (var i = 0;i < div1.length; i++) {
// 分布数字
div1[i].style.transform = 'rotateZ('+ i * 30 +'deg)';
// 调整数字角度让其变正
span1[i].style.transform = 'rotateZ('+ i * -30 +'deg)';
}
//让秒数和网络上的秒数一样
second.style.transform = 'rotateZ('+ nowSeconds * 6+'deg)';
// 让分钟数和网络上的分钟数一样
minutes.style.transform = 'rotateZ('+ nowMinutes * 6+'deg)';
// 让小时数和网络上的小时数一样(分针每走1分钟,时针走0.5度)
hour.style.transform = 'rotateZ('+ (nowHour * 30 + 0.5 * nowMinutes) +'deg)';
//定时器
setInterval(function(){
//每隔1秒钟让当前的秒数+1
nowSeconds++;
//让秒针度数转到当前的数字度数
second.style.transform = 'rotateZ('+ nowSeconds * 6+'deg)';
// 如果当前的秒数余上60值是0(秒针在60秒的时候)
if (nowSeconds%60==0) {
//让分钟前进一位
nowMinutes++;
//让分钟的度数转到当前的数字度数
minutes.style.transform = 'rotateZ('+ nowMinutes * 6+'deg)';
//60秒时让时针转0.5度,并确定当前时间
hour.style.transform = 'rotateZ('+ (nowHour*30 +0.5*nowMinutes) +'deg)';

}
},1000);
</script>
</body>
</html>