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

首先,定义一个时间类

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代码:


<html>
    <head>
        <title>hahatitle>
        <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>

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

你可能感兴趣的:(JavaScript自学笔记)