JavaScrip-T5(2022年11月21日移动2112班)

2022-11-28 18:56:27 浏览数 (1)

1、Object 对象和 Date 对象

JavaScript 提供了一些非常有用的内部对象,按使用方式可分为两种

实例对象。在引用该对象的属性和方法时,必须先使用 new 关键字创建一个对象实例,然后再使用“对象实例名 . 成员”的格式来进行访问 静态对象。在引用该对象的属性和方法时不需要使用 new 关键字来创建对象实例,可以直接使用“类名 . 成员”的格式来进行访问。

Object对象

Object 对象提供了一种创建自定义对象的简单方式,因为它不需要开发人员定义构造函数 在程序运行时可以为JavaScript 对象添加属性,因此使用 Object 对象创建出自定义对象非常简便。

示例:

代码语言:javascript复制
<script type="text/javascript">
    var person = new Object();
    person.name = "Tom";
    person.age = 25;
    function getAttr(attr) {
        document.getElementById("show1").innerHTML  = person[attr]   "&nbsp;";
        document.getElementById("show2").innerHTML = person[attr]   "&nbsp;";
    }
</script>
<p><input type="button" value=" 显示姓名 " onClick="getAttr('name')" /> </p>
<p><input type="button" value=" 显示年龄 " onClick="getAttr('age')" /></p>
<hr/>
<div id="show1">
    默认显示的位置:
</div>
<hr/>
<div id="show2">
    默认显示的位置:
</div>

        /**          * 1、对象的声明赋值使用的是{}花括号,大括号          * 2、对象中的值以key:value的格式进行赋值,多个值中间使用【,】区分          * 3、获取对象中的值的方法需要通过[]并给与key名的方式获取:item["name"]          * / 

代码效果:

Date对象

通过创建 Date 对象,可以获取本地计算机中的日期与时间。

主要需要记忆的是各种Date的获取函数,是函数,所以使用的时候需要添加()。

其中:dateObject 所指的月份中的某一天,使用本地时间。返回值是 1 ~ 31 之间的一个整数。

这里看好,getDate() 是获取当前的日期,每个月的,例如,如果是2月份就只有28或29天了。根据闰年自动出的。

代码语言:javascript复制
new Date() // 当前日期和时间
new Date(milliseconds) // 返回从 1970 年 1 月 1 日至今的毫秒数
new Date(dateString)
new Date(year, month, day, hours, minutes, seconds, milliseconds)

获取与格式化Date案例:

代码语言:javascript复制
<script type="text/javascript">
    var now = new Date();
    document.write(now   "<br/>");
    var date1 = new Date("October 13, 1975 11:13:00")
    document.write(date1   "<br/>");
    var date2 = new Date(79, 5, 24)
    document.write(date2   "<br/>");
    var date3 = new Date(79, 5, 24, 11, 33, 0)
    document.write(date3   "<br/>");
    var date4 = new Date(60 * 60 * 1000);
    document.write(date4);
</script>

显示效果:

时间获取示例: 

代码语言:javascript复制
<script type="text/javascript">
    function showTime() {
        var now = new Date();
        var year = now.getFullYear(); // 获取年份
        var month = now.getMonth()   1; // 获取月份
        var day = now.getDate(); // 获取日
        var hour = now.getHours(); // 获取小时
        var minutes = now.getMinutes(); // 获取分钟
        var seconds = now.getSeconds(); // 获取秒
        var week = now.getDay(); // 星期
        document.getElementById("myclock").innerHTML = year   " 年 "   checkTime(month)   " 月 "   checkTime(day)   " 日 星期"   (week == 0 ? 7 : (week   1))   " "   checkTime(hour)   ":"   checkTime(minutes)   ":"   checkTime(seconds);
    }
    function checkTime(i) {
        if (i < 10) {
            i = "0"   i; // 在小于 10 的数字前加一个 0
        }
        return i;
    }
    // 每隔 500 毫秒取一次当前的时间
    window.setInterval("showTime()", 500);
    window.onload = showTime;
</script>

效果:

  1. milliseconds 参数是一个 Unix 时间戳(Unix Time Stamp),它是一个整数值,表示自 1970 年 1 月 1 日 00:00:00 UTC(the Unix epoch)以来的毫秒数。
  2. dateString 参数表示日期的字符串值。
  3. year, month, day, hours, minutes, seconds, milliseconds 分别表示年、月、日、时、分、秒、毫秒。 

人工日历(简化)

代码语言:javascript复制
<div>
    <script>
        var select_year = "<select onchange='updateDate()' id='year'>";
        for (let i = 1970; i <= 2050; i  ) {
            select_year  = "<option value='"   i   "'>"   i   "年</option>";
        }
        select_year  = "</select>";
        document.write(select_year);
        var select_month = "<select onchange='updateDate()' id='month'>";
        for (let i = 1; i <= 12; i  ) {
            select_month  = "<option value='"   i   "'>"   i   "月</option>";
        }
        select_month  = "</select>";
        document.write(select_month);
        document.write("<hr/>");
        function updateDate() {
            var year = document.getElementById("year").value;
            var month = document.getElementById("month").value;
            month = ("0"   month).slice(-2);
            var str_time = year   "-"   month   "-01";
            console.log(str_time);
            document.getElementById("updateTime").value = str_time;
        }
    </script>
    <input type="date" id="updateTime" />
</div>

0 人点赞