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 UI Dialog 创建友好的弹出对话框实现代码
Apr 12 Javascript
利用JQuery和JS实现奇偶行背景颜色自定义效果
Nov 19 Javascript
利用jq让你的div居中的好方法分享
Nov 21 Javascript
node.js中的fs.fchownSync方法使用说明
Dec 16 Javascript
jQuery调取jSon数据并展示的方法
Jan 29 Javascript
跟我学习javascript的闭包
Nov 16 Javascript
jQuery实现只允许输入数字和小数点的方法
Mar 02 Javascript
详解vue-router 2.0 常用基础知识点之router.push()
May 10 Javascript
JS使用插件cryptojs进行加密解密数据实例
May 11 Javascript
React Native之prop-types进行属性确认详解
Dec 19 Javascript
微信小程序实现的图片保存功能示例
Apr 24 Javascript
vue 兄弟组件的信息传递的方法实例详解
Aug 30 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
ExtJS与PHP、MySQL实现存储的方法
2010/04/02 PHP
PHP中的str_repeat函数在JavaScript中的实现
2013/09/16 PHP
神盾加密解密教程(二)PHP 神盾解密
2014/06/08 PHP
合格的PHP程序员必备技能
2015/11/13 PHP
FLASH 广告之外的链接
2008/12/16 Javascript
jquery 图片截取工具jquery.imagecropper.js
2010/04/09 Javascript
jquery 新浪网易的评论块制作
2010/07/01 Javascript
为原生js Array增加each方法
2012/04/07 Javascript
jquery indexOf使用方法
2013/08/19 Javascript
使用Jquery实现点击文字后变成文本框且可修改
2013/09/21 Javascript
jquery获取元素值的方法(常见的表单元素)
2013/11/15 Javascript
用js读、写、删除Cookie代码分享及详细注释说明
2014/06/05 Javascript
JavaScript常用验证函数实例汇总
2014/11/25 Javascript
AngularJS中实现用户访问的身份认证和表单验证功能
2016/04/21 Javascript
javascript正则表达式中分组详解
2016/07/17 Javascript
浅谈vue中.vue文件解析流程
2018/04/24 Javascript
关于vue-router的那些事儿
2018/05/23 Javascript
vue把输入框的内容添加到页面的实例讲解
2019/11/11 Javascript
[02:39]DOTA2英雄基础教程 天怒法师
2013/11/29 DOTA
Python基于opencv的图像压缩算法实例分析
2018/05/03 Python
Python 字符串与数字输出方法
2018/07/16 Python
Python3实现统计单词表中每个字母出现频率的方法示例
2019/01/28 Python
深入理解Django-Signals信号量
2019/02/19 Python
Selenium+Python 自动化操控登录界面实例(有简单验证码图片校验)
2019/06/28 Python
Python爬虫实现“盗取”微信好友信息的方法分析
2019/09/16 Python
Python实现数值积分方式
2019/11/20 Python
python二维键值数组生成转json的例子
2019/12/06 Python
vscode配置anaconda3的方法步骤
2020/08/08 Python
39美元购买一副眼镜或太阳镜:39DollarGlasses.com
2018/06/17 全球购物
法学专业个人求职信
2013/09/26 职场文书
一年级数学教学反思
2014/02/01 职场文书
学生感冒英文请假条
2014/02/04 职场文书
社区党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
迟到检讨书范文
2015/01/27 职场文书
2015年党日活动总结范文
2015/03/25 职场文书
财务总监岗位职责范本
2015/04/03 职场文书