首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

排期系统年历

2012-10-10 
排期系统日历下面的代码算是个初级的排期日历,更多的东西(比如点击事件,循环赋值,翻页保留原始数据等)就根

排期系统日历

下面的代码算是个初级的排期日历,更多的东西(比如点击事件,循环赋值,翻页保留原始数据等)就根据自己的需求自己往里面添加好了!

个人感觉日历的JS代码已经比较简易了,曾经见过一个哥们的代码只有10几行实现了一个日历的效果,没办法... 谁让咱需要翻页呢!只能这么弄了!
对于闰月等,完全没有必要自己去判断!扔给浏览器JS自己去做最好了~ 毕竟咱们再怎么想的周全也没有必要再去做轮子了!
对于JS又回到了痛苦的状态了~~ 本来想写的更好的... 不过开发就是要求效率第一的,以后有想法了在对这个进行更新了!

<html><style>body{ padding:0px; margin:0px;}#da{border:1px solid #999; border-right:none; width:700px; margin-left:100px; margin-top:50px; overflow:hidden; border-top:none; border-bottom:none;}ul,li{ padding:0px; overflow:0px; margin:0px; list-style-type:none;}.xingqi{ width:700px; overflow:hidden; }.xingqi li{border-bottom:1px solid #999;float:left;width:98px; overflow:hidden; border-right:1px solid #999; border-top:1px solid #999; text-align:center;}#da2 .day{width:98px;height:50px;float:left; border-bottom:1px solid #999; border-right:1px solid #999;}#da2 .dayin{width:100%;height:100%; text-align:center; }#button-div{display:none;}.cls{clear:both;}</style><body><div id="button-div"><input type="button" id="button" value="点我"></div><div id="da"><div onClick="backmonth()" value="上月" style="margin-left:100px;margin-top:20px;"><input type="button" onClick="nextmonth()" value="下月"><input type="button" onClick="alert(hiddenday.getFullYear()+'年'+(parseInt(hiddenday.getMonth())+1)+'月')" value="hiddenday"></body><script>var hiddenday = new Date();//隐藏月份var d,x,temp="";function $(id){return document.getElementById(id);}window.onload =function(){var d = new Date();window.hiddenday = d;//变更日期需存入隐藏变量中,在上下月调整中使用initday(d);}function initday(day){var d1 = new Date(day.getFullYear(),day.getMonth(),1);var d2 = new Date(day.getFullYear(),day.getMonth()+1,0);var firstday = new Date(day.getFullYear(),day.getMonth(),1).getDay();var year = d2.getFullYear();//当前年var month = parseInt(d2.getMonth())+1;//当前月份month = month<10?'0'+month:month;var countDay = 1;//日期从1计数var dayofmonth = d2.getDate();//整月有多少天temp="";for(i=0;i<firstday;i++)temp+="<div class="day"><div class="dayin"></div></div>";var arr = new Array();for(;countDay<=dayofmonth;countDay++)arr.push(year+"-"+month+"-"+(countDay<10?'0'+countDay:countDay));//将日期载入arrfor(a in arr)temp+="<div class="day" id=""+arr[a]+""><div class="dayin">"+arr[a]+"</div></div>";//拼接显示$("da2").innerHTML = temp;//将数据放入div中temp=null;}//下个月function nextmonth(){hiddenday = new Date(hiddenday.getFullYear(),hiddenday.getMonth()+1,1);initday(hiddenday);}//上个月function backmonth(){hiddenday = new Date(hiddenday.getFullYear(),hiddenday.getMonth()-1,1);initday(hiddenday);}</script></html>




代码是精简的,也就是第一版的,关键部分的代码都已经注释,后面图片里面保存的就是排期系统中需要对翻页后数据进行保存的结果,还有点击修改时间!当然这里只需要对小时进行操作就没有必要更多的输入框了!上面图片中下方的数组是针对翻页等进行数据保存以及选取时间范围和是否选中的结果进行存储!最后再将数组插入form表单中隐藏提交就可以了!

以上算是V2的设计,后续东西再到有需求的时候再进行更新了!基本的原型和JS存储原理都已经描述加图片介绍的很详细了! 1 楼 yzsunlight 2011-06-12   兄弟别走弯路  jquery.weekcalendar 插件已经有这个功能了 2 楼 happysoul 2011-06-13   yzsunlight 写道兄弟别走弯路  jquery.weekcalendar 插件已经有这个功能了
感谢提醒,有现成的是好,不过需求不同没法直接用啊!
我要的时间不能有重叠,所以类似的东西只能忍痛放弃了~
很多类似的日程表功能都很完善,不过强大的不一定是正确的,适合的才是最好的!
很多东西都需要定制化的,如果用别人的东西,不仅需要花很多时间去熟悉,还是依旧需要花大量的时间去改造成自己所需要的样子,这样总的弄下来花费的时间精力和自己开发一个区别就不大了!

热点排行