用JavaScript制作钟表
来源：互联网 发布：淘宝买家采集器破解版 编辑：程序博客网 时间：2024/05/17 02:36
最终的效果图如下：
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>表</title> <style type="text/css"> * { margin: 0; padding: 0; } #clock { background: url(clock.jpg) no-repeat; margin: 0 auto; position: relative; } div { width: 600px; height: 600px; } #h, #m, #s { position: absolute; left: 0; top: 0; } #h { background: url(hour.png) no-repeat center center; } #m { background: url(minute.png) no-repeat center center; } #s { background: url(second.png) no-repeat center center; } </style> <script type="text/javascript"> window.onload=function(){ function go(){ var oh=document.getElementById("h"); //获取时针 var om=document.getElementById("m"); //获取分针 var os=document.getElementById("s"); //获取秒针var time=new Date();var s=time.getSeconds()+time.getMilliseconds()/1000;
os.style.transform="rotate("+s*6+"deg)"; //秒针一次转动的度数
var m=time.getMinutes();
om.style.transform="rotate("+m*6+"deg)"; //分针一次转动的度数
var h=time.getHours();
oh.style.transform="rotate("+h*30+"deg)"; //时针一次转动的度数
}
go() setInterval(go,20)
}
</script>
</head>
<body>
<div id="clock">
<div id="h">
</div>
<div id="m">
</div>
<div id="s">
</div>
</div>
</body>
</html>
阅读全文
1 0
- 用JavaScript制作钟表
- 用javaScript实现钟表功能
- canvas制作钟表
- 轻松学习JavaScript十：JavaScript的Date对象制作一个简易钟表
- 轻松学习JavaScript十：JavaScript的Date对象制作一个简易钟表
- JavaScript实现钟表
- JavaScript 简单的钟表
- js拖拽框制作的时尚小钟表
- 使用计时事件制作的钟表
- 制作一个数字钟表及时间选择器
- 自定义控件学习之钟表制作
- UIView动画——钟表的制作
- JS之网页上制作钟表
- 通过原生JS和CSS制作钟表
- 用js实现钟表
- 钟表
- JavaScript在页面上显示时间钟表
- 用JavaScript制作站内搜索
- CoreBluetooth连接蓝牙健康设备
- 中国最好的jdbc连接池-------Druid开源连接池的使用
- 虚拟机里的vmnet1 和vmnet8
- 机器人路径规划
- Opencv学习之寻找和绘制物体的凸包
- 用JavaScript制作钟表
- Java面试题集（第三部分）（51-70）
- 汉诺塔通项公式证明
- “五险一金”里的秘密
- C#182课的主要内容
- 如何查询Oracle数据库的操作日志
- python文本相似度计算
- Android启动详解-----init
- Java面试题集（第四部分）（86-115）
