百度云盘　　传送门　　密码:tv1v

数字时钟效果：

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>vue.js带有星期日期的数字时钟代码</title>

<style>

html, body {

  height: 100%;

}

body {

  background:#C7C7C7;

}

p {

  margin: 0;

  padding: 0;

}

#clock {

  font-family: 'Share Tech Mono', monospace;

  color: #ffffff;

  text-align: center;

  position: absolute;

  left: 50%;

  top: 50%;

  -webkit-transform: translate(-50%, -50%);

          transform: translate(-50%, -50%);

  color: #daf6ff;

  text-shadow: 0 0 20px #0aafe6, 0 0 20px rgba(10, 175, 230, 0);

}

#clock .time {

  letter-spacing: 0.05em;

  font-size: 80px;

  padding: 5px 0;

}

#clock .date {

  letter-spacing: 0.1em;

  font-size: 24px;

}

#clock .text {

  letter-spacing: 0.1em;

  font-size: 12px;

  padding: 20px 0 0;

}

</style>

</head>

<body>

<script type="text/javascript" src="js/vue.min.js"></script>

<div id="clock">

    <h1>Gary</h1>

    <p class="date">{{ date }}</p>

    <p class="time">{{ time }}</p>

    <p class="text">数字时钟</p>

</div>

<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 = 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()];

};

function zeroPadding(num, digit) {

    var zero = '';

    for(var i = 0; i < digit; i++) {

        zero += '0';

    }

    return (zero + num).slice(-digit);

}

</script>

</body>

</html>

index.html

实现过程：

一、设置CSS样式

#clock .time {

  letter-spacing: 0.05em;

  font-size: 80px;

  padding: 5px 0;

}

letter-spacing ：增加或减少字符间的空白

font-size ：设置字体的尺寸

padding：设置内边距

一个参数

padding:10px;

所有 4 个内边距都是 10px

两个参数

padding:10px 5px;

上内边距和下内边距是 10px

右内边距和左内边距是 5px

三个参数

padding:10px 5px 15px;

上内边距是 10px

右内边距和左内边距是 5px

下内边距是 15px

四个参数

padding:10px 5px 15px 20px;

上内边距是 10px

右内边距是 5px

下内边距是 15px

左内边距是 20px

设置四个外边距的顺序是上、右、下、左，请记住顺时针即可。

padding参数属性值

#clock .date {

  letter-spacing: 0.1em;

  font-size: 24px;

}
#clock .text {

  letter-spacing: 0.1em;

  font-size: 12px;

  padding: 20px 0 0;

}

二、引入vue.js

<script type="text/javascript" src="js/vue.min.js"></script>

<div id="clock">

    <h1>Gary</h1>

    <p class="date">{{ date }}</p>

    <p class="time">{{ time }}</p>

    <p class="text">数字时钟</p>

</div>

　创建数字时钟对象

<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 = 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()];

};

function zeroPadding(num, digit) {

    var zero = '';

    for(var i = 0; i < digit; i++) {

        zero += '0';

    }

    return (zero + num).slice(-digit);

}

</script>

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)

JS框架_(Vue.js)带有星期日期的数字时钟的更多相关文章

  1. JS框架_(Laydate.js)简单实现日期日历

    百度云盘 传送门 密码:71hf JavaScript日期与时间组件_____laydate.js 日期日历效果: <!DOCTYPE html> <html> <hea ...

  2. Js 框架之Vue .JS学习记录 ① 与Vue 初识

    目录 与 Vue.js 认识 VUE.JS是个啥?有啥好处? Vue 的目标 战前准备  VUE.JS环境 VUE.JS 尝试一下,你就明白 第一步 实例化VUE 对象 第二步VueAPP 调用数据 ...

  3. JS框架_(JQuery.js)绚丽的3D星空动画

    百度云盘: 传送门 密码:8ft8 绚丽的3D星空动画效果(纯CSS) (3D星空动画可以用作网页背景,Gary为文本文字) <!doctype html> <html lang=& ...

  4. JS框架_(JQuery.js)圆形多选菜单选项

    百度云盘 传送门 密码:zb1c 圆形多选菜单选项效果: <!DOCTYPE html> <html lang="en" > <head> &l ...

  5. JS框架_(coolShow.js)图片旋转动画特效

    百度云盘 传送门 密码:ble6 coolShow.js插件图片旋转动画效果 <!DOCTYPE HTML> <head> <meta http-equiv=" ...

  6. JS框架_(JQuery.js)Tooltip弹出式按钮插件

    百度云盘 传送门 密码:7eh5 弹出式按钮效果 <!DOCTYPE html> <html > <head> <meta charset="UTF ...

  7. JS框架_(Popup.js)3D对话框窗口插件

    百度云盘 传送门 密码:afdo 3D对话框窗口插件效果: <!doctype html> <html lang="zh"> <head> &l ...

  8. JS框架_(JQuery.js)动画效果鼠标跟随

    百度云盘 传送门 密码 :4n9u 火狐浏览器上纯CSS_动画效果鼠标跟随效果: (作者:lily_lcj 传送门) <!DOCTYPE html PUBLIC "-//W3C//DT ...

  9. JS框架_(Typed.js)彩色霓虹灯发光文字动画

    百度云盘 传送门 密码:8oei 发光文字动画效果: <!doctype html> <html> <head> <meta charset="ut ...

随机推荐

  1. Codeforces 1178D. Prime Graph

    传送门 首先每个点至少要有两条边连接 那么容易想到先保证这一点然后再慢慢加边 那么先构成一个环即可:$(1,2),(2,3),(3,4)...(n,1)$ 然后考虑加边,发现一个点加一条边还是合法的, ...

  2. String和StringBuffer的常见用法

    链接:https://www.nowcoder.com/questionTerminal/fe6b651b66ae47d7acce78ffdd9a96c7?answerType=1&f=dis ...

  3. vue中监听数据变化 watch

    今天做项目的时候,子组件中数据(原本固定的数据)需要父组件动态传入,如果一开始初始化用到的数据.但当时还没有获取到,初始化结束就不会更新数据了.只有监听这两个属性,再重新执行初始化. 1.watch是 ...

  4. python异步IO编程(二)

    python异步IO编程(二) 目录 开门见山 Async IO设计模式 事件循环 asyncio 中的其他顶层函数 开门见山 下面我们用两个简单的例子来让你对异步IO有所了解 import asyn ...

  5. 利用druid sql parser搞一些事情

    在最近的项目开发中,有这样一个需求,就是给定一个查询的sql,在where语句中添加几个条件语句.刚开始想的是,是否能用正则去做这个事情呢?其实不用语法树还是有一点困难的. 经过一系列google,看 ...

  6. Linux学习篇之OpenKM的安装（汉化）

    OpenKM是一个开放源代码的电子文档管理系统,它的特点是可用于大型公司或是中小企业, 适应性比较强. 并且在知识管理方面的加工,提供了更加灵活和成本较低的替代应用,下面讲一下搭建方法. 一.以下都是 ...

  7. 网络初级篇之网络设备的FTP（原理与实验）

    一.什么是FTP    FTP就是文件传输协议.用于互联网双向传输.二.FTP的作用    控制文件下载空间在服务器复制文件从本地计算机或本地上传文件复制到服务器上的空间,主要的作用就是文件的传输,保 ...

  8. deep_learning_Function_tf.add()、tf.subtract()、tf.multiply()、tf.div()

    tf.add().tf.subtract().tf.multiply().tf.div()函数介绍和示例 1. tf.add() 释义:加法操作 示例: x = tf.constant(2, dtyp ...

  9. asyncio动态添加任务

    asyncio.run_forever()下动态添加任务 方法一.asyncio.run_coroutine_threadsafe(coroutine, loop) 方法二.asyncio.call_ ...

  10. c++的并发操作（多线程）

    C++11标准在标准库中为多线程提供了组件,这意味着使用C++编写与平台无关的多线程程序成为可能,而C++程序的可移植性也得到了有力的保证.另外,并发编程可提高应用的性能,这对对性能锱铢必较的C++程 ...