百度云盘　　传送门　　密码: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. python打印带颜色的字体

    在python开发的过程中,经常会遇到需要打印各种信息.海量的信息堆砌在控制台中,就会导致信息都混在一起,降低了重要信息的可读性.这时候,如果能给重要的信息加上字体颜色,那么就会更加方便用户阅读了. ...

  2. Python 入门 之 包

    Python 入门 之 包 1.包 (1)什么是包? 文件夹下具有_ init.py _的文件夹就是一个包 (2)包的作用: 管理模块(文件化) (3)包的导入: 导入: 启动文件要和包文件是同级 绝 ...

  3. MySQL中的SQL的常见优化策略

    MySQL中的SQL的常见优化策略 MySQL中的索引优化 MySQL中的索引简介 1 避免全表扫描对查询进行优化,应尽量避免全表扫描,首先应考虑在 where 及 order by 涉及的列上建立索 ...

  4. 华为wlan配置流程及相关重要步骤AC配置

    本次介绍是AC+fitAP组网方式的重要步骤. 一.基础配置 1.规划好ac+ap的组网方式和转发方式.(本次以三层旁挂直接转发),规划管理vlan,业务vlan,与AC连接的vlan,以及他们接口的 ...

  5. 一般处理程序,ajax

    一般处理程序调用session: 在.aspx.cs页中读写Session都是Session["***"]就可以获取或者写入.但是在一般处理程序也就是ashx页面中,再这样写的话, ...

  6. Angular获取dom元素，以及父子组建之间相互传值

    1.使用原生js代码获取dom元素 在ts文件中有一个ngOnInit()的方法,这个方式是指在模块加载完毕之后并不是dom加载完毕,也就是说如果你的dom元素中使用的angular的指令,然后想在这 ...

  7. Eclipse安装Hadoop插件配置Hadoop开发环境

    一.编译Hadoop插件 首先需要编译Hadoop 插件:hadoop-eclipse-plugin-2.6.0.jar,然后才可以安装使用. 第三方的编译教程:https://github.com/ ...

  8. arcgisJs之底图切换插件

    arcgisJs之底图切换插件 底图切换插件在arcgis中有两种表现,如下: 1.两张底图切换 2.多张底图切换 一.两张地图切换 let basemapToggle = new BasemapTo ...

  9. 关于sqlmap的两个小坑

    i春秋作家:__LSA__ 0x00 概述 近日在利用sqlmap注入测试时遇到一个奇怪的现象,高版本sqlmap无法检测出注入,但是低版本的可以测出注入,并且能跑出数据不是误报,经过对比测试和查看s ...

  10. ArcEngine介绍

    一.ArcEngine简介ArcEngine被定位为一个嵌入式的产品,它并非面向最终用户,而是一个面向开发者的产品.对于繁冗的GIS开发工作而言,理想的解决方案是一个基于组件的实用的开发框架,且该框架 ...