javascript中日期对象应用之简易日历实现

前面的话

简易日历作为爪哇岛描述语言中日期对象的常见应用，用途较广泛，本文将详细说明简易日历的实现思路。

效果演示

超文本标记语言说明使用类型=数字的两个投入分别作为年和月的输入控件，这样在高级浏览器下自带调节按钮按照周日到周一的顺序进行星期的排列

div class=' box ' header class=' control ' input id=' conYear ' class=' con-in ' type=' number ' min=' 1900 ' max=' 2100 ' step=' 1 '/input id=' con month ' class=' con-in ' type=' number ' min=' 1 ' max=' 12 ' step=' 1 '//header div class=' DateBox ' header class=' week ' div class=' week-in '周日div类=周入周一div类=周入周二div类=周入周三div类=周入周四div类=周入周五div类=周入周六/div/header section class=' day box ' id=' day box ' div class=' day ' id=' day 1 ' 1/div class=' day ' 2/div class=' day ' 3/div class=' day ' 4/div class=' day ' 5/div class=' day ' 6/div class=' day ' 7/div class=' day ' 8/div class=' day ' 9/div class=' day ' 10/div class=' day ' 11/div class说明对于简易日历的实现，首先确定日历中class='day '的差异的排列方式为浮动。这样可以通过改变第一天差异的位置，来实现所有同级差异都可以跟随移动的效果

正文{ margin : 0；}输入{ border : none padd : 0；}.盒子{宽度： 354pxmargin: 30px自动0;}.dateBox { height : 300 pxborder : 2px纯黑；} .周{ overflow:隐藏；边框-底部： 1px纯黑；线高： 49px}.周入{ height: 49px向左浮动：宽度： 50px文本对齐：中心；}.dayBox{ overflow:隐藏；}.第{ float:天离开；高度： 50px宽度： 50pxfont:20px/50px '微软雅黑；文本对齐：中心；}.控制{ overflow:隐藏；}.con-in { height : 50px；向左浮动：宽度： 100像素；文本对齐：中心；font: 20px/50px '微软雅黑；}JS说明简易日历的射流研究…逻辑总共需要5个实现：【1】需要获取当月的天数，获取当月第一天、第30天、第31天是周几【2】根据当月第一天的星期，改变第一天的左边距值，移动第一天到对应的位置；由于浮动的关系，其余天也会跟着移动到对应的位置【3】根据当月的天数，隐藏多余的天；当然，隐藏之前要先显示在其他月份可能被隐藏的天【4】如果当月30日是周日，则会新占一行。这时通过改变30日这天的边缘值将其移动到第一行（若31日可能会新占一行，也做相似处理)【5】载入页面后，获取当前的年和月，显示当月日历；当改变年或月时，获取改变后的值，更新日历

//准备：获取当前样式函数getCSS(obj，style){ if(window。getcomputed style){返回getcomputed style(obj)[style]；}返回物体。current style[style]；}//实现一：获取当月的天数，及当月第一天、第30日、第31日是星期几函数get_data(年、月){ var result={ }；var d=新日期();//如果是2月如果(月==2){ //如果是闰年if(年份% 4===0年份% 100!==0)| |年份% 400===0){结果。天数=29；//如果是平年} else { result.days=28} //如果是第4、6、9、11月} else if(month==4 | | month==6 | | month==9 | | month==11){ result。天数=30天；} else { result.days=31//当月第31天是星期几结果。第31天一周=d . getday(d .设置整年(年，月-1,31));} //当月第一天是星期几结果。第1天一周=d . getday(d .设置整年(年，月-1,1));如果（月！=2){ //当月第30天是星期几结果。第30天一周=d . getday(d .设置整年(年，月-1,30));}返回结果；}//实现二：根据当月第一天的星期x，设置第一天的左边距=宽度*x，使其对应到正确的星期位置上函数move_day1(年，月){ var week1=get_data(年，月).第1天工作日1。风格。左边距=第1周% 7 * Parsent(GetCSS(第1天，“宽度”)“px”；}//实现三：根据当月的天数，来隐藏多余的天数。当然首先要先显示在其他月份被隐藏的天数函数隐藏天数(年、月){ //恢复其他月份可能隐藏的天数for(var I=28；i31I){ daybox。孩子[我]。风格。display=' block} //隐藏当月多余的天数var days=get_data(年、月)。天数；对于(var i=天数；i31I){ DayBox。孩子[我]。风格。显示='无'；}};//实现四：如果当月30日或31日是星期日，则会新占一行，通过设置上边距把新占一行的天移动到第一行函数move_day30(年、月){ //如果当月30日是星期日if(get_data(年，月).第30天一周===0){第30天。风格。页边距top=parsent(getCSS(day 30，' height ')*(-5)' px '；第31天。风格。上边距=parsent(GetCSS(day 31，' height ')*(-5)' px '；第31天。风格。左边距=GetCSS(第31天，“宽度”)；返回；} else {第30天。风格。页边距顶部=第31天。风格。页边距顶部=第31天。风格。边距ft=' 0} //如果当月31日是星期日if(get_data(年，月).第31天一周===0){第31天。风格。上边距=parsent(getCSS(day 31，' height ')*(-5)' px '；} else {第31天。风格。marginTop=' 0}}//实现五：当载入页面时，获取当前年和月，显示当月日历；当改变年或月时，获取改变后的年和月，更新当月日历var year=conYear.value=new Date().getFullYear()；var month=conMonth.value=新日期()。getMonth()1；move_day1(年、月);隐藏天数(年、月);move_day30(年、月);con年。onchange=con月。onchange=function(){ var year=con year。价值；var month=conMonth.valueif(年份1900 | |年份2100){ year=con year。值=新日期().getFullYear()；} if(第1个月| |第12个月){ month=con month。值=新日期().getMonth()1；} move_day1(年、月);隐藏天数(年、月);move_day30(年、月);}源码演示

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。