vue -電子時鍾

本文轉載自查看原文 2019-08-15 14:37 468 前端插件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/vue.js"></script>
</head>
<body>

<div id="clock">
    <h1>Gary</h1>
    <p class="date">{{ date }}</p>
    <p class="time">{{ time }}</p>
    <p class="text">數字時鍾</p>
</div>

</body>
<script>
    var clock = new Vue({
        el: '#clock',
        data: {
            time: '',
            date: ''
        }
    });

    var week = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
    var timerID = setInterval(updateTime, 1000);
    updateTime();
    function updateTime() {
        var cd = new Date();
        clock.time = week[cd.getDay()];
        clock.date = zeroPadding(cd.getFullYear(), 4) + '-' + zeroPadding(cd.getMonth()+1, 2) + '-' + zeroPadding(cd.getDate(), 2) + ' '+zeroPadding(cd.getHours(), 2) + ':' + zeroPadding(cd.getMinutes(), 2) + ':' + zeroPadding(cd.getSeconds(), 2);
    };

    function zeroPadding(num, digit) {
        var zero = '';
        for(var i = 0; i < digit; i++) {
            zero += '0';
        }
        return (zero + num).slice(-digit);
    }

</script>
</html>

說明：

setInterval(code,millisec) :可按照指定的周期（以毫秒計）來調用函數或計算表達式

　　code：要調用的函數或要執行的代碼串

　　millisec :周期性執行或調用 code 之間的時間間隔，以毫秒計

function zeroPadding(num, digit) {
    var zero = '';
    for(var i = 0; i < digit; i++) {
        zero += '0';
    }
    return (zero + num).slice(-digit);
}

num參數：返回系統時間

dight參數：當時鍾小於兩位數digit位數時候補，年份四位，月日為兩位

js.slice() 方法可從已有的數組中返回選定的元素

updateTime()函數中調用zeroPadding()統一數字時鍾時間格式

function updateTime() {
    var cd = new Date();
    clock.time = zeroPadding(cd.getHours(), 2) + ':' + zeroPadding(cd.getMinutes(), 2) + ':' + zeroPadding(cd.getSeconds(), 2);
    clock.date = zeroPadding(cd.getFullYear(), 4) + '-' + zeroPadding(cd.getMonth()+1, 2) + '-' + zeroPadding(cd.getDate(), 2) + ' ' + week[cd.getDay()];
};

JavaScript Date 對象：

getHours() ：返回 Date 對象的小時 (0 ~ 23)
getMinutes() ：返回 Date 對象的分鍾 (0 ~ 59)
getSeconds() ：返回 Date 對象的秒數 (0 ~ 59)
setFullYear() ：設置 Date 對象中的年份（四位數字）
getMonth() ：從Date 對象返回月份 (0 ~ 11)
getDate() ：從Date 對象返回一個月中的某一天 (1 ~ 31)

轉載=https://www.cnblogs.com/1138720556Gary/p/9381643.html

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 QT--電子時鍾 JS實現電子時鍾 vfd電子時鍾制作 MFC桌面電子時鍾的設計與實現 PyQt5用QTimer編寫電子時鍾單片機電子時鍾設計研究 [JS] 使用JavaScript實現最簡單的電子時鍾 js傻瓜式制作電子時鍾 [TPYBoard - Micropython之會python就能做硬件 3] 制作電子時鍾 3分鍾利用TurnipBit制作電子時鍾