js实用小程序——时钟

用js可以做许多有趣的小动画，下面是一个简易时钟的小例子，可能样式写的有点多了,下方最终效果图（作为老司机的我有点小完美的强迫症哈哈哈...）

js实用小程序——时钟

<!DOCTYPE html>
<html>
<head>
<title>时钟</title>
<meta charset = "utf-8">
<style type="text/css">

// 获取元素
var hour = document.getElementById('hour');
var min = document.getElementById('min');
var sec = document.getElementById('sec');

// 定义刷新函数
function fresh(){

// 获取此刻的时间
var date = new Date();
var sec2 = date.getSeconds();
var min2 = date .getMinutes();
var hour2 = date . getHours();

// 12时制转换
hour2 = hour2 > 12 ? hour2 - 12 : hour2;

// 秒针 1s转过的角度为6度，因为起始位置在3点处，需要减去90度。
var s = sec2 * 6 - 90;
sec.style.transform = 'rotate('+ s + 'deg)';

// 分针让分针随秒针的旋转而旋转
var a = sec2 /60 * 6;
var b = min2 * 6 - 90;
var c = a + b;
min.style.transform = 'rotate('+ c + 'deg)';

// 时针让时针随分针的旋转而旋转
var d = min2 / 60 * 30;
var e = hour2 * 30 - 90;
var f = d + e;
hour.style.transform = 'rotate('+ f + 'deg)';
}
fresh();

//每隔1s刷新一次
setInterval(function () {
fresh();
},1000);

</script>
</div>
</body>
</html>