vue.js实现带日期星期的数字时钟功能示例


Posted in Javascript onAugust 28, 2018

本文实例讲述了vue.js实现带日期星期的数字时钟功能。分享给大家供大家参考,具体如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>3water.com vue.js带日期星期数字时钟</title>
<style type="text/css">
html, body {
 height: 100%;
}
body {
 background: #0f3854;
 background: -webkit-radial-gradient(center ellipse, #0a2e38 0%, #000000 70%);
 background: radial-gradient(ellipse at center, #0a2e38 0%, #000000 70%);
 background-size: 100%;
}
p {
 margin: 0;
 padding: 0;
}
#clock {
 font-family: 'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',sans-serif;
 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 src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>
<div id="clock">
  <p class="date">{{ date }}</p>
  <p class="time">{{ time }}</p>
  <p class="text">数字时钟</p>
</div>
<script type="text/javascript">
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>

这里使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun,可得到如下运行效果:

vue.js实现带日期星期的数字时钟功能示例

Javascript 相关文章推荐
JavaScript 原型继承
Dec 26 Javascript
jquery操作select详解(取值,设置选中)
Feb 07 Javascript
jQuery将多条数据插入模态框的示例代码
Sep 25 Javascript
AngularJS入门教程之学习环境搭建
Dec 06 Javascript
JavaScript实现iframe自动高度调整和不同主域名跨域
Feb 27 Javascript
JS中事件冒泡和事件捕获介绍
Dec 13 Javascript
DWR3 访问WEB元素的两种方法实例详解
Jan 03 Javascript
AngularJS学习第一篇 AngularJS基础知识
Feb 13 Javascript
JavaScript验证知识整理
Mar 24 Javascript
解决修复npm安装全局模块权限的问题
May 17 Javascript
prettier自动格式化去换行的实现代码
Aug 25 Javascript
JS实现选项卡插件的两种写法(jQuery和class)
Dec 30 jQuery
JavaScript实现的前端AES加密解密功能【基于CryptoJS】
Aug 28 #Javascript
vue 使用自定义指令实现表单校验的方法
Aug 28 #Javascript
微信小程序多音频播放进度条问题
Aug 28 #Javascript
微信小程序获取音频时长与实时获取播放进度问题
Aug 28 #Javascript
vue表单自定义校验规则介绍
Aug 28 #Javascript
vue+axios+mock.js环境搭建的方法步骤
Aug 28 #Javascript
Vue实现用户自定义字段显示数据的方法
Aug 28 #Javascript
You might like
PHP可变函数学习小结
2015/11/29 PHP
老生常谈PHP中的数据结构:DS扩展
2017/07/17 PHP
[推荐]javascript 面向对象技术基础教程
2009/03/03 Javascript
基于jquery的兼容各种浏览器的iframe自适应高度的脚本
2010/08/13 Javascript
jquery DIV撑大让滚动条滚到最底部代码
2013/06/06 Javascript
js动态设置div的值下例子
2013/10/29 Javascript
javascript实现的DES加密示例
2013/10/30 Javascript
jquery中each方法示例和常用选择器
2014/07/08 Javascript
基于jquery实现鼠标滚轮驱动的图片切换效果
2015/10/26 Javascript
概述VUE2.0不可忽视的很多变化
2016/09/25 Javascript
Vue监听数据对象变化源码
2017/03/09 Javascript
jQuery实现广告条滚动效果
2017/08/22 jQuery
js合并两个数组生成合并后的key:value数组
2018/05/09 Javascript
使用vue-router切换页面时,获取上一页url以及当前页面url的方法
2019/05/06 Javascript
浅谈JavaScript中等号、双等号、 三等号的区别
2020/08/06 Javascript
[54:08]LGD女子刀塔学院 DOTA2炼金术士教学
2014/01/09 DOTA
[06:07]辉夜杯现场观众互动 “比谁远送显示器”
2015/12/26 DOTA
Python中函数的多种格式和使用实例及小技巧
2015/04/13 Python
Django中传递参数到URLconf的视图函数中的方法
2015/07/18 Python
python如何在循环引用中管理内存
2018/03/20 Python
Flask框架Flask-Login用法分析
2018/07/23 Python
python 控制Asterisk AMI接口外呼电话的例子
2019/08/08 Python
Python 批量刷博客园访问量脚本过程解析
2019/08/30 Python
详解pandas中利用DataFrame对象的.loc[]、.iloc[]方法抽取数据
2020/12/13 Python
用CSS3和table标签实现一个圆形轨迹的动画的示例代码
2019/01/17 HTML / CSS
canvas绘制圆角头像的实现方法
2019/01/17 HTML / CSS
交通安全教育制度
2014/02/02 职场文书
班主任经验交流会主持词
2014/04/01 职场文书
《宋庆龄故居的樟树》教学反思
2014/04/07 职场文书
省级青年文明号申报材料
2014/05/23 职场文书
电气自动化求职信
2014/06/24 职场文书
七年级地理教学计划
2015/01/22 职场文书
领导欢迎词致辞
2015/01/23 职场文书
工程部部长岗位职责
2015/02/12 职场文书
幼儿园安全管理制度
2015/08/05 职场文书
婚礼长辈答谢词
2015/09/29 职场文书