|
用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>
|
客服电话
APP下载
官方微信
请发表评论