JavaScript获取当前时间并动态显示

最新推荐文章于 2024-05-17 14:01:49 发布

我的世界有个L

最新推荐文章于 2024-05-17 14:01:49 发布

阅读量1.6k

点赞数 4

分类专栏： JavaScript自学笔记

本文链接：https://blog.csdn.net/lcxlxm/article/details/52334097

版权

JavaScript自学笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

首先，定义一个时间类

var mydate = new Date();

下面是获取年月日时分秒的方法：

// 获取年份
var year = mydate.getFullYear();
// 获取月份，因为月份的表示范围是(0-11), 所以在后面加1
var month = mydate.getMonth() + 1;
// 获取日期，就是今天是几号，它的范围是(1-31)
var day = mydate.getDate();
// 获取小时数，范围是(0-23)
var hour = mydate.getHours();
// 获取分钟数，范围是(0-59)
var minutes = mydate.getMinutes();
// 获取秒数，范围是(0-59)
var seconds = mydate.getSeconds();

为了用两位数字表示分和秒，对分和秒进行一下小改

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

这样比如9时9分9秒就可以显示为9时09分09秒啦。
有时候，我们还需要现实今天是星期几对不对，可以使用getDay()方法实现；代码如下：

// 表示星期几，范围(0-6)，分别对应着星期天，星期一，……星期六
var weekday = mydate.getDay();
//可以定义一个数组存储对应的星期
var arr = new Array('星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六');

这样我们需要的时间就可以通过javascript表示出来啦。
下面定义一个变量将这些时间拼装起来

var time = '今天是' + year + '年' + month + '月' + day + '日' + hour + '时' + minutes + '分' + seconds + '秒' + '星期' + arr[weekday];

如果想要动态的显示我们的时间该怎么办呢？这时候计时器就派上用场啦
计时器函数
setInteval(函数名，间隔时间(单位毫秒));
我们把上面的时间变量都写进一个mytime()函数：

function mytime() {
    var mydate = new Date();
    var year = mydate.getFullYear();
    var month = mydate.getMonth() + 1;
    var day = mydate.getDate();
    var hour = mydate.getHours();
    var minutes = mydate.getMinutes();
    if(minutes < 10) {
        minutes = '0' + minutes;
    }
    var seconds = mydate.getSeconds();
    if (seconds < 10) {
         seconds = '0' + seconds;
    }
    var weekday = mydate.getDay();
    var arr = new Array('星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六');
    var time = '今天是' + year + '年' + month + '月' + day + '日' + hour + '时' + minutes + '分' + seconds + '秒' + '星期' + arr[weekday];
    // 这边对应一个id值为clock的文本框，我们把时间显示在该文本框内，最后会给出具体代码。
    document.getElementById('clock').value = time;
}
// 每隔一秒钟显示一次时间
setInterval(mytime, 1000);
// 或者
setInterval("mytime()", 1000);

下面给出整个页面的html代码：

<!DOCTYPE HTML>
<html>
    <head>
        <title>haha</title>
        <meta charset="utf-8">
        <script type="text/javascript">
            function mytime() {
                var mydate = new Date();
                var year = mydate.getFullYear();
                var month = mydate.getMonth() + 1;
                var day = mydate.getDate();
                var hour = mydate.getHours();
                var minutes = mydate.getMinutes();
                if(minutes < 10) {
                    minutes = '0' + minutes;
                }
                var seconds = mydate.getSeconds();
                if (seconds < 10) {
                    seconds = '0' + seconds;
                }
                var weekday = mydate.getDay();
                var arr = new Array('星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六');
                var time = '今天是' + year + '年' + month + '月' + day + '日' + hour + '时' + minutes + '分' + seconds + '秒' + '星期' + arr[weekday];
                document.getElementById('clock').value = time;
            }
            setInterval(mytime, 1000);
        </script>
    </head>
    <body>
        <form>
            <!--显示时间的文本框-->
            <input type="text" id="clock" size="50">
        </form>
    </body>
</html>

这样我们就实现了时间的动态

我的世界有个L

关注

4
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
JavaScript获取当前时间并动态显示

首先，定义一个时间类var mydate = new Date();下面是获取年月日时分秒的方法：// 获取年份var year = mydate.getFullYear();// 获取月份，因为月份的表示范围是(0-11), 所以在后面加1var month = mydate.getMonth() + 1;// 获取日期，就是今天是几号，它的范围是(1-31)var day = myda
复制链接

扫一扫

专栏目录