<!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. c# 线程的优先级

    前言 有时候我们希望某个线程更加重要,希望让其先运行的话.c#为我们提供了线程修改优先级.但是这样的效果有多大呢? 正文 直接放代码: static void Main(string[] args) ...

  2. Python3笔记014 - 3.5 跳转语句

    第3章 流程控制语句 3.5 跳转语句 1.break 语句 while 条件表达式1: 语句块1 if 条件表达式2: break for 迭代变量 in 对象: 语句块1 if 条件表达式: br ...

  3. JVM源码分析之Java对象头实现

    原创申明:本文由公众号[猿灯塔]原创,转载请说明出处标注 “365篇原创计划”第十一篇. 今天呢!灯塔君跟大家讲: JVM源码分析之Java对象头实现 HotSpot虚拟机中,对象在内存中的布局分为三 ...

  4. 每日一题 - 剑指 Offer 36. 二叉搜索树与双向链表

    题目信息 时间: 2019-06-29 题目链接:Leetcode tag: 二叉搜索树 中序遍历 递归 深度优先搜索 难易程度:中等 题目描述: 输入一棵二叉搜索树,将该二叉搜索树转换成一个排序的循 ...

  5. 关于Dfs(1);

    问: 我们大部分在根不定的情况下喜欢Dfs(1):到底要不要这样呢? 解释: 首先Dfs(1):是没有任何问题的,毕竟根不定,随便选一个肯定有1,这是没问题的,但是,很多数据也是这么造的,比如在1处卡 ...

  6. Django---进阶13

    目录 数据库表创建及同步 注册功能 登陆功能 bbs是一个前后端不分离的全栈项目,前端和后端都需要我们自己一步步的完成 表创建及同步 注册功能 forms组件 用户头像前端实时展示 ajax 登陆功能 ...

  7. When Lambo with Howdoo

    原文链接:https://howdoo.io/when-lambo/ 为了庆祝即将推出的革命性新社交媒体平台Howdoo以及我们令人惊喜的合作伙伴关系和社区,我们正在发起一项竞赛,以最终回答“When ...

  8. LDAP注入介绍

    LDAP注入介绍 一. 前言 前些日子在看 OWASP TOP 10 时看到了对LDAP注入攻击的介绍,对此产生了兴趣,在网上经过一番搜索之后找到了构成本文主要来源的资料,整理出来分享给大家. 二. ...

  9. 重学c#系列——c#运行原理(二)

    前言 c# 是怎么运行的呢?是否和java一样运行在像jvm的虚拟机上呢?其实差不多,但是更广泛. c# 运行环境不仅c#可以运行,符合.net framework 开发规范的都可以运行. c# 程序 ...

  10. ShaderLab-12chapter屏幕后处理、图片置灰效果

    屏幕后处理的原理 使用特定的材质去渲染对应相机近裁剪平面的4边形面片(刚好填充屏幕) 亮度-Luminance公式 --扩展置灰实现 luminance = 0.2125 * Red + 0.7154 ...