JS——顯示當前時間

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			{{date | formatDate}}
		</div>
		<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
		<script>
			var padDate = function(value) {
				return value < 10 ? '0' + value : value;
			}
			var app = new Vue({
				el:'#app',
				data:{
					date: new Date()
				},
				filters: {
					formatDate: function(value) {
						var date = new Date(value);
						var year = date.getFullYear();
						var month = padDate(date.getMonth() + 1);
						var day = padDate(date.getDate());
						var hours = padDate(date.getHours());
						var minutes = padDate(date.getMinutes());
						var seconds = padDate(date.getSeconds());
						return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;
					}
				},
				mounted:function(){
					var _this = this;
					this.timer = setInterval(function() {
						_this.date = new Date();
					}, 1000);
				},
				beforeDestroy:function(){
					if(this.timer) {
						clearInterval(this.timer);
					}
				}
			})
		</script>
	</body>
</html>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章