实时时间

195 阅读1分钟

直接步入正题:

JS中的写法:

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>JS时间</title>
		<style>

		</style>
	</head>

	<body>
		<div id="time"></div>
		<script type="text/javascript">
			function time() {
				var vWeek, vWeek_s, vDay;
				vWeek = ["星期天", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
				var date =  new Date();
				year = date.getFullYear();
				month = date.getMonth() + 1;
				day = date.getDate();
				hours = date.getHours();
				minutes = date.getMinutes();
				seconds = date.getSeconds();
				vWeek_s = date.getDay();
				document.getElementById("time").innerHTML = year + "年" + month + "月" + day + "日" + "\t" + hours + ":" + minutes + ":" + seconds + "\t" + vWeek[vWeek_s];

			};
			setInterval("time()", 1000);
		</script>
	</body>

</html>

Vue中的写法:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>实时实现显示</title>
	</head>
	<body>
		<div id="app">
			<span>当前时间:{{time|parsetime}}</span>    
		</div>
		<script src="js/v2.6.10/vue.js"></script>
		<script>
			//function getTime(){}
			var getTime = function() {
				var weeks = new Array('星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六');
				var date = new Date();
				var year = date.getFullYear();
				var month = date.getMonth() + 1;
				var day = date.getDate();
				var week = date.getDay();
				var hour = date.getHours();
				var minutes = date.getMinutes();
				var seconds = date.getSeconds();
				return year + '年' + month + '月' + day + '日' + '  ' + weeks[week] + '  ' + hour + ":" + minutes + ":" +
					seconds;
			};
			let app = new Vue({
				el: '#app', //挂载
				data: {
					time: ''
				},
				filters: {
					parsetime: getTime
				},
				methods: {
					refreshTime() {
						var updataTime = getTime();
						this.time = updataTime;
					}
				},
				mounted() {
					this.timer = setInterval(this.refreshTime, 1000);
					console.log(getTime());
				},
				beforeDestroy() {
					clearInterval(this.timer);
				}
			});
		</script>
	</body>
</html>