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

7 篇文章 0 订阅

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

<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>

在这里插入图片描述
在这里插入图片描述

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

要在uni-app使用腾讯地图,需要先安装腾讯地图SDK,并在uni-app引入SDK文件。 1. 安装腾讯地图SDK 可以通过腾讯地图开放平台申请并下载SDK,下载完成后将SDK的JS和CSS文件复制到uni-app项目的static目录下。 2. 引入SDK文件 打开uni-app项目的index.html文件,在head标签添加以下代码: ``` <script type="text/javascript" src="./static/js/TencentMapAPI.js"></script> <link rel="stylesheet" href="./static/css/TencentMapAPI.css"> ``` 3. 使用腾讯地图 在vue3组件,可以通过初始化腾讯地图,创建地图对象,并添加地图控件等方式使用腾讯地图。以下是一个简单的使用腾讯地图的示例代码: ``` <template> <div class="map-container"> <div id="map"></div> </div> </template> <script> export default { mounted() { // 初始化地图 const center = new qq.maps.LatLng(39.916527, 116.397128); // 北京市心 const map = new qq.maps.Map(document.getElementById('map'), { center: center, zoom: 13 }); // 添加缩放控件 const zoomControl = new qq.maps.ZoomControl({ position: qq.maps.ControlPosition.BOTTOM_CENTER, zoom: 13 }); map.controls[qq.maps.ControlPosition.BOTTOM_CENTER].push(zoomControl); } } </script> <style> .map-container { height: 100%; } #map { height: 100%; } </style> ``` 以上代码,我们首先在mounted生命周期初始化地图,设置地图心点和缩放级别。然后创建缩放控件,并将其添加到地图。最后在样式设置地图容器的高度为100%。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值