如何通过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 相关文章推荐
google jQuery 引用文件,jQuery 引用地址集合(jquery 1.2.6至jquery1.5.2)
Apr 24 Javascript
Chosen 基于jquery的选择框插件使用方法
May 30 Javascript
jquery入门—编写一个导航条(可伸缩)
Jan 07 Javascript
JS实现跟随鼠标闪烁转动色块的方法
Feb 26 Javascript
如何屏蔽防止别的网站嵌入框架代码
Aug 24 Javascript
jQuery zclip插件实现跨浏览器复制功能
Nov 02 Javascript
Form表单按回车自动提交表单的实现方法
Nov 18 Javascript
JS库中的Particles.js在vue上的运用案例分析
Sep 13 Javascript
使用jQuery动态设置单选框的选中效果
Dec 06 jQuery
vue中通过使用$attrs实现组件之间的数据传递功能
Sep 01 Javascript
JS轮播图的实现方法2
Aug 25 Javascript
vue3引入highlight.js进行代码高亮的方法实例
Apr 08 Vue.js
浅谈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
Nginx下配置codeigniter框架方法
2015/04/07 PHP
PHP中两个float(浮点数)比较实例分析
2015/09/27 PHP
PHP通过文件路径获取文件名的实例代码
2018/10/14 PHP
PHP PDOStatement::bindValue讲解
2019/01/30 PHP
Prototype1.5 rc2版指南最后一篇之Position
2007/01/10 Javascript
JavaScript高级程序设计 阅读笔记(二十) js错误处理
2012/08/14 Javascript
原生javascript兼容性测试实例
2013/07/01 Javascript
JavaScript和JQuery的鼠标mouse事件冒泡处理
2015/06/19 Javascript
js+html5实现可在手机上玩的拼图游戏
2015/07/17 Javascript
js获取表格的行数和列数的方法
2015/10/23 Javascript
webstorm添加vue.js支持的方法教程
2017/07/05 Javascript
IntersectionObserver实现图片懒加载的示例
2017/09/29 Javascript
layui select动态添加option的实例
2018/03/07 Javascript
Node.js应用设置安全的沙箱环境
2018/04/23 Javascript
JavaScript实现数组全排列、去重及求最大值算法示例
2018/07/30 Javascript
JS实现可视化文件上传
2018/09/08 Javascript
javascript中函数的写法实例代码详解
2018/10/28 Javascript
linux系统使用python监测系统负载脚本分享
2014/01/15 Python
python访问mysql数据库的实现方法(2则示例)
2016/01/06 Python
python正则表达式的使用
2017/06/12 Python
python实现批量图片格式转换
2020/06/16 Python
python 读写excel文件操作示例【附源码下载】
2019/06/19 Python
pandas取出重复数据的方法
2019/07/04 Python
Python sys模块常用方法解析
2020/02/20 Python
Anaconda的安装及其环境变量的配置详解
2020/04/22 Python
Bobbi Brown芭比波朗美国官网:化妆师专业彩妆保养品品牌
2016/08/18 全球购物
生产现场工艺工程师岗位职责
2013/11/28 职场文书
大学军训自我鉴定
2013/12/15 职场文书
实习鉴定范文
2013/12/19 职场文书
违反课堂纪律检讨书
2014/01/19 职场文书
集中采购方案
2014/06/10 职场文书
监考失职检讨书
2015/01/26 职场文书
八年级英语教学反思
2016/02/15 职场文书
golang 在windows中设置环境变量的操作
2021/04/29 Golang
MySQL 发生同步延迟时Seconds_Behind_Master还为0的原因
2021/06/21 MySQL
Docker安装MySql8并远程访问的实现
2022/07/07 Servers