如何通过JS实现日历简单算法


Posted in Javascript onOctober 14, 2020

最近有用到日历可需要编辑文本的日历,为了绑定数据的方便,所以用js写了一套日历,其实思想也是很简单。实现步骤如下:

1、首先取得处理月的总天数

js不提供此参数,我们需要计算。考虑到闰年问题会影响二月份的天数,我们先编写一个判断闰年的自编函数:

function is_leap(year) {
return (year%100==0?res=(year%400==0?1:0):res=(year%4==0?1:0));
}

2、接着定义一个包含十二个月在内的月份总天数的数组:

m_days=new Array(31,28+is_leap(ynow),31,30,31,31,30,31,30,31,30,31);

3、m_days这个数组里,二月份的天数已经加入闰年的信息:

28+is_leap(ynow) 。数组元素从0开始,正好对应于JS提供的Date函数提供的getMonth返回值,即0表示一月,1表示二月,2表示三月,依此类推。

这样,各月总数可以这样取得:m_days[x]。其中,x为0至11的自然数。

4、计算处理月第一天是星期几

可以使用Date函数的getDay取得,返回的值从0到6,0表示星期一,1表示星期二,2表示星期三,其余依此类推。代码如下(假设要处理的时间为2008年3月):

n1str=new Date(2008,3,1);
firstday=n1str.getDay();

有了月总天数和该月第一天是星期几这两个已知条件,就可以解决表格所需行数问题:(当前月天数+第一天是星期几的数值)除以七。表格函数需要整数,因此,我们使用Math.ceil来处理:

tr_str=Math.ceil((m_days[mnow] + firstday)/7);

表格中的tr标签实际上代表表格的行,因此变量tr_str是我们往下写表格的重要依据。

5、打印日历表格

可以使用两个for语句嵌套起来实现:外层for语句写行,内层for语句写单元格。

for(i=0;i<tr_str;i++) { //表格的行
for(k=0;k<7;k++) { //表格每行的单元格


idx=i*7+k; //单元格自然序列号


date_str=idx-firstday+1; //计算日期


(date_str<=0 || date_str>m_days[mnow]) ? date_str=" " : date_str=idx-firstday+1; //过滤无效日期(小于等于零的、大于月总天数的)


$(".date-info .date").last().append("<td>" + date_str + "</td>");

}
}

单元格的自然序号是否代表有效日期非常关键,为此必须加入一个过滤机制:仅打印有效的日期。有效的日期大于0小于小于等于处理月的总天数。

6、上一个月与下一个月

if(mnow<=0){
mnow=11;

ynow=ynow-1;
}else{

mnow--;
}
 
if(mnow>=11){

mnow=0;

ynow=ynow+1;
}else{

mnow++;
}

获取上一个月时,到1月份需注意;获取下一个月时,到12月份时要注意。

渲染时,需要先移除旧的日历,再添加新的日历。

var nstr = new Date();
var ynow = nstr.getFullYear();
var mnow = nstr.getMonth();
var dnow = nstr.getDate();
var mnow_real = mnow;
calendar(nstr,ynow,mnow,dnow);
monDetail(ynow,mnow_real);
 
function monDetail(ynow,mnow){
 mnow_real = mnow+1;
 $(".month-detail").html(ynow+"-"+ mnow_real); //显示当前年月
}
 
function is_leap(year) { //判断是否为闰年
 return (year%100==0?res=(year%400==0?1:0):res=(year%4==0?1:0));
}
 
function preMonth(){ //上一个月
 console.log(mnow);
 if(mnow<=0){
 mnow=11;
 ynow=ynow-1;
 }else{
 mnow--;
 }
 calendar(nstr,ynow,mnow,dnow);
 monDetail(ynow,mnow);
}
 
function nextMonth(){ //下一个月
 
 if(mnow>=11){
 mnow=0;
 ynow=ynow+1;
 }else{
 mnow++;
 }
 calendar(nstr,ynow,mnow,dnow);
 monDetail(ynow,mnow);
 
}
 
function calendar(nstr,ynow,mnow,dnow){
 $(".date-info tr.date").remove(); /改变月份时,先移除旧的日期
 var nlstr = new Date(ynow,mnow,1); //当月第一天
 var firstday = nlstr.getDay(); //第一天星期几
 
 var m_days=new Array(31,28+is_leap(ynow),31,30,31,31,30,31,30,31,30,31); //每个月的天数
 
 var tr_str=Math.ceil((m_days[mnow] + firstday)/7); //当前月天数+第一天是星期几的数值 获得 表格行数
 var i,k,idx,date_str;
 for(i=0;i<tr_str;i++) { //表格的行
 $(".date-info tbody").append("<tr></tr>");
 for(k=0;k<7;k++) { //表格每行的单元格
 idx=i*7+k; //单元格自然序列号
 date_str=idx-firstday+1; //计算日期
 (date_str<=0 || date_str>m_days[mnow]) ? date_str=" " : date_str=idx-firstday+1; //过滤无效日期(小于等于零的、大于月总天数的)
 $(".date-info .date").last().append("<td>" + date_str + "</td>");
 }
 
 }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript+css 网页每次加载不同样式的实现方法
Dec 27 Javascript
javascript使用中为什么10..toString()正常而10.toString()出错呢
Jan 11 Javascript
js 获取(接收)地址栏参数值的方法
Apr 01 Javascript
Query中click(),bind(),live(),delegate()的区别
Nov 19 Javascript
jquery插件冲突(jquery.noconflict)解决方法分享
Mar 20 Javascript
JavaScript实现找出字符串中第一个不重复的字符
Sep 03 Javascript
js打造数组转json函数
Jan 14 Javascript
ztree获取选中节点时不能进入可视区域出现BUG如何解决
Dec 03 Javascript
jQuery简单实现title提示效果示例
Aug 01 Javascript
简单的渐变轮播插件
Jan 12 Javascript
详解如何探测小程序返回到webview页面
May 14 Javascript
微信内置开发 iOS修改键盘换行为搜索的解决方案
Nov 06 Javascript
浅谈js数组splice删除某个元素爬坑
Oct 14 #Javascript
如何使用JS console.log()技巧提高工作效率
Oct 14 #Javascript
JavaScript Blob对象原理及用法详解
Oct 14 #Javascript
基于javascript原生判断DOM是否加载完毕
Oct 14 #Javascript
JavaScript常用进制转换及位运算实例解析
Oct 14 #Javascript
Vue实现鼠标经过文字显示悬浮框效果的示例代码
Oct 14 #Javascript
JavaScript本地储存:localStorage、sessionStorage、cookie的使用
Oct 13 #Javascript
You might like
php学习之运算符相关概念
2011/06/09 PHP
php读取文件内容的几种方法详解
2013/06/26 PHP
PHP语法自动检查的Vim插件
2014/08/11 PHP
php异步多线程swoole用法实例
2014/11/14 PHP
Javascript实现div层渐隐效果的方法
2015/05/30 Javascript
jQuery实现仿QQ空间装扮预览图片的鼠标提示效果代码
2015/10/30 Javascript
JavaScript继承学习笔记【新手必看】
2016/05/10 Javascript
概述jQuery的元素筛选
2016/11/23 Javascript
利用js+css+html实现固定table的列头不动
2016/12/08 Javascript
Bootstrap php制作动态分页标签
2016/12/23 Javascript
微信小程序实现页面跳转传值以及获取值的方法分析
2017/12/18 Javascript
详解redis在nodejs中的应用
2018/05/02 NodeJs
浅谈Angular 观察者模式理解
2018/11/01 Javascript
JS实现指定区域的全屏显示功能示例
2019/04/25 Javascript
mock.js模拟前后台交互
2019/07/25 Javascript
用Node写一条配置环境的指令
2019/11/14 Javascript
JavaScript中的this/call/apply/bind的使用及区别
2020/03/06 Javascript
vue.js实现双击放大预览功能
2020/06/23 Javascript
Python 爬虫模拟登陆知乎
2016/09/23 Python
Python变量和字符串详解
2017/04/29 Python
Python简单计算数组元素平均值的方法示例
2017/12/26 Python
python机器人行走步数问题的解决
2018/01/29 Python
python-django中的APPEND_SLASH实现方法
2019/06/21 Python
python读csv文件时指定行为表头或无表头的方法
2019/06/26 Python
python之openpyxl模块的安装和基本用法(excel管理)
2021/02/03 Python
匡威荷兰官方网站:Converse荷兰
2018/10/24 全球购物
Ray-Ban雷朋奥地利官网:全球领先的太阳眼镜品牌
2020/10/12 全球购物
Servlet的实例是在生命周期什么时候创建的?配置servlet最重要的是什么?
2012/05/30 面试题
车间调度岗位职责
2013/11/30 职场文书
拾金不昧的表扬信
2014/01/16 职场文书
应用英语专业自荐信
2014/01/26 职场文书
教师党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
2015年“七七卢沟桥事变”纪念活动总结
2015/03/24 职场文书
计划生育责任书
2015/05/09 职场文书
2015年村级财务管理制度
2015/08/04 职场文书
DIY胆机必读:各国电子管评价
2022/04/06 无线电