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经典效果集锦
Jul 06 Javascript
IE6下js通过css隐藏select的一个bug
Aug 16 Javascript
JQuery Highcharts 动态生成图表的方法
Nov 15 Javascript
javascript和jquery实现设置和移除文本框默认值效果代码
Jan 13 Javascript
JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】
May 10 Javascript
简单实现jQuery手风琴效果
Aug 18 jQuery
vue项目中使用axios上传图片等文件操作
Nov 02 Javascript
jQuery插件jsonview展示json数据
May 26 jQuery
js如何找出字符串中的最长回文串
Jun 04 Javascript
区别JavaScript函数声明与变量声明
Sep 12 Javascript
JavaScript 作用域实例分析
Oct 02 Javascript
基于原生js实现判断元素是否有指定class名
Jul 11 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
模仿OSO的论坛(四)
2006/10/09 PHP
ThinkPHP入口文件设置及相关注意事项分析
2014/12/05 PHP
JavaScript中的prototype使用说明
2010/04/13 Javascript
jquery 漂亮的删除确认和提交无刷新删除示例
2013/11/13 Javascript
php+js实现倒计时功能
2014/06/02 Javascript
简单的jquery左侧导航栏和页面选中效果
2014/08/21 Javascript
jQuery实现鼠标滑过Div层背景变颜色的方法
2015/02/17 Javascript
jQuery遍历页面所有CheckBox查看是否被选中的方法
2015/04/14 Javascript
Vuejs第一篇之入门教程详解(单向绑定、双向绑定、列表渲染、响应函数)
2016/09/09 Javascript
JavaScript中浅讲ajax图文详解
2016/11/11 Javascript
js 性能优化之算法和流程控制
2017/02/15 Javascript
微信小程序实现瀑布流布局与无限加载的方法详解
2017/05/12 Javascript
JavaScript之json_动力节点Java学院整理
2017/06/29 Javascript
详解webpack 多页面/入口支持&amp;公共组件单独打包
2017/06/29 Javascript
捕获未处理的Promise错误方法
2017/10/13 Javascript
mui框架 页面无法滚动的解决方法(推荐)
2018/01/25 Javascript
Vue-router 中hash模式和history模式的区别
2018/07/24 Javascript
Vue开发实现吸顶效果的示例代码
2018/08/21 Javascript
html+jQuery实现拖动滑块图片拼图验证码插件【移动端适用】
2019/09/10 jQuery
解决Layui 表格自适应高度的问题
2019/11/15 Javascript
JS事件循环机制event loop宏任务微任务原理解析
2020/08/04 Javascript
JavaScript实现京东快递单号查询
2020/11/30 Javascript
[51:14]LGD vs VP 2018国际邀请赛淘汰赛BO3 第一场 8.21
2018/08/22 DOTA
[40:27]完美世界DOTA2联赛PWL S3 PXG vs GXR 第一场 12.19
2020/12/24 DOTA
python去掉字符串中重复字符的方法
2014/02/27 Python
仅利用30行Python代码来展示X算法
2015/04/01 Python
python组合无重复三位数的实例
2018/11/13 Python
Python PyCharm如何进行断点调试
2019/07/05 Python
Python如何转换字符串大小写
2020/06/04 Python
详解torch.Tensor的4种乘法
2020/09/03 Python
pyx文件 生成pyd 文件用于 cython调用的实现
2021/03/04 Python
简单聊聊H5的pushState与replaceState的用法
2018/04/03 HTML / CSS
丝芙兰巴西官方商城:SEPHORA巴西
2016/10/31 全球购物
实习评语
2013/12/16 职场文书
安全教育的主题班会
2015/08/13 职场文书
python爬取企查查企业信息之selenium自动模拟登录企查查
2021/04/08 Python