黑马程序员技术交流社区

标题: 【上海校区】JavaScript实现页面动态时钟模型 [打印本页]

---

作者: 不二晨    时间: 2019-3-29 16:44
标题: 【上海校区】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();

---------------------
【转载，仅作分享，侵删】
作者：Ryan Ji
原文：https://blog.csdn.net/qq_42451979/article/details/80860953
版权声明：本文为博主原创文章，转载请附上博文链接！

---

作者: 不二晨    时间: 2019-4-10 14:31
奈斯，感谢分享！

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2