<!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>
分享到：
相关推荐
JavaScript日历是一个常见的网页交互元素，它为用户提供了一个方便的方式来选择日期，常见于表单填写、事件安排等场景。在Web开发中，JavaScript日历组件的实现主要依赖于JavaScript语言和CSS来完成页面布局和样式...
JS的日历.支持ie,firefox，兼容
这个压缩包“js ie firefox 日历控件多多”显然包含了一系列适用于Internet Explorer（IE）、Firefox等浏览器的JavaScript日历插件或者库。下面我们将深入探讨JavaScript日历控件的相关知识点，并结合不同浏览器的...
在这个主题中，我们主要关注的是“js日历 12种js日历”，这显然是一份包含了多种不同实现方式的JavaScript日历组件集合。 1. **日历组件的基本概念** 日历组件是网页中常见的交互元素，它允许用户选择日期，通常...
data.php 包含一个价格日历生成类和 一些实例 product.php ajax产品的json格式 style 样式和js文件 说明： 此程序中js是驴妈妈上的,我做了些修改，做学习用，精简了代码和功能，只提供酒店和门票，部分提交url请...
7. **兼容性**：考虑到浏览器的多样性，编写JavaScript日历控件时需要关注跨浏览器的兼容性问题，确保在不同的浏览器（如Chrome、Firefox、Safari、Edge和IE）上都能正常工作。 在提供的文件名中，"calendar.html"...
在网页开发中，JavaScript（JS）常常用于创建交互式的用户界面，其中日历控件是一种常见且实用的功能，尤其在处理日期输入时。本资源提供了一个兼容Internet Explorer（IE）和Firefox浏览器的JS日历控件，允许用户...
总的来说，JavaScript日历插件是网页设计中不可或缺的一部分，它们通过丰富的交互和美观的界面，提升了用户的在线体验。通过深入理解并适当地运用这些工具，开发者可以创建出更加吸引人的网页应用。
### 寒羽枫JS日历控件兼容所有浏览器（包括IE8） #### 概述 在Web开发领域，实现一个跨浏览器兼容的日历插件是一项挑战性任务，尤其是在需要支持老旧浏览器如Internet Explorer 8 (IE8)时。本文将详细介绍如何对寒...
JavaScript日历控件是一种常见的网页交互元素，常用于网页表单中的日期选择，方便用户输入日期，提升用户体验。...在压缩包中的"日历js控件"文件中，应该包含了实现这些功能的源代码，你可以进一步研究和学习。
【标题】"js日历记事器js动态记事日历漂亮" 描述了一款基于JavaScript实现的日历组件，它具备美观的界面和动态记事功能。这种日历控件通常用于网页应用中，帮助用户方便地查看日期并记录相关的事件或任务。 【标签...
"支持Firefox和IE浏览器的纯js日历控件"是一个旨在兼容两种主流浏览器（Firefox和Internet Explorer）的JavaScript库，其设计灵感来源于AJAX自带的日历控件。在AJAX技术中，日历控件通常通过异步交互提供无刷新的...
"js各种日历大全"这个资源集合了多种日历插件，提供了丰富的功能，如选择月份、日期，以及显示农历和阳历等，能够满足大部分项目对日期选择的需求。以下将详细介绍其中可能包含的一些知识点： 1. **JavaScript基础*...
JavaScript（JS）日历控件是网页开发中常用的一种组件，用于展示日期选择功能，通常在表单中作为输入辅助工具出现。它们可以提供用户友好的界面，方便用户选择日期，而无需手动输入。以下是对JS日历控件的一些详细...
JavaScript日历控件是网页开发中常用的一种交互元素，它能帮助用户方便地选择日期，常见于表单输入、事件安排或时间相关的功能。在给定的资源中，包含了六种不同样式的JavaScript日历，这些日历可能具有不同的设计...
针对"js的日历改"这个项目，改造主要涉及以下几点： 1. **DOM操作的兼容性**：IE浏览器支持`attachEvent`来添加事件监听器，而非IE浏览器（如Firefox、Chrome、Opera）则使用`addEventListener`。我们需要检查并...
- `cbscalendar`、`js日历`、`calendar`、`Calendar2`：这些可能是不同的JavaScript日历库或源代码文件，每一份可能代表一个独立的日历实现。 在实际应用中，开发者可以选择适合项目需求的日历控件，或者结合这些...
JavaScript日历组件是Web开发中常见的一种交互元素，主要用于用户在网页上进行日期选择操作。在前端开发领域，尤其在构建交互式用户界面时，一个功能强大的日历组件显得尤为重要。"My97DatePicker"是一个知名的...
【标题】"js日历控件自主选择颜色" 涉及的核心技术是JavaScript日历插件的开发，尤其强调用户可以根据个人喜好自定义颜色。这样的控件在网页设计中非常常见，主要用于处理与日期相关的交互，如日期选择、预约系统、...
综上所述，这个"一个使用非常简单的js日历"项目提供了一种简便的JavaScript实现日历功能的方法，通过理解上述知识点，开发者可以快速地将日历集成到自己的项目中，并根据需要进行定制和扩展。在实际应用中，不断学习...