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 相关文章推荐
不错的JS中变量相关的细节分析
Aug 13 Javascript
JS图片无缝、平滑滚动代码
Mar 11 Javascript
JavaScript中split() 使用方法汇总
Apr 17 Javascript
JavaScript简单实现鼠标移动切换图片的方法
Feb 23 Javascript
node模块机制与异步处理详解
Mar 13 Javascript
jQuery对checkbox 复选框的全选全不选反选的操作
Aug 09 Javascript
javascript另类方法实现htmlencode()与htmldecode()函数实例分析
Nov 17 Javascript
jsp 自动编译机制详细介绍
Dec 01 Javascript
使用Vue完成一个简单的todolist的方法
Dec 01 Javascript
浅析Vue.js 中的条件渲染指令
Nov 19 Javascript
JS实现点击li标签弹出对应的索引功能【案例】
Feb 18 Javascript
JS中类的静态方法,静态变量,实例方法,实例变量区别与用法实例分析
Mar 14 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获取程序执行的时间
2013/06/09 PHP
实现PHP+Mysql无限分类的方法汇总
2015/03/02 PHP
php获取文章内容第一张图片的方法示例
2017/07/03 PHP
Javascript 生成指定范围数值随机数
2009/01/09 Javascript
JavaScript中Object和Function的关系小结
2009/09/26 Javascript
JavaScript面向对象程序设计三 原型模式(上)
2011/12/21 Javascript
jQuery操作input type=radio的实现代码
2012/06/14 Javascript
jquery获取table中的某行全部td的内容方法
2013/03/08 Javascript
js 单击式的下拉菜单效果实例
2013/08/13 Javascript
jquery prop的使用介绍及与attr的区别
2013/12/19 Javascript
get(0).tagName获得作用标签示例代码
2014/10/08 Javascript
JavaScript中的普通函数与构造函数比较
2015/04/07 Javascript
jQuery EasyUI 布局之动态添加tabs标签页
2015/11/18 Javascript
js 判断登录界面的账号密码是否为空
2017/02/08 Javascript
学习使用Bootstrap栅格系统
2017/05/11 Javascript
基于vue2实现左滑删除功能
2017/11/28 Javascript
vue里面父组件修改子组件样式的方法
2018/02/03 Javascript
详解用async/await来处理异步
2019/08/28 Javascript
vue 解决addRoutes多次添加路由重复的操作
2020/08/04 Javascript
原生JavaScript实现换肤
2021/02/19 Javascript
[02:10]DOTA2 TI10勇士令状玩法及不朽Ⅰ展示:焕新世界,如你所期
2020/05/29 DOTA
Python使用自带的ConfigParser模块读写ini配置文件
2016/06/26 Python
如何使用Python实现斐波那契数列
2019/07/02 Python
Python动态强类型解释型语言原理解析
2020/03/25 Python
推荐一些比较有用的css3新属性
2014/11/11 HTML / CSS
HTML5操作WebSQL数据库的实例代码
2017/08/26 HTML / CSS
美国领先的宠物用品和宠物食品零售商:Petco
2020/10/28 全球购物
企业内控岗位的职责
2014/02/07 职场文书
《最佳路径》教学反思
2014/04/13 职场文书
温馨提示标语
2014/06/26 职场文书
企业党建工作汇报材料
2014/08/19 职场文书
暑假社会实践心得体会
2014/09/02 职场文书
小学教师2014年度工作总结
2014/12/03 职场文书
大学教师个人总结
2015/02/10 职场文书
2015年秋季灭鼠工作总结
2015/07/27 职场文书
mysql sql常用语句大全
2022/06/21 MySQL