微客导航 » 文章资讯 » 使用JS实现动态时钟

使用JS实现动态时钟

2023-07-28 19:20:14 184

本文实例为大家分享了JS实现动态时钟的具体代码，供大家参考，具体内容如下

利用setTime()实现动态的时钟效果

代码如下




正在运行的时钟

/*设置样式：无边框的文本框*/
input,
#clock{
width:390;
font-size:30px;
font-weight:900;
color:#FFFFFF;
background-color:#930;
border:8pxdouble#900;

}










functiondisptime(){
vartime=newDate();//获得当前时间
varyear=time.getFullYear();//获得年月日
varmonth=time.getMonth();//获得年月日
vardate=time.getDate();//获得年月日
varhour=time.getHours();//获得小时、分钟、秒
varminute=time.getMinutes();
varsecond=time.getSeconds();
if(minute<10)//如果分钟只有1位，补0显示
minute="0"+minute;
if(second<10)//如果秒数只有1位，补0显示
second="0"+second;
/*设置文本框的内容为当前时间*/
document.getElementById('clock').innerHTML=year+"年"+month+"月"+date+"日"+hour+":"+minute+":"+
second
document.myform.myclock.value=year+"年"+month+"月"+date+"日"+hour+":"+minute+":"+second
/*设置定时器每隔1秒（1000毫秒），调用函数disptime()执行，刷新时钟显示*/
varmyTime=setTimeout("disptime()",1000);

}

效果如图

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

使用JS实现动态时钟

热门推荐

随机推荐