Js实现时间表

最新推荐文章于 2023-06-19 16:37:44 发布

正在学习前端的小白.....

最新推荐文章于 2023-06-19 16:37:44 发布

阅读量842

点赞数

文章标签： js javascript

本文链接：https://blog.youkuaiyun.com/qq_42357854/article/details/106791384

版权

本文详细介绍了如何利用JavaScript从头开始构建一个功能完善的时间表应用。内容涵盖数据结构设计、DOM操作、事件处理和时间格式化等关键点，帮助开发者掌握动态更新和交互式时间表的实现技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

div.hour div.minute div,second
function getTime(){
	//1.获取当前时间==>需要不断的更新考虑用到定时器
	//2.旋转读书===> 360(/小时/分钟/秒)
		//360/12===>30
		//360/60[1小时等于60分钟]=6
		//360/60[1分钟等于60秒]=6
		
		// 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;//小时是0-23 表盘只有1-12需要进行取余
			// 2.3 旋转
			second.style.transform = `rotate(${s * 6}deg)`;
			minute.style.transform = `rotate(${m * 6}deg)`;
			hour.style.transform = `rotate(${h * 30}deg)`;

		}, 10);

	
}