<!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. JavaScript中bool类型的转化

    JavaScript 中 if() 圆括号中的表达式将被看做布尔值来处理.这时就涉及到一些转化的问题. 1.特殊值undefined和null变成false. 2.数字0和NaN变成false. 3. ...

  2. 栈的顺序存储和链式存储c语言实现

    一. 栈 栈的定义:栈是只允许在一端进行插入或删除操作的线性表. 1.栈的顺序存储 栈顶指针:S.top,初始设为-1 栈顶元素:S.data[S.top] 进栈操作:栈不满时,栈顶指针先加1,再到栈 ...

  3. day04 跳转

    一.事件跳转 1.标签绑定click事件 <view bindtap="clickme" data-nid="123" data-name="李 ...

  4. 一次运维-堡垒机多次跳转导出及导入mysql数据库

    1. 场景描述 记录一次运维,朋友公司要从线上环境同步数据到测试环境,因为公司监管问题,导致数据无法从线上获取,需要通过vpn,堡垒机,3次跳转到目标主机,通过命令导出mysql数据文件,然后再将数据 ...

  5. PHP实现邮箱验证码验证功能

    *文章来源:https://blog.egsec.cn/archives/623  (我的主站) *本文将主要说明:PHP实现邮箱验证码验证功能,通过注册或登录向用户发送身份确认验证码,并通过判断输入 ...

  6. python 中去除空格的方法

    python 中去除空格的方法: def trim(s): l=[] for i in s: if i!=' ': l.append(i) return ''.join(l) 其中可以使用下面的 '' ...

  7. 读CSAPP第一章的收获

    这个系列只写了CSAPP第三版对于我的收获. 里面的内容很多,我只写我以前不知道的,然后现在又觉得挺有用的内容. 没有很好的排版,将就看. Amadhl定律:主要观点,想要显著加速整个系统,必须提升全 ...

  8. C#中关于Task.Yeild()的探究

    在与同事讨论async/await内部实现的时候,突然想到Task.Yeild()这个函数,为什么呢,了解一点C#async/await内部机制的都知道,在await一个异步任务(函数)的时候,它会先 ...

  9. 题解：2018级算法第五次上机 C5-图2

    题目描述: 样例: 实现解释: 所有结点对最短路径的板子题 知识点: 寻找所有结点对最短路径,动态规划 坑点: 无坑,注意建边即可 使用的算法为floyd算法 按照程序顺序解释如下: 首先建图,以邻接 ...

  10. Oracle表的基本查询

    Oracle 分页 1.rownum分页 Select * from emp; Select a1.*,rownum rn from (Select * from emp) a1; 2.显示rownu ...