<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<style>
*{margin:0 auto;padding:0;}
body{font:12px arial;text-align:center;background-color:#f1efef;}
body,p,form{margin:0;padding:0}
body,form{position:relative}
code{font:14px arial;text-align:left;}
img{border:0}
a:link {text-decoration: none;}
a:visited {text-decoration: none;}
a:hover {text-decoration: none;}
a:active {text-decoration: none;}
a{color:#999;cursor:pointer;}
a:active{color:#ddd;}
#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" id="back" value="上月" style="margin-left:100px;margin-top:20px;">
<input type="button" id="next" value="下月">
</body>
<script language="javascript">
var weekCalendar = { self:null
,hiddenday : new Date()
,d : null
,x : null
,temp : ""
,selectArray : new Array
,$ : function (id){
return document.getElementById(id);
}
,Name : function (n){
return document.getElementsByName(n);
}
,TagName: function (t){
return document.getElementByTagName(t);
}
,init : function (){
self = this;
self.d = new Date();
self.hiddenday = self.d;
self.initday(self.d);
self.$('back').addEventListener('click',self.backmonth);
self.$('next').addEventListener('click',self.nextmonth);
self.bindListener();
}
,initday : function (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(); //整月有多少天
self.temp="";
for(i=0;i<firstday;i++) self.temp+="<div name=\"day\" class=\"day\"><div name=\"dayin\" 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) self.temp+="<div name=\"day\" class=\"day\" id=\""+arr[a]+"\"><div name=\"dayin\" class=\"dayin\">"+arr[a]+"</div></div>"; //拼接显示
self.$("da2").innerHTML = self.temp; //将数据放入div中
self.temp=null;
}
,nextmonth : function (){ //下个月
self.hiddenday = new Date(self.hiddenday.getFullYear(),self.hiddenday.getMonth()+1,1);
self.initday(self.hiddenday);
self.bindListener();
}
,backmonth : function (){ //上个月
self.hiddenday = new Date(self.hiddenday.getFullYear(),self.hiddenday.getMonth()-1,1);
self.initday(self.hiddenday);
self.bindListener();
}
,test : function(){
if(!this.tag){
this.tag = true;
this.style.color="red";
}else{
this.tag = false;
this.style.color="black";
}
//this.style.color="red";
//selectArray.push(this);
//this.innerHTML.replace(/<.+?>/gim,'');
//alert();
}
,each : function (list,exec){
for(i=0;i<list.length;i++){
list[i].addEventListener('click',exec);
}
}
,bindListener: function(){ //add eventListener to list
self.each(self.Name('dayin'),self.test);
}
}
window.onload = function (){
//排期日历初始化
weekCalendar.init();
}
</script>
</html>
分享到:
相关推荐
JS的日历.支持ie,firefox,兼容
data.php 包含一个价格日历生成类和 一些实例 product.php ajax产品的json格式 style 样式和js文件 说明: 此程序中js是驴妈妈上的,我做了些修改,做学习用,精简了代码和功能,只提供酒店和门票,部分提交url请...
简单易用的javascript日历,包括一个例子。编码可以是utf-8也可以是GBK
js ie firefox 日历控件多多 搜集的一大堆
三款js日历,有很漂亮的哦!javascript 日历。很别致的
js日历控件js日历控件js日历控件js日历控件js日历控件js日历控件js日历控件js日历控件js日历控件js日历控件
js日历控件[超酷超漂亮]js日历控件[超酷超漂亮]js日历控件[超酷超漂亮]js日历控件[超酷超漂亮]js日历控件[超酷超漂亮]js日历控件[超酷超漂亮]js日历控件[超酷超漂亮]js日历控件[超酷超漂亮]js日历控件[超酷超漂亮]js...
JS 日历组件(功能很强) javascript 日历控件 日历选择空间 日期选择 强烈推荐
Calendar 日历控件 兼容IE6 兼容IE8 兼容IE9 兼容火狐 兼容谷歌
JS日历_完美兼容火狐IE等各种浏览器_calendar.js JS日历_完美兼容火狐IE等各种浏览器_calendar.js
个JS日历控件个JS日历控件个JS日历控件个JS日历控件个JS日历控件个JS日历控件个JS日历控件个JS日历控件个JS日历控件个JS日历控件个JS日历控件个JS日历控件
js日历 12种js日历 有带文本框的,有像360日历,兼容性好。 特殊声明 ,文件中有个文件 Setup.rar 是无意中上传。可以删除,360提醒是病毒,建议下载后删除。刚发现及时通报。
JS日历控件 (兼容IE firefox) 可选择时间,里面包含多个日历控件,有包含时间的,有支持firefox的。
js超好日历表js超好日历表js超好日历表js超好日历表
用js的一个日历选择框,用js的一个日历选择框用js的一个日历选择框用js的一个日历选择框
基于javascript脚本的网页日历控件,格式为2013-01-01
各种JS日历控件大全,各种JS日历控件大全,各种JS日历控件大全
js日历大全(收积几种JS日历),可以方便直接应用于项目中。
js日历选择代码,js实现日历选择,很实用的哦
非常全的日历控件,内有10+个日历,只选择月、日期,农历阳历各种显示方式的日历,收藏一份,基本能满足项目中对日期选择的各种需求