百度云盘　　传送门　　密码: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. Ubuntu中配置Python虚拟环境Virtualenv

    Ubuntu版本为18.04 Virtualenv介绍 在开发Python应用程序的时候,系统安装的Python3只有一个版本:3.4.所有第三方的包都会被pip安装到Python3的site-pac ...

  2. Spring 自定义注解，结合AOP，配置简单日志注解 （转）

    java在jdk1.5中引入了注解,spring框架也正好把java注解发挥得淋漓尽致. 下面会讲解Spring中自定义注解的简单流程,其中会涉及到spring框架中的AOP(面向切面编程)相关概念. ...

  3. python网络爬虫（12）去哪网酒店信息爬取

    目的意义 爬取某地的酒店价格信息,示例使用selenium在Firefox中的使用. 来源 少部分来源于书.python爬虫开发与项目实战 构造 本次使用简易的方案,模拟浏览器访问,然后输入字段,查找 ...

  4. Hadoop环境安装和集群创建

    虚拟机使用vmware,vmware可以直接百度下载安装 秘钥也能百度到 安装很简单 CentOS 7下载: 进入官网 https://www.centos.org/download/ 这里有三种 第 ...

  5. jQuery 遍历 - 后代

    向下遍历 DOM 树 下面是两个用于向下遍历 DOM 树的 jQuery 方法: children() find() jQuery children() 方法 children() 方法返回被选元素的 ...

  6. ZeroMQ 三种模式python3实现

    ZeroMQ是一个消息队列网络库,实现网络常用技术封装.在C/S中实现了三种模式,这段时间用python简单实现了一下,感觉python虽然灵活.但是数据处理不如C++自由灵活. Request-Re ...

  7. postgres中的函数

    1.编写一个只有入参,没有出参的函数: CREATE OR REPLACE FUNCTION add(a NUMERIC, b NUMERIC) RETURNS NUMERIC AS $$ SELEC ...

  8. linux添加开机启动项、登陆启动项、定时启动项、关机执行项等的方法

    使用chkconfig命令可以查看在不同启动级别下课自动启动的服务(或是程序),命令格式如下: chkconfig --list 可能输出如下: network         0:off   1:o ...

  9. 17、RAID和LVM

    一.RAID 1.什么是raid 磁盘阵列(Redundant Arrays of Independent Drives,RAID),有"独立磁盘构成的具有冗余能力的阵列"之意. ...

  10. Freeradius+Cisco2500AC+OpenLdap认证

    为了将公司内部认证统一化,启用了802.1x认证,认证流程如下: UserClient->AC控制器->Freeradius->OpenLdap 其中: Freeradius做认证使 ...