JavaScript实现页面动态时钟模型

写在前面:实现动态时钟效果可以使用setTimeout()或setInterval()函数。

setTimeout(showTime,1000);//在指定的时间(1秒)后,执行showTime

setInterval(showTime,1000);//在指定的时间(1秒)后,调用showTime函数

主要代码:

//显示时间   定义一个函数(功能)
function showTime(){
	var date=new Date();
	//  2018/6/29 16:23:00
	//获取年月日
	var year=date.getFullYear();
	var month=date.getMonth()+1;
	var day=date.getDate();

	//获取时分秒
	var hour=date.getHours();
	var minute=date.getMinutes();
	var second=date.getSeconds();

	//时间小于10时,补零
	if(hour<10){
		hour='0'+hour;
	}

	if(minute<10){
		minute='0'+minute;
	}

	if(second<10){
		second='0'+second;
	}

	var time=year+'/'+month+'/'+day+" "+hour+":"+minute+':'+second;

	var o=document.getElementById('box');//在页面中根据ID查找标签对象
	// console.log(o);
	o.innerHTML=time;//innerHTML 指HTML开始标记和结束标记之间的内容

	setTimeout(showTime,1000);//一秒钟之后执行showTime
}
/*//函数需要调用才会执行
showTime();
setInterval(showTime,1000);//在指定的时间(1秒)后,调用showTime函数*/
showTime();
  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是JavaScript实现动态时钟的代码: HTML: ```html <!DOCTYPE html> <html> <head> <title>动态时钟</title> <style> body { background-color: #f1f1f1; } .clock { margin: 50px auto; width: 200px; height: 200px; border-radius: 50%; background-color: white; box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1); position: relative; } .hour-hand { position: absolute; top: 50%; left: 50%; width: 6px; height: 50px; background-color: black; transform-origin: bottom center; transform: translateX(-50%) rotate(0deg); animation: hourAnim 43200s linear infinite; } .minute-hand { position: absolute; top: 50%; left: 50%; width: 4px; height: 80px; background-color: black; transform-origin: bottom center; transform: translateX(-50%) rotate(0deg); animation: minuteAnim 3600s linear infinite; } .second-hand { position: absolute; top: 50%; left: 50%; width: 2px; height: 100px; background-color: red; transform-origin: bottom center; transform: translateX(-50%) rotate(0deg); animation: secondAnim 60s linear infinite; } @keyframes hourAnim { from { transform: translateX(-50%) rotate(0deg); } to { transform: translateX(-50%) rotate(360deg); } } @keyframes minuteAnim { from { transform: translateX(-50%) rotate(0deg); } to { transform: translateX(-50%) rotate(360deg); } } @keyframes secondAnim { from { transform: translateX(-50%) rotate(0deg); } to { transform: translateX(-50%) rotate(360deg); } } .clock-center { position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; background-color: black; border-radius: 50%; transform: translate(-50%, -50%); } </style> </head> <body> <div class="clock"> <div class="hour-hand"></div> <div class="minute-hand"></div> <div class="second-hand"></div> <div class="clock-center"></div> </div> <script src="clock.js"></script> </body> </html> ``` JavaScript: ```javascript function updateClock() { const now = new Date(); const hour = now.getHours(); const minute = now.getMinutes(); const second = now.getSeconds(); const hourDegree = (hour % 12) * 30 + (minute / 60) * 30; const minuteDegree = minute * 6; const secondDegree = second * 6; document.querySelector(".hour-hand").style.transform = `translateX(-50%) rotate(${hourDegree}deg)`; document.querySelector(".minute-hand").style.transform = `translateX(-50%) rotate(${minuteDegree}deg)`; document.querySelector(".second-hand").style.transform = `translateX(-50%) rotate(${secondDegree}deg)`; } setInterval(updateClock, 1000); ``` 这个代码通过 `setInterval` 方法每秒更新一次时钟, `updateClock` 函数获取当前时间并计算出每个指针应该旋转的角度,然后通过设置 `transform` 属性来旋转指针。其中,时针每小时旋转30度,分针每分钟旋转6度,秒针每秒钟旋转6度。 在HTML文件中,我们定义了一个时钟的容器 `.clock`,并在其中添加了时针、分针、秒针和中心点。每个指针都有自己的类名和CSS样式,也有自己的动画效果。其中,时针的动画总时长为43200秒(12小时),分针的动画总时长为3600秒(1小时),秒针的动画总时长为60秒(1分钟)。这样可以让指针在一定的时间内完成一圈的旋转。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值