DOM操作小練習-觸發事件獲取系統時間的程式碼原理

Sangko's Bolg發表於2020-11-13
事件

注： innerText/innerHTML（改變元素裡面的內容）
是一個屬性（名詞），故採用 = 賦值的方式使用
使用方法 box1.innerHTML = ‘2020’; 改變box1中的內容為2020（box1的內容為2020）

innerHTML屬性與innerText屬性最大的區別 innerHTML可以識別HTML標籤
我們使用innerHTML更多

在這裡插入圖片描述

點選按鈕顯示當前系統時間？
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .boxTT, .boxTT2 {
            width: 200px;
            height: 100px;
            background-color: darkviolet;
            font-size: auto;
            color: #fff;
        }
        .boxTT2 {
            background-color:green;
        }
    </style>
</head>

<body>
    <button class="buttonTT">點選顯示當前系統時間</button>
    <div class="boxTT">點選按鈕，時間顯示在這</div>

    <div class="boxTT2">重新整理頁面，自動更新當前時間</div>

    <script>
        // 1.獲取事件源
        //利用選擇器獲取元素物件方式，把事件源選出來
        var btn = document.querySelector('.buttonTT');
        var TT = document.querySelector('.boxTT');
        //2.註冊事件+新增事件處理程式
        btn.onclick = function () {
            TT.innerHTML = getDate();
        }
        
        // 思考：頁面重新整理自動顯示當前系統時間的寫法？
        var TT2 = document.querySelector('.boxTT2');
        TT2.innerHTML =  getDate();

        // 封裝 ‘得到當前日期’  函式getDate
        function getDate() {
            var date = new Date();
            //使用date變數，注意月份+1哦
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var dates = date.getDate();
            var day = date.getDay();
            var h = date.getHours();
            var m = date.getMinutes();
            var s = date.getSeconds();

            // 用三元表示式進行格式優化 個位數前面填 0 顯示
            // h是否小於10： h < 10 ?
            // 是則返回 '0' + m
            //否則 ：
            // 返回h
            // 注意返回的值是返回給整個三元表示式，我們只需要找要求的變數存起來即可或更新原變數
            h = h < 10 ? '0' + h : h;
            m = m < 10 ? '0' + m : m;
            s = s < 10 ? '0' + s : s;

            // 由於date.getDay()返回的是數字，我們變通以下
            //利用返回的數字作為索引號，索引出星期陣列，這樣就可以實現中文星期幾
            var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];

            // 返回res給 getDate();
            var res = '今天是' + year + '年' + month + '月' + dates + '日' + arr[day]
                + h + '時' + m + '分' + s + '秒';
            return res;
        }
    </script>
</body>
</html>

相關文章