时钟效果(计时器)

这篇博客介绍了如何使用JavaScript的Date对象获取当前时间,并通过计时器实现时钟显示,包括年、月、日、星期、小时、分钟和秒。内容涉及到时间格式化和DOM操作,最终展示了一个实时更新的时钟效果。

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

JavaScript的时间对象:

var myTime = new Date();  //当前时间(计算机读取到此代码时系统的时间对象)

该对象上获取的详细时间都是number类型:

    myTime.getFullYear(); //获取年

    myTime.getMonth(); //获取(从0开始要+1)

    myTime.getDate(); //获取日

    myTime.getDay(); //获取星期(0-6的数字,代表星期日到星期六)

    myTime.getHours(); //获取时

    myTime.getMinutes(); //获取分

    myTime.getSeconds(); //获取秒

把当前时间做一个拼接: iYear +'年/'+iMonth+'月/'+iDate+'日 '+iWeek+' '+iHours+':'+iMin+':'+iSec;

通常时间格式中时分秒应该是两位数,因此需要把所有的时分秒个位数前面补'0',如果当前的数字小于10则变成'0'+当前值,并统一成字符串

  • 利用计时器做出时钟时间:

DOM中文档结构如下:

<p></p>

JS中的样式如下:

var oP = document.getElementsByTagName("p")[0];
oP.innerHTML = getnowTime();
setInterval(function(){
oP.innerHTML = getnowTime();
},1000)//每隔一秒时间刷新一次

调用封装好的函数:

//每秒钟重新获取当前时间
function getnowTime(){
var myTime = new Date();
return adz(myTime.getHours())+":"+adz(myTime.getMinutes())+":"+adz(myTime.getSeconds());	
}
//判断数字是否大于0,小于时前加0
function adz(num){
return num>10 ? num:"0"+num;
}

效果图如下:


隔几秒之后:



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值