首先是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了半天,太弱智了。
溜了。