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获取当天日期的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-12-21Vue3教程:新手入门到实践应用
- 2024-12-21VueRouter4教程:从入门到实践
- 2024-12-20Vue3项目实战:从入门到上手
- 2024-12-20Vue3项目实战:新手入门教程
- 2024-12-20VueRouter4项目实战:新手入门教程
- 2024-12-20如何实现JDBC和jsp的关系?-icode9专业技术文章分享
- 2024-12-20Vue项目中实现TagsView标签栏导航的简单教程
- 2024-12-20Vue3入门教程:从零开始搭建你的第一个Vue3项目
- 2024-12-20从零开始学习vueRouter4:基础教程
- 2024-12-20Vuex4课程:新手入门到上手实战全攻略