排期系统日历

曾经的小孩 · 发表于 2011-7-25 14:11

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

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

Javascript代码
<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 class="xingqi">
<ul>
<li>星期日</li>
<li>星期一</li>
<li>星期二</li>
<li>星期三</li>
<li>星期四</li>
<li>星期五</li>
<li>星期六</li>
</ul>
</div>
<div class="cls"></div>
<div id="da2"></div>

</div>

<input type="button" 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)); //将日期载入arr
for(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>

<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 class="xingqi">
<ul>
<li>星期日</li>
<li>星期一</li>
<li>星期二</li>
<li>星期三</li>
<li>星期四</li>
<li>星期五</li>
<li>星期六</li>
</ul>
</div>
<div class="cls"></div>
<div id="da2"></div>

</div>

<input type="button" 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)); //将日期载入arr
for(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存储原理都已经描述加图片介绍的很详细了！

大小: 13.9 KB
查看图片附件

北大青鸟 · 发表于 2011-7-25 14:11

推荐链接
【推荐】java 新手是如何获得“8K月薪”的？
年薪100万诚邀IT讲师

ksdal · 发表于 2011-7-30 10:25

让它沉下去吧！不要啦

帐号		自动登录	找回密码
密码			成为会员