vue带日期星期数字时钟

JavaScript中的数字是没有前置0的，因此需要我们自己进行操作来添加前置0，而且还得转换成字符串。

js遍历的过程中补零（项目设置前导零的方法）

// 定义临时变量
var zero = '';
// 存储遍历过程中的0
for(var i=0; i<2; i++){
	zero += '0';
}
console.log(zero)

再例如：

// 定义临时变量
var zero = '';
// 存储遍历过程中的0
var digit = 4;
for(var i=0; i<digit; i++){
	zero += '0';
}
console.log(zero)

再例如：在一个数的前面补前导零

// 定义临时变量
var zero = '';
// 存储遍历过程中的0
var digit = 4;
for(var i=0; i<digit; i++){
	zero += '0';
}
var res = (zero+100);
console.log(res)

如果，我们想从后面获取这个数的“指定部分的”内容，我们使用javascript中的slice() 方法:可提取字符串的某个部分，并以新的字符串返回被提取的部分。

// 定义临时变量
var zero = '';
// 存储遍历过程中的0
var digit = 4;
for(var i=0; i<digit; i++){
	zero += '0';
}
// var res = (zero+100);

// slice() 方法:可提取字符串的某个部分，并以新的字符串返回被提取的部分。
// 语法：stringObject.slice(start,end)
// end---如果该参数是负数，那么它规定的是从字符串的尾部开始算起的位置。
var res = (zero+100).slice(-digit);
console.log(res)

如果这个num是数字5，那么

var res = (zero+5).slice(-digit);
console.log(res)

0000+5=0005，从数尾部开始向左边，截取内容，截取4个内容。

如下图所示:

html:

<div id="clock">
	<p class="date">{{date}}</p>
	<p class="time">{{time}}</p>
</div>

css:

html,body{
	height: 100%;
}
body{
	background-color: #0f3854;
	background: radial-gradient(ellipse at center,#0a2e38 0%, #000 70%);
	background-size: 100%;
}
p{
	margin: 0;
	padding: 0;
}
#clock{
	font-family: sans-serif;
	color: #fff;
	text-align: center;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	color: #daf6ff;
	text-shadow: 0 0 20px #0aafe6,
				 0 0 20px rgba(10,175,230,0);
}
#clock .time{
	font-size: 80px;
	letter-spacing: 0.05em;
	padding: 5px 0;
}
#clock .date{
	font-size: 24px;
	letter-spacing: 0.1em;
}

vuejs:

<script type="text/javascript">
	var vm = new Vue({
		el:'#clock',
		data:{
			week:['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],
			timeID:null,
			time:'',
			date:''
		},
		mounted:function(){
			this.autoPlay();
		},
		methods:{
			autoPlay:function(){
				this.timeID = setInterval(this.updateTime,1000);
			},
			updateTime:function(){
				var cd = new Date();
				this.time = this.zeroPadding(cd.getHours(),2) + ":" + this.zeroPadding(cd.getMinutes(),2) + ":" + this.zeroPadding(cd.getSeconds(),2);
				this.date = this.zeroPadding(cd.getFullYear(),4) 
							+ "-" + this.zeroPadding(cd.getMonth()+1,2) 
							+ "-" + this.zeroPadding(cd.getDate(),2) 
							+ " " + this.week[cd.getDay()];
			},
			zeroPadding:function(num, digit){
				var zero = '';
				for(var i=0; i<digit; i++){
					zero += '0';
				}
				return (zero+num).slice(-digit);
			}
		}
	})

</script>

重点函数分析：

js字符串或者数字前置补零

zeroPadding:function(num, digit){

var zero = '';

for(var i=0; i<digit; i++){

zero += '0';

}

return (zero+num).slice(-digit);

}

this.zeroPadding(cd.getHours(),2)

this.zeroPadding(cd.getFullYear(),4)