通过vue在uni-app中设置当前北京时间(动态时间)


在项目中通常需要在页面中显示当前时间,具体代码如下所示:

<template>
	<div class="container">
		<div class="times">
			<span>{{ hour }} : {{ minutes }}</span>
			<span style="font-size: 38upx;margin-left: 10upx;;">{{ seconds }}s</span>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			const now = new Date()
			return {
				hour: now.getHours() < 10 ? '0' + now.getHours() : now.getHours(), //当小时为个为数时在在前加0(例:01),以下同理
				minutes: now.getMinutes() < 10 ? '0' + now.getMinutes() : now.getMinutes(),
				seconds: now.getSeconds() < 10 ? '0' + now.getSeconds() : now.getSeconds(),
				timer: null
			}
		},
		onLoad() {
			if (this.timer) {
				clearInterval(this.timer)
			}
			setInterval(() => {
				this.getTime()
			},1000)  //设置定时器,时时间每隔一秒钟走一次(即每秒)
		},
		methods: {
			getTime () {
				var date = new Date()
				this.hour = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
				this.minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
				this.seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
			}
		}

	}
</script>
<style scoped>
	.container {
		margin: 0 auto;
	}

	.times {
		margin-left: 250upx ;
		font-size: 60upx;
		padding-top: 60upx;
		font-weight: bold;
	}
</style>

-----
通过以上的设置就可以实现设置当前北京时间(动态时间)


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM