Javascript内置对象之Date对象与HTML BOM

JavaScript日期与时间操作

最新推荐文章于 2024-03-25 18:49:26 发布

最新推荐文章于 2024-03-25 18:49:26 发布 · 255 阅读

本文介绍如何使用JavaScript的Date对象来获取和展示日期与时间，包括年月日、星期及24小时制的时间等，并通过具体示例展示了如何利用Date对象的方法实现这些功能。

Date对象方法

getFullYear()、getMonth()、getDate()、getDay()可以从 Date 对象中分别返回四位数字表示的年份、月份 (0 ~ 11)、一个月中的某一天 (1 ~ 31)、一周中的某一天 (0 ~ ）。
getYear() 、getHours()、getMinutes()、getSeconds()返回 Date 对象的小时 (0 ~ 23)、分钟 (0 ~ 59)、秒数 (0 ~ 59)、毫秒(0 ~ 999)。这几个方法够实现显示时间的功能，代码如下：

<html >
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>获取时间</title>
    <script>
            function Time(){
                var date = new Date();
                var year = date.getFullYear();
                var month = date.getMonth()+1;
                month = month<10 ? "0"+month:month;
                var day = date.getDate();
                day = day<10 ? "0"+day:day;
                var week="日一二三四五六".charAt(date.getDay());//获得单个字符
                var hour = date.getHours();
                var hourPeriod = hour<12 ? "上午":"下午";
                hour= hour<10 ? "0"+hour:hour;
                var minute = date.getMinutes();
                minute= minute<10 ? "0"+minute:minute;
                var second = date.getSeconds();
                second = second<10 ? "0"+second:second;
                document.getElementById("current_time").innerHTML="当前时间："+year+"-
                "+month+"-"+day+" 星期"+week+" "+hourPeriod+hour+":"+minute+":"+second;
                setInterval("Time()", 1000);
            }
        </script>
    </head>
    <body onload="Time()">
        <div id="current_time">北京时间：2018-08-10 星期五 上午00:38:35</div>

</body>
</html>

HTML BOM

Window对象：Window对象表示一个浏览器窗口或一个框架。

Window 对象属性：
document：对Document 对象的只读引用。请参阅Document 对象
history：对History对象的只读引用。请参数 History 对象。
location：用于窗口或框架的Location对象。

Window对象方法

alert()显示带有一段消息和一个确认按钮的警告框。
confirm()显示带有一段消息以及确认按钮和取消按钮的对话框。如果用户点击确定按钮，则confirm() 返回 true。如果点击取消按钮，则 con
firm() 返回 false。
setInterva()按照指定的周期（以毫秒计）来调用函数或计算表达式。由setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。clearInterval()取消由 setInterval() 设置的 timeout。示例如下：

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <script>
            var i=0;
            function Index(){
                document.getElementById("current_data").innerHTML=i;
                i++;
            }
        </script>
    </head>

    <body>
        <div id="current_data">28</div>
        <script type="text">
            var id = window.setInterval("Index()", 1000);
        </script>

</body></html>

setTimeout()指定的毫秒数后调用函数或计算表达式。由 setTimeout() 返回的 ID 值可用作 clearTimeout() ，方法的参数clearTimeout()取消由 setTimeout() 方法设置的 timeout。

<html >
        <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
            <script>
                var i=0;
                function showData(){
                    document.getElementById("current_data").innerHTML=i;
                    i++;
                }
            </script>
        </head>

    <body>
        <div id="current_data">0</div>
        <script>
            setTimeout("showData()", 1000);
        </script>
    </body>
</html>