百度云盘　　传送门　　密码: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. 如何用纯 CSS 创作一个精彩的彩虹 loading 特效

    效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/vjvoow 可交互视频教 ...

  2. 二维数组中的查找——牛客剑指offer

    题目描述: 在一个二维数组中(每个一维数组的长度相同),每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序.请完成一个函数,输入这样的一个二维数组和一个整数,判断数组中是否含有该整 ...

  3. 剑指offer-和为S的连续正数序列-知识迁移能力-python

    题目描述 小明很喜欢数学,有一天他在做数学作业时,要求计算出9~16的和,他马上就写出了正确答案是100.但是他并不满足于此,他在想究竟有多少种连续的正数序列的和为100(至少包括两个数).没多久,他 ...

  4. C++参数传递与STL

    C++参数传递与STL 这是一篇备忘录形式的内容,涉及到的内容比较基础 今天写了一个小算法,用一个set在函数间传递,记录各个函数中的结果.但是最后结果显示set中的元素是0个.查了一下才发现,用来C ...

  5. 02 Redis防止入侵

    在使用云服务器时,安装的redis3.0+版本都关闭了protected-mode,因而都遭遇了挖矿病毒的攻击,使得服务器99%的占用率!! 因此我们在使用redis时候,最好更改默认端口,并且使用r ...

  6. Google浏览器显示URL的 http https ....

    谷歌浏览器输入 chrome://flags/#omnibox-ui-hide-steady-state-url-trivial-subdomains 输入之后, 高亮部分选项 改为 Disabled ...

  7. 在centos7上kvm网卡桥接

    系统环境准备 [root@linux-node1 ~]# cat /etc/redhat-release CentOS Linux release (Core) [root@linux-node1 ~ ...

  8. 指针、数组与sizeof运算符

    指针.数组与sizcof运算符 (1)sizeof是c语言的一个运算符(主要sizeof不是函数,虽然用法很像函数),sizeof的作用是用来返同()里面的变量或者数据类型占用的内存字节数. (2)s ...

  9. init container

    init container与应用容器在本质上是一样的, 但它们是仅运行一次就结束的任务, 并且必须在成功执行完成后, 系统才能继续执行下一个容器, 可以用在例如应用容器启动前做一些初始化工作,当in ...

  10. tp5实现Redis的简单使用

    方法1: Controller <?php namespace app\index\controller; use think\Controller; use think\session\dri ...