uniapp微信小程序 js获取当天日期

2021/5/17 1:25:24

本文主要是介绍uniapp微信小程序 js获取当天日期,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

uniapp微信小程序 js获取当天日期,以及一个我常用的美观小排板样式=v=


如图 在这里插入图片描述
应用在主页或是日期小标栏什么的让页面更清爽独特~!

首先是HTML部分

		<view id="date">
			<view id="date_d" class="date_">{{date_d}}</view> 
			<view id="line" class="date_"></view> //分割线
			<view id="date_y_m" class="date_" >
				<view id="date_y">{{date_y}}</view>
				<view id="date_m">{{date_m}}</view>
			</view>		
		</view>

然后是css代码,很好理解

/*今日日期*/
	.date_{
		width: 50rpx;
		height: 50rpx;
		float: left;
		margin-right: 15rpx;
		margin-left: 15rpx;
		text-align: center;
		color: #9f9f9f;
	}
	#date{
		position: fixed;
		top: 100rpx;
		left: 5%;
		z-index: 10;
	}
	#date_d{
		font-size: 55rpx;
		font-weight: 400;
	}
	#line{
		width: 1rpx;
		height: 80rpx;
		background-color: #9f9f9f;
		border: 1rpx solid #9f9f9f;
	}
	#date_y_m{
		font-size: 30rpx;
	}
	

中间小分割线更建议用一个盒子设置1rpx的宽,而不是border-left或right,不然间距不好调= =

重中之重的js部分

	export default {
		data() {
			return {
				'date_d': '00',
				'date_y': '2020',
				'date_m':'Aay',
				}
			},
		onLoad() {	
			this.getTime(this);
		    },
		methods: {
			//获取当前时间
			getTime(){
			     let date = new Date();
				 
			     var y = date.getFullYear();
				 
			     var m = date.getMonth();
			     switch(m){
					 case 0 : m = 'January';break;
					 case 1 : m = 'February';break;
					 case 2 : m = 'March';break;
					 case 3 : m = 'April';break;
					 case 4 : m = 'MAy';break;
					 case 5 : m = 'June';break;
					 case 6 : m = 'July';break;
					 case 7 : m = 'August';break;
					 case 8 : m = 'September';break;
					 case 9 : m = 'October';break;
					 case 10 : m = 'November';break;
					 case 11 : m = 'December';break;
				 }    
				 
			     let d = date.getDate();
			     d = d < 10 ? ('0' + d) : d;//天补0
							  
				 this.date_d = d;
				 this.date_y = y;
				 this.date_m = m;
			},
	}	 

其实获取日期方法很简单,老生常谈了,可我还是老忘记,该打。

多了个月份换英文switch语句,看需要加,我只是为了画风统一。

特别特别记得onLoad()调用下函数,我就在这忘了debug了半天,太弱智了。

溜了。



这篇关于uniapp微信小程序 js获取当天日期的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程