微信小程序----最最最最最简单的日历做法
微信小程序—-最最最最最简单的日历做法
写这篇文章的时候时间是2018/8/16,该日历写法但求界面简单,实现功能,如果需要更华丽的效果或者其他界面请自行更改,8月份日历效果图:
默认从1号开始排序,第一行的星期数随月份变化。
代码:
//js
var today = new Date()
var c = parseInt(today.getFullYear() / 100)
var m = today.getMonth()+1
var d = today.getDate()
var y = today.getFullYear() - c*100
var mm = m
if(m==1||m==2){switch(m){case 1:m=13,y--;break;case 2:m=14,y--;break;}
}
while(d!=1){d--
}
var w = y + parseInt(y / 4) + parseInt(c / 4) - 2 * c + parseInt((26 * (m + 1) / 10)) + d - 1
if(w<0)
{w=(w%7+7)%7;
}
else if(w>0){w=w%7
}
var mday;
if (mm == 1 || mm == 3 || mm == 5 || mm == 7 || mm == 8 || mm == 10 || mm == 12 ){mday=31;
}
else if (mm == 4 || mm == 6 || mm == 9 || mm == 11){mday=30;
}
else if(mm==2){if (today.getFullYear() % 4 == 0 && today.getFullYear() % 100 != 0){mday=29;}else{mday=28;}
}
Page({data: {hang: [{}, {}, {}, {}, {}, {}],lie: [],week: ['日','一', '二', '三', '四', '五', '六' ]//0 1 2 3 4 5 6},onLoad: function (options) {var txt = thisvar num = 1;for (var i = 0; i < 6; i++) {for (var ii = 0; ii < 7; ii++) {if (num <= mday) {txt.setData({['lie[' + ii + '][' + i + ']']: num})}else if (num > mday) {txt.setData({['lie[' + ii + '][' + i + ']']: ''})}num++}}var jj = 0;for (var j = 0; j < 7; j++) {if (w < 7) {txt.setData({['lie[' + j + '][5]']: txt.data.week[w]})w++;}else if (w >= 7) {txt.setData({['lie[' + j + '][5]']: txt.data.week[jj]})jj++}}},
})
//2018/8/16/19:50修改
//wxml
<view class='rili'><block wx:for="{{hang}}" wx:for-item="hang" wx:for-index="hangid" wx:key="hangkey"><view class='hang'><block wx:for='{{lie}}' wx:for-item='lie' wx:for-index='lieid' wx:key='liekey'><text class='txt' wx:if="{{hangid==0}}">{{lie[hangid+5]}}</text><text class='txt' wx:if="{{hangid==1}}">{{lie[hangid-1]}}</text><text class='txt' wx:if="{{hangid==2}}">{{lie[hangid-1]}}</text><text class='txt' wx:if="{{hangid==3}}">{{lie[hangid-1]}}</text><text class='txt' wx:if="{{hangid==4}}">{{lie[hangid-1]}}</text><text class='txt' wx:if="{{hangid==5}}">{{lie[hangid-1]}}</text></block></view></block>
</view>
//wxss
.rili{width: 100%;background-color: pink;
}
.hang{width: 100%;height: 100rpx;background-color: pink;display: flex;flex-direction: row;align-items: center;justify-content: space-around;flex: 1;
}
.txt{width: 70rpx;height: 70rpx;color: #ffffff;
}
日历的实现主要运用蔡勒公式。
注:仅适用1582年(中国明朝万历十年)10月15日之后的时间。
欢迎转载,注明出处即可。喜欢的点赞
微信小程序----最最最最最简单的日历做法相关推荐
- php阅读器开发,微信小程序阅读器的简单实例开发
这篇文章主要介绍微信小程序阅读器的简单实例开发的相关资料,需要的朋友可以参考下 今天和朋友聊天说到小程序,然后看在看书,然后我们就弄了个小读书的demo,然后现在分享一下. 一.先来上图: 首先先说下 ...
- 小程序源码:仿各大APP种树微信小程序源码下载-简单快速上手
这是一款仿各大APP的种树获取水果的一款微信小程序 可以对树浇水,杀虫,修剪等等 另外还有夺宝,更多小程序推荐 支持流量主模式等等 可以进行邀请好友加快树木的成长速度 小程序源码下载地址: 小程序源码 ...
- 开发微信小程序,就是这么简单!可自动生成微信小程序源代码,配套JS SDK、接口和后台
开发微信小程序,就是这么简单!自己动手,丰衣足食! 开发微信小程序有多简单? 你只需要掌握前端开发,就可以轻松开发自己的微信小程序,实现自己的业务功能.借助果创云,无须域名.无须服务器.无须数据库, ...
- APP种树微信小程序源码下载-简单快速上手
这是一款种树获取水果的一款微信小程序 可以对树浇水,杀虫,修剪等等 另外还有夺宝,更多小程序推荐 可以进行邀请好友加快树木的成长速度 下面是小编的演示图: 小程序源码下载地址:(已更新)APP种树微信 ...
- uniapp开发微信小程序设置分包,简单易学(图解)
我们使用uniapp开发微信小程序的时候,当我们的包体积过大的时候,无法真机模拟 因为小程序单个包只支持2MB,所以这时候我们要选择去分包. 有人要问了分包难吗?分包很简单.但是 最重要的来了,分包这 ...
- 微信小程序做留言板是不是需要服务器,微信小程序怎么做个简单留言板?
首先是HTML页面,好吧,其实微信小程序的是wxml(微信ml) placeholder="请输入留言--" placeholder-class="place-input ...
- 微信小程序开发竟然这么简单?!
无处不在的小程序 自从 2017 年 1 月 9 日,张小龙在 2017 微信公开课 Pro 上发布小程序开始算起,微信小程序已经走过了三个年头.从当初的只闻其名到今天的耳濡目染,微信小程序可以说已经 ...
- 「腾讯地图」微信小程序插件:提供简单的路线多方案规划服务
上期,我们在<「腾讯视频」微信小程序插件介绍>一文中介绍了「腾讯视频」小程序插件的意义.使用场景以及使用方法. 今天我们会与大家分享一款同样优秀的小程序插件--「腾讯地图」插件,从使用场景 ...
- 微信小程序推送消息java开发_干货 | 微信小程序推送消息简单Demo
在开始前,你需要准备:注册微信小程序 一个简单的springBoot 项目 微信开发者工具 正式 微信小程序发送消息主要通过WxMaTemplateMessage 类来推送 public class ...
- 微信小程序基于云数据库简单实现帖子点赞功能。
思路: 1·用云函数或者app.js获取用户openid,在每个帖子里面like_people数组里添加点赞过该帖子的用户openid.获取帖子云数据存放到suju:[]里. 2·点击点赞按钮图标变换 ...
最新文章
- 083_html5应用程序缓存
- 【总结整理】开发说不能做怎么办
- SAP标准OK Code Values 列表
- 为什么要用MyBatis-Spring JDBC
- 1万亿次、10亿人、10亿张,科技给生活带来多少改变?
- 计算机模块的概念,用户定义类模块概念-计算机二级-Access
- jQuery 判断div是否shown
- iOS底层探索之多线程(二)—线程和锁
- 微店的Flutter混合开发组件化与工程化架构
- Mac下安装激活matlab2017b教程方法
- 大表哥有个项目,100W预算,让我顺手做了算了......
- Hybrid Blockchain Database Systems: Design and Performance(VLDB‘2022)
- Aziz 的 UiPath 工具面试经验
- 降低屏幕亮度,减缓眼疲劳 (linux/windows/firefox/android)
- Neo4j的安装与配置
- python:list能像数值一样做运算么?
- Kotin 的代理和委托
- 链接库问题:LD_LIBRARY_PATH(找不到共享库)
- 基于深度学习的无人驾驶道路检测
- BNU Training 2017.07.20 【(2+1+0.233)/11】[待补]