效果:显示年月日和星期
写在开头:
在网上找了很多适用于小程序的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用同等方式挂载即可。