前几天看到动画效果，于是今天想写个时钟效果分享。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>日期时钟特效</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
#date {
width: 450px;
height: 300px;
border-radius: 10px;
margin: 100px auto;
position: relative;
}
#nowDate {
width: 450px;
height: 60px;
line-height: 60px;
text-align: center;
color: brown;
font-size: 26px;
}
#clock {
width: 250px;
height: 250px;
background: url('images/clock.jpg') no-repeat;
background-size: cover;
position: relative;
margin: 2px auto;
}
#hour,
#minute,
#second {
position: absolute;
width: 10px;
height: 250px;
left: 50%;
top: 0;
margin-left: -4px;
}
#hour {
background: url('images/hour.png') no-repeat center center;
background-size: 12px;
}
#minute {
background: url('images/minute.png') no-repeat center center;
background-size: 10.5px;
}
#second {
background: url('images/second.png') no-repeat center center;
background-size: 11px;
}
</style>
</head>
<body>
<div id="date">
<p id="nowDate"></p>
<div id="clock">
<div id="hour"></div>
<div id="minute"></div>
<div id="second"></div>
</div>
</div>
<script type="text/javascript">
// 1.获取标签
var nowDate = document.getElementById('nowDate');
var day = document.getElementById('day');
// 用定时器 更新时间的变化
setInterval(nowNumTime, 10);
function nowNumTime() {
var now = new Date();
var hour = now.getHours(); //0 ~ 23. //19
var minute = now.getMinutes();
var second = now.getSeconds();
var year = now.getFullYear();
var month = now.getMonth() + 1;
var d = now.getDate();
var week = now.getDay();
//console.log(week); //索引
var weeks = ['星期天', '星期一', '星期二', '星期叁', '星期肆', '星期伍', '星期六'];
// 18 > 12 ? 18-12 : 8
var temp = '' + (hour > 12 ? hour - 12 : hour);
if (hour === 0) {
temp = '12';
}
temp = temp + (minute < 10 ? ':0' : ":") + minute;
temp = temp + (second < 10 ? ':0' : ":") + second;
temp = temp + (hour >= 12 ? ' P.M.' : " A.M.");
temp = `${year}年${month}月${d}日 ${temp} ${weeks[week]}`;
nowDate.innerHTML = temp;
}
// 1.获取标签
var hour = document.getElementById('hour');
var minute = document.getElementById('minute');
var second = document.getElementById('second');
// 2.开启定时器 获取当前时间
setInterval(function() {
// 2.1 获取当前的时间戳
var now = new Date();
// 2.2 获取小时 分钟 秒
var s = now.getSeconds();
var m = now.getMinutes() + s / 60;
var h = now.getHours() % 12 + m / 60;
// 2.3 旋转
second.style.transform = `rotate(${s * 6}deg)`;
minute.style.transform = `rotate(${m * 6}deg)`;
hour.style.transform = `rotate(${h * 30}deg)`;
}, 10);
</script>
</body>
</html>
js基于css3制作的圆形虚线时钟特效，一款简单的网页时钟，实时动态获取本地时间，同时还显示数字时钟、日期和星期。
