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 相关文章推荐
新浪的图片新闻效果
Jan 13 Javascript
JavaScript 无符号右移赋值操作
Apr 17 Javascript
兼容IE与firefox火狐的回车事件(js与jquery)
Oct 20 Javascript
用JS判别浏览器种类以及IE版本的几种方法小结
Aug 02 Javascript
javascript对JSON数据排序的3个例子
Apr 12 Javascript
JavaScript判断表单提交时哪个radio按钮被选中的方法
Mar 21 Javascript
JavaScript中的replace()方法使用详解
Jun 06 Javascript
JS实现网页游戏中滑块响应鼠标点击移动效果
Oct 19 Javascript
微信小程序 特效菜单抽屉效果实例代码
Jan 11 Javascript
JavaScript全屏和退出全屏事件总结(附代码)
Aug 17 Javascript
JS Object.preventExtensions(),Object.seal()与Object.freeze()用法实例分析
Aug 25 Javascript
vue中组件的过渡动画及实现代码
Nov 21 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新手上路(十一)
2006/10/09 PHP
同一空间绑定多个域名而实现访问不同页面的PHP代码
2006/12/06 PHP
PHP数据流应用的一个简单实例
2012/09/14 PHP
php中的静态变量的基本用法
2014/03/20 PHP
PHP中array_map与array_column之间的关系分析
2014/08/19 PHP
javascript 读取XML数据,在页面中展现、编辑、保存的实现
2009/10/27 Javascript
xheditor与validate插件冲突的解决方案
2010/04/15 Javascript
js去除重复字符串两种实现方法
2013/01/09 Javascript
引用 js在IE与FF之间的区别详细解析
2013/11/20 Javascript
jquery+php实现搜索框自动提示
2014/11/28 Javascript
avalon js实现仿微博拖动图片排序
2015/08/14 Javascript
简单的js表格操作
2016/09/24 Javascript
JS实现图片预览的两种方式
2017/06/27 Javascript
基于ES6作用域和解构赋值详解
2017/11/03 Javascript
vue进入页面时不在顶部,检测滚动返回顶部按钮问题及解决方法
2019/10/30 Javascript
JS实现图片切换特效
2019/12/23 Javascript
[02:52]2014DOTA2西雅图国际邀请赛 CIS战队巡礼
2014/07/07 DOTA
python爬虫的工作原理
2017/03/05 Python
python获取网页中所有图片并筛选指定分辨率的方法
2018/03/31 Python
Python多线程threading模块用法实例分析
2019/05/22 Python
Python 日志logging模块用法简单示例
2019/10/18 Python
Python函数的返回值、匿名函数lambda、filter函数、map函数、reduce函数用法实例分析
2019/12/26 Python
pyecharts绘制中国2020肺炎疫情地图的实例代码
2020/02/12 Python
python GUI库图形界面开发之PyQt5信号与槽机制、自定义信号基础介绍
2020/02/25 Python
CSS3中background-clip和background-origin的区别示例介绍
2014/03/10 HTML / CSS
实例讲解CSS3中的border-radius属性
2015/08/18 HTML / CSS
Bally美国官网:经典瑞士鞋履、手袋及配饰奢侈品牌
2018/05/18 全球购物
Rossignol金鸡美国官网:始于1907年法国百年雪具品牌
2019/03/06 全球购物
会计应届生的自荐信
2013/12/13 职场文书
公积金转移接收函
2014/01/11 职场文书
连锁酒店店长职责范本
2014/02/13 职场文书
乡镇创先争优活动总结
2014/08/28 职场文书
财产分割协议书范本
2014/11/03 职场文书
毕业设计工作总结
2015/08/14 职场文书
mysql中整数数据类型tinyint详解
2021/12/06 MySQL
如何利用python实现Simhash算法
2022/06/28 Python