<!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

vue -电子时钟的更多相关文章

  1. JavaScript电子时钟+倒计时

    JavaScript时间类      获取时分秒:          getHours()          getMinutes();          getSeconds();       获取 ...

  2. JS实现电子时钟

          目前有个小项目,在首页头部导航栏里需要一个电子时钟的效果,于是我就采用如下代码实现了一个电子时钟的效果.不过不完美,第一种方式容易导致网页莫名其妙的异常,后来觉得可能是做的操作太多了,然后 ...

  3. 桌面小部件----LED电子时钟实现

    桌面控件是通过 Broadcast 的形式来进行控制的,因此每个桌面控件都对应于一个BroadcastReceiver.为了简化桌面控件的开发,Android 系统提供了一个 AppWidgetPro ...

  4. Qt - 与众不同的电子时钟

     Qt的电子时钟是个老掉牙的demo了,但是利用lcdNumber显示的样子非常老土(下图第一个显示效果),一看就知道是从qt帮助文档里摘出来的example,毫无新意. 美化一下系统时钟,抛开固有控 ...

  5. [TPYBoard-Micropython之会python就能做硬件 3] 制作电子时钟

    转载请注明:@小五义 http://www.cnblogs.com/xiaowuyi 欢迎加入讨论群 64770604 一.本次实验所需器材 1.TPYboard V102板  一块 2.DS3231 ...

  6. 3分钟利用TurnipBit制作电子时钟

    转载请注明:@小五义 http://www.cnblogs.com/xiaowuyi 欢迎加入讨论群 64770604 TurnipBit(www.turnipbit.com)是一个面向青少年的开发板 ...

  7. Micropython TurnipBit 电子时钟 青少年编程入门

    电子时钟是一个很常用但是制作非常简单的小玩具了,对于Micropython初学者来说,制作一个电子时钟是非常简单又容易检验自己学习成果的实验了.TurnipBit相比于其他开发板,制作电子时钟就更加简 ...

  8. MFC桌面电子时钟的设计与实现

    目录 核心技术 需求分析 程序设计 程序展示 (一)核心技术 MFC(Micosoft Foundation Class Libay,微基础类库)是微基于Windows平台下的C++类库集合,MFC包 ...

  9. 公开课 之 tony 电子时钟 (课堂笔记)

    # tony 之电子时钟from PyQt5.QtWidgets import QApplication, QWidget, QLCDNumber, QDesktopWidget, QVBoxLayo ...

随机推荐

  1. LeetCode60. 第k个排列

    解法一:用next_permutation()函数,要求第k个排列,就从"123...n"开始调用 k - 1 次 next_permutation()函数即可. class So ...

  2. python之浅谈循环

    目录 流程控制之while循环 语法 while+break while+continue while+else while循环的嵌套 流程控制之for循环 语法 for+break for+cont ...

  3. Nginx 从入门到放弃（一）

    Nginx nginx的使用场景 静态资源服务 通过本地文件系统提供服务 反向代理服务 nginx的强大性能 缓存 负载均衡 API服务 OpenResty nginx优点 高并发.高性能 可扩展性好 ...

  4. HTML5（二）音频视频画布

    HTML5 Audio(音频) 定义和用法 <audio src="someaudio.wav" controls="controls"> 您的浏览 ...

  5. 链表中倒数第k个节点（剑指offer-14）

    /* public class ListNode { int val; ListNode next = null; ListNode(int val) { this.val = val; } }*/ ...

  6. abp重构登录

    a.Core层 Authorization.Users.UserStore.cs public class UserStore : AbpUserStore<Role, User> { p ...

  7. SQLserver , MySQL的区别和各自的一些简单方法案列

    SQL Server数据库和MySQL数据库有什么区别呢?今天我们来分析一下这两种数据库的不同之处以及这两种数据库的一些简单用途:SQL Server数据库和MySQL数据库有什么区别: 对于程序开发 ...

  8. day03总结

    一. 基本数据类型# 1.整型int# 作用:记录年龄.等级.号码等状态# 定义与使用# age = 999# level = 10# qq = 383838338 # res=age * 1# pr ...

  9. 数据可视化之powerBI入门（八）PowerQuery学习:认识M函数

    https://zhuanlan.zhihu.com/p/64148928 前面我们学习PQ的时候都是用鼠标操作,虽然通过这些操作能完成大部分的数据处理,但是毕竟还有些复杂的工作是处理不了的,如果想彻 ...

  10. [apue] Linux / Windows 系统上只能建立不超过 PATH_MAX / MAX_PATH 长度的路径吗?

    问题的提出 在处理文件系统路径的时候,我们一般会先开辟一块内存区,用来接收路径.或者拼接好路径传递给系统调用.这是因为路径在各个系统上都有最大长度限制,在 Windows 上这个值是 MAX_PATH ...