vue - electronic clock

<!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 = [ " Sunday " , " Monday " , " Tuesday " , " Wednesday " , " Thursday " , " Friday " , " Saturday " ];
     var timerId = the setInterval (updateTime, 1000 ); 
    updateTime ( ); 
    function updateTime () {
         var CD =  new new a 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>

Description:

setInterval (code, millisec): in accordance with a specified period (in milliseconds) to the calling function or calculation expression

　　code: code string to call the function to be executed or

　　millisec: the time between the periodic execution code or call interval, in milliseconds

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

num argument: The system time

dight parameters: the clock is less than the median time to make up a double-digit digit, year four, day two months

js.slice () method returns the selected elements from the existing array

updateTime () function call zeroPadding () unified digital clock time format

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 Object:

getHours (): Date object h (~ 23 is 0)
getMinutes (): Date object minutes (0 ~ 59)
the getSeconds (): number of seconds Date object (0 ~ 59)
the setFullYear (): Date object in the year (four digits)
the getMonth (): returns the Date object month (~ 0. 11)
getDate (): returns a day (1 to 31) of the month from the Date object

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

vue - electronic clock

Guess you like