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操纵Cookie实现购物车程序
Nov 23 Javascript
关于jquery动态增减控件的一些想法和小插件
Aug 01 Javascript
js实现在文本框光标处添加字符的方法介绍
Nov 24 Javascript
浅析Cookie中的Path与domain
Dec 18 Javascript
上传图片js判断图片尺寸和格式兼容IE
Sep 01 Javascript
node.js中的console.assert方法使用说明
Dec 10 Javascript
javascript属性访问表达式用法分析
Apr 25 Javascript
jQuery热气球动画半透明背景的后台登录界面代码分享
Aug 28 Javascript
JS 动态加载js文件和css文件 同步/异步的两种简单方式
Sep 23 Javascript
jQuery Validate 无法验证 chosen-select元素的解决方法
May 17 jQuery
用js限制网页只在微信浏览器中打开(或者只能手机端访问)
Dec 24 Javascript
Html5生成验证码的示例代码
May 10 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页面间传递参数实例代码
2008/06/05 PHP
php下删除一篇文章生成的多个静态页面
2010/08/08 PHP
php笔记之:初探PHPcms模块开发介绍
2013/04/26 PHP
php断点续传之如何分割合并文件
2014/03/22 PHP
值得分享的php+ajax实时聊天室
2016/07/20 PHP
php利用递归实现删除文件目录的方法
2016/09/23 PHP
php实现HTML实体编号与非ASCII字符串相互转换类实例
2016/11/02 PHP
asp函数split()对应php函数explode()
2019/02/27 PHP
PHP迭代器和生成器用法实例分析
2019/09/28 PHP
PHP实现计算器小功能
2020/08/28 PHP
javascript 进度条 实现代码
2009/07/30 Javascript
function foo的原型与prototype属性解惑
2010/11/19 Javascript
解决js数据包含加号+通过ajax传到后台时出现连接错误
2013/08/01 Javascript
固定网页背景图同时保持图片比例的思路代码
2013/08/15 Javascript
IE网页js语法错误2行字符1、FF中正常的解决方法
2013/09/09 Javascript
jQuery判断一个元素是否可见的方法
2015/06/05 Javascript
微信小程序 时间格式化(util.formatTime(new Date))详解
2016/11/16 Javascript
JS获取多维数组中相同键的值实现方法示例
2017/01/06 Javascript
jQuery中table数据的值拷贝和拆分
2017/03/19 Javascript
vue.js项目打包上线的图文教程
2017/11/16 Javascript
如何封装了一个vue移动端下拉加载下一页数据的组件
2019/01/06 Javascript
微信小程序实现组件顶端固定或底端固定效果(不随滚动而滚动)
2020/04/09 Javascript
Python按行读取文件的实现方法【小文件和大文件读取】
2016/09/19 Python
使用python画个小猪佩奇的示例代码
2018/06/06 Python
python ---lambda匿名函数介绍
2019/03/13 Python
Python 寻找局部最高点的实现
2019/12/05 Python
Tensorflow的常用矩阵生成方式
2020/01/04 Python
django API 中接口的互相调用实例
2020/04/01 Python
英国领先的大码时装品牌之一:Elvi
2018/08/26 全球购物
小学三年级数学教学反思
2014/01/31 职场文书
个人先进材料范文
2014/12/30 职场文书
医院科室评语
2015/01/04 职场文书
2015年依法行政工作总结
2015/04/29 职场文书
会议承办单位欢迎词
2015/09/30 职场文书
幼儿园教师辞职信
2019/06/21 职场文书
python实现高效的遗传算法
2021/04/07 Python