百度云盘　　传送门　　密码: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. Java Web开发技术教程入门-自定义标签

    回顾: 昨天了解了JSP开发的两种模式Model1和Model2模式.Model1采用JSP+JavaBean技术开发Web应用,它比较适合小规模应用的开发,效率较高,易于实现.但由于在Model1中 ...

  2. 51nod 1251 Fox序列的数量 (容斥)

    枚举最多数字的出现次数$k$, 考虑其他数字的分配情况. 对至少$x$种数出现$\ge k$次的方案容斥, 有 $\sum (-1)^x\binom{m-1}{x}\binom{n-(x+1)k+m- ...

  3. idea-代码格式化快捷键设置（2019.1版）

    idea默认格式化快捷键是:Ctrl+Alt+L,有时会因其它软件快捷键的冲突导致失灵. 设置方法如下: 1.File -->  Settings... 2. Keymap -> Code ...

  4. java实现spark常用算子之groupbykey

    import org.apache.spark.SparkConf;import org.apache.spark.api.java.JavaPairRDD;import org.apache.spa ...

  5. JS中的事件传播流程

    JS中的事件传播流程 1,Javascript与HTML之间的交互是通过事件实现的. 事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间. 可以使用侦听器来预定事件,以便事件发生时执行相应代码. 2 ...

  6. Caffe常用算子GPU和CPU对比

    通过整理LeNet.AlexNet.VGG16.googLeNet.ResNet.MLP统计出的常用算子(不包括ReLU),表格是对比. Prelu Cpu版 Gpu版 for (int i = 0; ...

  7. 使用 java 创建你的第一个区块链（第二部分）

    本系列教程的目的是帮助您了解如何开发区块链技术. 在这第二个教程中,我们将: 创建一个简单的钱包: 使用我们的区块链发送已签名的交易: 感觉更酷. 以上这些将使我们拥有自己的加密货币! 从上一个教程开 ...

  8. django优化--ORM优缺点

    谈Django绕不开ORM ORM : ORM概念,ORM特点,ORM 的优点,ORM 的缺点 orm : 对象关系映射 (Object Relational Mapping) ,用于实现面向对象编程 ...

  9. 如何查看FQDN

    FQDNFully Qualified Domain Name缩写, 含义完整域名. 例, 台机器主机名(hostname)www, 域缀(domain)example.com, 该主机FQDN应该w ...

  10. 18、远程管理卡、戴尔划RAid

    1.配置远程管理卡: 第一个iDRAC6是远程控制卡名称 第三个LAN ...是配置远程控制卡的 下图配置结束按Esc退出 最后按Esc保存退出 2.windows配置远程管理卡: 把下载下来的软件安 ...