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 相关文章推荐
jQuery 1.4 15个你应该知道的新特性(译)
Jan 24 Javascript
JavaScript 面向对象之命名空间
May 04 Javascript
javascript实现10个球随机运动、碰撞实例详解
Jul 08 Javascript
JQuery自适应窗口大小导航菜单附源码下载
Sep 01 Javascript
jQuery语法小结(超实用)
Dec 31 Javascript
JS基于HTML5的canvas标签实现炫目的色相球动画效果实例
Aug 24 Javascript
有关文件上传 非ajax提交 得到后台数据问题
Oct 12 Javascript
使用BootStrap实现表格隔行变色及hover变色并在需要时出现滚动条
Jan 04 Javascript
简述vue状态管理模式之vuex
Aug 29 Javascript
JavaScript文本特效实例小结【3个示例】
Dec 22 Javascript
vue 手机物理监听键+退出提示代码
Sep 09 Javascript
vuex中遇到的坑,vuex数据改变,组件中页面不渲染操作
Nov 16 Javascript
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统计文件大小,以GB、MB、KB、B输出
2011/05/29 PHP
ThinkPHP模板之变量输出、自定义函数与判断语句用法
2014/11/01 PHP
详谈PHP中public,private,protected,abstract等关键字的用法
2017/12/31 PHP
PHP的new static和new self的区别与使用
2019/11/27 PHP
JavaScript 事件冒泡简介及应用
2010/01/11 Javascript
javascript之通用简单的table选项卡实现(二)
2010/05/09 Javascript
Moment.js 不容错过的超棒Javascript日期处理类库
2012/04/15 Javascript
jquery的clone方法应用于textarea和select的bug修复
2014/06/26 Javascript
关于原生js中bind函数的简单实现
2016/08/10 Javascript
JS弹出窗口的运用与技巧大全
2016/11/01 Javascript
vue实现单选和多选功能
2017/08/11 Javascript
bootstrap中日历范围选择插件daterangepicker的使用详解
2018/04/17 Javascript
JavaScript中Dom操作实例详解
2019/07/08 Javascript
layui-select动态选中值的例子
2019/09/23 Javascript
[26:40]DOTA2上海特级锦标赛A组资格赛#1 Secret VS MVP.Phx第一局
2016/02/25 DOTA
[01:35:53]完美世界DOTA2联赛PWL S3 Magma vs GXR 第二场 12.13
2020/12/17 DOTA
Python编程实现输入某年某月某日计算出这一天是该年第几天的方法
2017/04/18 Python
PyTorch学习笔记之回归实战
2018/05/28 Python
详解Python连接MySQL数据库的多种方式
2019/04/16 Python
pandas 使用均值填充缺失值列的小技巧分享
2019/07/04 Python
Python装饰器实现方法及应用场景详解
2020/03/26 Python
Python列表元素删除和remove()方法详解
2021/01/04 Python
CSS3实现任意图片lowpoly动画效果实例
2017/05/11 HTML / CSS
CSS3 background-image颜色渐变的实现代码
2018/09/13 HTML / CSS
video.js支持m3u8格式直播的实现示例
2020/05/20 HTML / CSS
美国儿童运动鞋和服装零售商:Kids Foot Locker
2017/08/05 全球购物
生产主管岗位职责
2013/11/10 职场文书
电钳专业个人求职信
2014/01/04 职场文书
舞蹈毕业生的自我评价
2014/03/05 职场文书
事业单位竞聘上岗实施方案
2014/03/28 职场文书
优秀班主任经验交流材料
2014/06/02 职场文书
单位在职证明书
2014/09/11 职场文书
研究生个人学年总结
2015/02/14 职场文书
不同意离婚上诉状
2015/05/23 职场文书
小学主题班会教案
2015/08/17 职场文书
Windows中Redis安装配置流程并实现远程访问功能
2021/06/07 Redis