1. 程式人生 > >JS學習筆記 Date物件及定時器操作

JS學習筆記 Date物件及定時器操作

1.Date物件基本使用

<script>
    // 1. 宣告日期物件
    var date = new Date();
    // console.log(date);

    console.log(date.getDate()); // 日
    console.log(date.getDay()); // 星期幾
    console.log(date.getMonth() + 1); // 月
    console.log(date.getFullYear() ); // 完整的年份
    console.log(date.getHours() ); // 小時
    console.log(date.getMinutes() ); // 分鐘
    console.log(date.getSeconds() ); // 秒
    console.log(date.getMilliseconds() ); // 毫秒
    console.log(date.getTime() ); // 時間戳
</script>

2.定時器操作

建立以及清除定時器:

<script>
    window.onload = function () {
        // 1.獲取需要的標籤
        var btn1 = document.getElementById("btn1");
        var btn2 = document.getElementById("btn2");

        var height = 150, timer = null;

        // 2. 開啟定時器
        btn1.onclick = function () {
             // 2.1 設定定時器
            timer = setInterval(function () {
                height += 1;
                console.log("身高是" + height + "cm");
            }, 1000);
        };

        // 3. 結束定時器
        btn2.onclick = function () {
            console.log(timer);
            clearInterval(timer);
        }
    }
</script>

但是這種寫法可能會出現問題,那就是可能會出現定時器疊加的後果,所以,我們一般都是先清除定時器,再設定定時器。

自定義時間:

<script>
    // 1. 自定義現在的時間
    var currentDate = new Date();
    console.log(currentDate);

    var nextDate = new Date('2018/08/08 08:17:35');
    console.log(nextDate);

    var preDate = new Date('2017/08/08 08:17:35');
    console.log(preDate);
</script>

一次定時器:

<script>
    window.onload = function () {
        // 1. 獲取需要的標籤
        var btn = document.getElementById("btn");
        var btn1 = document.getElementById("btn1");
        var timer = null;

        // 2. 監聽按鈕的點選
        btn.onclick = function () {

            clearTimeout(timer);

           // 一次定時器
           timer = setTimeout(function () {
               alert('請你去吃飯');
           }, 3000);
        };

        btn1.onclick = function () {
            clearTimeout(timer);
        }
    }
</script>