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 相关文章推荐
表单切换,用回车键替换Tab健(不支持IE)
Jul 20 Javascript
jquery对元素拖动排序示例
Jan 16 Javascript
关于延迟加载JavaScript
May 05 Javascript
js+css实现有立体感的按钮式文字竖排菜单效果
Sep 01 Javascript
js实现漫天星星效果
Jan 19 Javascript
gulp解决跨域的配置文件问题
Jun 08 Javascript
JS实现给json数组动态赋值的方法示例
Mar 19 Javascript
浅谈JS 数字和字符串之间相互转化的纠纷
Oct 20 Javascript
vue 中 beforeRouteEnter 死循环的问题
Apr 23 Javascript
js实现坦克大战游戏
Feb 24 Javascript
js模拟实现百度搜索
Jun 28 Javascript
详解vue中v-for的key唯一性
May 15 Vue.js
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学习笔记 类的声明与对象实例化
2011/06/13 PHP
PHP图片处理之图片旋转和图片翻转实例
2014/11/19 PHP
php排序算法实例分析
2016/10/17 PHP
PHP实现读取文件夹及批量重命名文件操作示例
2019/04/15 PHP
jqTransform form表单美化插件使用方法
2012/07/05 Javascript
JavaScript中“过于”犀利地for/in循环使用示例
2013/10/22 Javascript
Eclipse去除js(JavaScript)验证错误
2014/02/11 Javascript
JavaScript lastIndexOf方法入门实例(计算指定字符在字符串中最后一次出现的位置)
2014/10/17 Javascript
Jquery实现$.fn.extend和$.extend函数
2016/04/14 Javascript
Angularjs使用ng-repeat中$even和$odd属性的注意事项
2016/12/31 Javascript
Javascript继承机制详解
2017/05/30 Javascript
nodejs集成sqlite使用示例
2017/06/05 NodeJs
jQuery实现上传图片前预览效果功能
2017/08/03 jQuery
JS解析url查询参数的简单代码
2017/08/06 Javascript
利用Node.js检测端口是否被占用的方法
2017/12/07 Javascript
vue.js vue-router如何实现无效路由(404)的友好提示
2017/12/20 Javascript
node Buffer缓存区常见操作示例
2019/05/04 Javascript
React Native 混合开发多入口加载方式详解
2019/09/23 Javascript
vue 导出文件,携带请求头token操作
2020/09/10 Javascript
[59:42]Secret vs Alliacne 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
用python登录Dr.com思路以及代码分享
2014/06/25 Python
Python中的包和模块实例
2014/11/22 Python
python爬虫基本知识
2018/03/05 Python
Python实现计算对象的内存大小示例
2019/07/10 Python
简单了解django索引的相关知识
2019/07/17 Python
pyqt5、qtdesigner安装和环境设置教程
2019/09/25 Python
简单了解python filter、map、reduce的区别
2020/01/14 Python
Python实现一个简单的毕业生信息管理系统的示例代码
2020/06/08 Python
如何基于python实现年会抽奖工具
2020/10/20 Python
卫生巾广告词
2014/03/18 职场文书
2014年城管工作总结
2014/11/20 职场文书
追悼会答谢词范文
2015/09/29 职场文书
工程移交协议书
2016/03/24 职场文书
pytorch交叉熵损失函数的weight参数的使用
2021/05/24 Python
JavaScript事件的委托(代理)的用法示例详解
2022/02/18 Javascript
Python的property属性详细讲解
2022/04/11 Python