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 相关文章推荐
extjs中grid中嵌入动态combobox的应用
Jan 01 Javascript
JS中showModalDialog 的使用解析
Apr 17 Javascript
node.js中使用socket.io的方法
Dec 15 Javascript
JS+CSS实现闪烁字体效果代码
Apr 05 Javascript
javascript+css3开发打气球小游戏完整代码
Nov 28 Javascript
vue超时计算的组件实例代码
Jul 09 Javascript
JavaScript设计模式之观察者模式(发布订阅模式)原理与实现方法示例
Jul 27 Javascript
VUE简单的定时器实时刷新的实现方法
Jan 20 Javascript
JavaScript实现星级评价效果
May 17 Javascript
layer.js之回调销毁对话框的例子
Sep 11 Javascript
javascript的delete运算符知识点总结
Nov 19 Javascript
jquery实现广告上下滚动效果
Mar 04 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 方便水印和缩略图的图形类
2009/05/21 PHP
PHP 第一节 php简介
2012/04/28 PHP
解析php防止form重复提交的方法
2013/07/01 PHP
php 猴子摘桃的算法
2017/06/20 PHP
jQuery DOM操作小结与实例
2010/01/07 Javascript
jQuery 淡出一个图像到另一个图像的实现代码
2013/06/12 Javascript
jQuery使用contains过滤器实现精确匹配方法详解
2016/02/25 Javascript
动态加载js、css的实例代码
2016/05/26 Javascript
JavaScript 中 avalon绑定属性总结
2016/10/19 Javascript
ES6数组的扩展详解
2017/04/25 Javascript
jQuery实现新闻播报滚动及淡入淡出效果示例
2018/03/23 jQuery
TypeScript中的方法重载详解
2019/04/12 Javascript
详解如何在Vue项目中导出Excel
2019/04/19 Javascript
vue 框架下自定义滚动条(easyscroll)实现方法
2019/08/29 Javascript
[02:57]DOTA2亚洲邀请赛小组赛第四日 赛事回顾
2015/02/02 DOTA
[00:33]2016完美“圣”典风云人物:BurNIng宣传片
2016/12/10 DOTA
初步解析Python中的yield函数的用法
2015/04/03 Python
Python操作Access数据库基本步骤分析
2016/09/19 Python
详解Python 模拟实现生产者消费者模式的实例
2017/08/10 Python
Python3一行代码实现图片文字识别的示例
2018/01/15 Python
使用celery执行Django串行异步任务的方法步骤
2019/06/06 Python
PyQt+socket实现远程操作服务器的方法示例
2019/08/22 Python
如何安装并在pycharm使用selenium的方法
2020/04/30 Python
大学生简单自荐信
2013/11/10 职场文书
2014端午节活动策划方案
2014/01/27 职场文书
鲜花方阵解说词
2014/02/13 职场文书
竞选学习委员演讲稿
2014/09/01 职场文书
学校运动会报道稿
2014/09/23 职场文书
幼儿园教研工作总结2015
2015/05/12 职场文书
2015初中教导处工作总结
2015/07/21 职场文书
公司行政管理制度范本
2015/08/05 职场文书
Nginx 根据URL带的参数转发的实现
2021/04/01 Servers
使用SQL实现车流量的计算的示例代码
2022/02/28 SQL Server
B站评分公认最好看的动漫,你的名字评分9.9,第六备受喜欢
2022/03/18 日漫
Python使用华为API为图像设置多个锚点标签
2022/04/12 Python
Python开发五子棋小游戏
2022/05/02 Python