javascrip练习——显示当前时间

最新推荐文章于 2024-03-27 16:07:26 发布

原创最新推荐文章于 2024-03-27 16:07:26 发布 · 337 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Date-对象 #JavaScript #时间

javascript 同时被 2 个专栏收录

51 篇文章

订阅专栏

杂记

23 篇文章

订阅专栏

本文介绍如何使用JavaScript的Date对象获取当前日期与时间，并通过HTML和CSS实现动态更新的时间显示效果。

效果：https://skyfood.github.io/clock/demo1.html

用到的知识点：

1、Date() 对象

getFullYear() 从 Date 对象以四位数字返回年份。
getMonth() 从 Date 对象返回月份 (0 ~ 11)。
getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)。
getHours() 返回 Date 对象的小时 (0 ~ 23)。
getMinutes() 返回 Date 对象的分钟 (0 ~ 59)。
getSeconds() 返回 Date 对象的秒数 (0 ~ 59)。

2、setTimeout() 定时器

html代码：

<div class="ht_date">
    <span id="date">2017年08月01日</span>
    <span id="week">星期二</span>
    <span id="time">15:00</span>
</div>

css代码：

* { padding: 0; margin: 0; }
html { width: 100%; height: 100%; background: #242424; font-family: 'Arial'; }
body { width: 100%; height: 100%; display: -webkit-flex; display: flex; }
.ht_date { width: 500px; height: 100px; margin: auto; text-align: center; }
.ht_date:after { content: ''; width: 0; height: 100%; display: inline-block; vertical-align: middle; }
.ht_date span { font-size: 30px; color: #fff; display: inline-block; vertical-align: middle; }

JavaScript代码：

window.onload = function () {
    startTime();
}

function startTime() {
    var today = new Date()

    var y  = today.getFullYear();
    var mo = today.getMonth() + 1;
    var d  = today.getDate();
    var h  = today.getHours();
    var mi = today.getMinutes();
    var s  = today.getSeconds();

    var weekday = new Array(7)
    weekday[0] = "星期日"
    weekday[1] = "星期一"
    weekday[2] = "星期二"
    weekday[3] = "星期三"
    weekday[4] = "星期四"
    weekday[5] = "星期五"
    weekday[6] = "星期六"

    mi = checkTime(mi);
    s = checkTime(s);
    document.getElementById('date').innerHTML = y + "年" + mo + "月" + d + "日";
    document.getElementById('week').innerHTML = weekday[today.getDay()];
    document.getElementById('time').innerHTML = h + ":" + mi + ":" + s;
    setTimeout('startTime()', 500)
}

function checkTime(i) {
    if (i < 10) {
        i = "0" + i
    }
    return i
}

（完）