uniapp微信小程序,动态显示时间

发布于:2023-01-09 ⋅ 阅读:(1162) ⋅ 点赞:(0)

效果:显示年月日和星期在这里插入图片描述
写在开头:

在网上找了很多适用于小程序的uniapp编写的代码,都没有看到喜欢的效果,索性生掰了一个,空谈误国,上代码:

1.写在template里

<view style="width: 100%; height: 100rpx;">
	<view style="font-size: 80rpx;float: left;margin-right: 30rpx; ">
		{{day01}}
	</view>
	<view style="float: left;font-size: 30rpx;margin-top:15rpx ;color: grey;">
		{{month01}}
		<br>
		{{year01}}
	</view>
	<view style="float: right;margin-top:30rpx ;font-size: 30rpx;color: grey;">
		{{week01}}
	</view>
</view>

2.写进data(){}

week01: '',
year01: '',
month01: '',
day01: '',

3.并列于methods

onLoad() {
	var time = this.getTime();
	console.log(time + 'hhhhhhhh');
	var that = this;
	setInterval(function() {
		that.getTime();
	}, 1000);
},

4.写进methods:{}里

getTime: function() {
	var date = new Date(),
	year = date.getFullYear(),
	month = date.getMonth() + 1,
	day = date.getDate(),
	hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(),
	minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes(),
	second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
	month >= 1 && month <= 9 ? (month = "0" + month) : "";
	var timer = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
	this.year01 = year;
	var months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September','October', 'November', 'December'];
	for (var i = 1; i <= months.length; i++) {
		if (month == i) {
			month = months[i - 1];
		}
	}
	this.month01 = month;
	this.day01 = day;
	var h = date.getDay() - 1;
	var week = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期七'];
	this.week01 = week[h];
},

5.写在style里

.text {
	width: 650rpx;
	height: 350rpx;
	margin: auto;
}

写在最后:

思想:获取当前系统时间,使用setInterval方法每秒更新一下函数,更新时间。
后续:如果需要加上时分秒的可以直接用上面的代码将 hour ,minute, second用同等方式挂载即可。


网站公告

今日签到

点亮在社区的每一天
去签到