您现在的位置是：网站首页> 编程资料编程资料
小程序实现日历效果_javascript技巧_
2023-05-24
383人已围观
简介 小程序实现日历效果_javascript技巧_
本文实例为大家分享了小程序实现日历效果的具体代码，供大家参考，具体内容如下
项目中需要做一个日历,最终效果如下:
日历实现是可以点击日期左右箭头和弹窗选择日期,下面上代码:
html:
{{teacherName}} 老师我的课表 高思校历 {{cur_year}}年{{cur_month}}月 今天 {{item}} {{item.day}} ● {{item.dtDateSect}} {{item.title}} {{item.sAreaName}} {{item.sRoomName}}第{{item.nLessonNo}}讲 ● 今日无课程 -- {{item}} {{item}} {{teacherName}} 录入进考门 生成成绩单 生成任务卡 转发群打卡 {{item.txt}}
css:
@import "../../utils/public.wxss"; page{ height: 100%; } .container{ padding: 0; height: 100%; overflow:hidden; } .flex{ display: flex; } /*主体内容*/ .wrap{ position: relative; width: 100%; height: 100%; background: #fafafa; box-sizing: border-box; } .wrap .teacherInfo{ width: 100%; height: 110rpx; padding: 0 30rpx 0 48rpx; background: #fff; justify-content: space-between; align-items: center; font-size: 34rpx; color:#666; box-sizing: border-box; } .wrap .teacherInfo text{ font-size: 46rpx; color: #1FB923; } .wrap .teacherInfo image{ width: 49rpx; height: 28rpx; padding: 20rpx 0 20rpx 20rpx; } .wrap .tab{ width: 100%; } .wrap .tab .tabTitle .titleItem{ width: 50%; font-size: 26rpx; text-align: center; padding: 10px 0; border-bottom: 1px solid #1FB923; position: relative; display: inline-block; color: #979797; overflow-y: scroll; } .wrap .tab .tabTitle .titleActive{ color: #32343d; background: #f1f1f1; } .wrap .tab .tabTitle .titleItem .arrow{ border: 4px solid #1FB923; border-top-color: transparent; border-left-color: transparent; border-right-color: transparent; width: 0; height: 0; position: absolute; left: 50%; bottom: 0; margin-left: -4px; } .wrap .tab .tabBody{ width: 200%; position: relative; } .wrap .tab .tabBodyWrap{ width: 100%; position: absolute; left: 0; top: 0; } .wrap .tab .tabBody .tabBodyItem{ width: 50%; flex-direction: row; } .wrap .tab .tabBody .tabBodyItem .checkDate{ position: relative; width: 100%; height: 44px; padding-top: 19px; text-align: center; box-sizing: border-box; } .wrap .tab .tabBody .tabBodyItem .checkDateWrap{ position: relative; width: 26%; text-align: center; margin-left: 38%; box-sizing: border-box; } .wrap .tab .tabBody .tabBodyItem .checkDate .date{ width: 100%; height: 100%; font-size: 24rpx; color: #888; } .wrap .tab .tabBody .tabBodyItem .checkDate .leftArrow{ border: 12rpx solid #838383; border-top-color: transparent; border-left-color: transparent; border-bottom-color: transparent; width: 0; height: 0; position: absolute; left: -20px; top: 50%; margin-top: -6px; } .wrap .tab .tabBody .tabBodyItem .checkDate .rightArrow{ border: 12rpx solid #838383; border-top-color: transparent; border-right-color: transparent; border-bottom-color: transparent; width: 0; height: 0; position: absolute; right: -20px; top: 50%; margin-top: -6px; } .wrap .tab .tabBody .tabBodyItem .checkDate .bottomArrow{ border: 10rpx solid #838383; border-left-color: transparent; border-right-color: transparent; border-bottom-color: transparent; width: 0; height: 0; position: absolute; left: 50%; top:18px; margin-left: -6px; } .wrap .tab .tabBody .tabBodyItem .checkDate .today{ font-size: 22rpx; position: absolute; right: 30px; top: 50%; margin-top: -10rpx; color: #46b52e; background: #fff; } .wrap .tab .tabBody .tabBodyItem .month{ width: 100%; padding: 0 30rpx; padding-bottom: 20px; box-shadow: 0 1px 1px #eee; box-sizing: border-box; background: #fff; } .wrap .tab .tabBody .tabBodyItem .month .monthTitle{ padding: 14rpx 0; font-size: 24rpx; border-bottom: 1px solid #e5e5e5; } .wrap .tab .tabBody .tabBodyItem .month .monthBody{ flex-wrap: wrap; padding-top: 36rpx; font-size: 24rpx; }
点击排行
本栏推荐
