当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 一个js写的日历（代码部分网摘）

一个js写的日历（代码部分网摘）

2019年07月30日  | 移动技术网IT编程  | 我要评论
特意贴出这段代码，因为它的代码简洁和清晰，觉得不错，供大家分享。
×××××××函数定义部分
复制代码 代码如下:

<script type="text/javascript">
var $ = function (id) {
return "string" == typeof id ? document.getelementbyid(id) : id;
};
var class = {
create: function() {
return function() {
this.initialize.apply(this, arguments);
}
}
}
var extend = function(destination, source) {
for (var property in source) {
destination[property] = source[property];
}
return destination;
}
var calendar = class.create();
calendar.prototype = {
initialize: function(container, options) {
this.container = $(container);//容器(table结构)
this.days = [];//日期对象列表
this.setoptions(options);
this.year = this.options.year || new date().getfullyear();
this.month = this.options.month || new date().getmonth() + 1;
this.selectday = this.options.selectday ? new date(this.options.selectday) : null;
this.onselectday = this.options.onselectday;
this.ontoday = this.options.ontoday;
this.onfinish = this.options.onfinish;
this.draw();
},
//设置默认属性
setoptions: function(options) {
this.options = {//默认值
year: 0,//显示年
month: 0,//显示月
selectday: null,//选择日期
onselectday: function(){},//在选择日期触发
ontoday: function(){},//在当天日期触发
onfinish: function(){}//日历画完后触发
};
extend(this.options, options || {});
},
//当前月
nowmonth: function() {
this.predraw(new date());
},
//上一月
premonth: function() {
this.predraw(new date(this.year, this.month - 2, 1));
},
//下一月
nextmonth: function() {
this.predraw(new date(this.year, this.month, 1));
},
//上一年
preyear: function() {
this.predraw(new date(this.year - 1, this.month - 1, 1));
},
//下一年
nextyear: function() {
this.predraw(new date(this.year + 1, this.month - 1, 1));
},
//根据日期画日历
predraw: function(date) {
//再设置属性
this.year = date.getfullyear(); this.month = date.getmonth() + 1;
//重新画日历
this.draw();
},
//画日历
draw: function() {
//用来保存日期列表
var arr = [];
//用当月第一天在一周中的日期值作为当月离第一天的天数
for(var i = 1, firstday = new date(this.year, this.month - 1, 1).getday(); i <= firstday; i++){ arr.push(0); }
//用当月最后一天在一个月中的日期值作为当月的天数
for(var i = 1, monthday = new date(this.year, this.month, 0).getdate(); i <= monthday; i++){ arr.push(i); }
//清空原来的日期对象列表
this.days = [];
//插入日期
var frag = document.createdocumentfragment();
while(arr.length){
//每个星期插入一个tr
var row = document.createelement("tr");
//每个星期有7天
for(var i = 1; i <= 7; i++){
var cell = document.createelement("td"); cell.innerhtml = " ";
if(arr.length){
var d = arr.shift();
if(d){
cell.innerhtml = d;
this.days[d] = cell;
var on = new date(this.year, this.month - 1, d);
//判断是否今日
this.issame(on, new date()) && this.ontoday(cell);
//判断是否选择日期
this.selectday && this.issame(on, this.selectday) && this.onselectday(cell);
}
}
row.appendchild(cell);
}
frag.appendchild(row);
}
//先清空内容再插入(ie的table不能用innerhtml)
while(this.container.haschildnodes()){ this.container.removechild(this.container.firstchild); }
this.container.appendchild(frag);
//附加程序
this.onfinish();
},
//判断是否同一日
issame: function(d1, d2) {
return (d1.getfullyear() == d2.getfullyear() && d1.getmonth() == d2.getmonth() && d1.getdate() == d2.getdate());
}
}
</script>

××××××××样式表的定义
复制代码 代码如下:

<style type="text/css">
.calendar {
font-family:verdana;
font-size:12px;
background-color:#e0ecf9;
text-align:center;
width:400px;
height:180px;
padding:10px;
line-height:1.5em;
}
.calendar a{
color:#1e5494;
}
.calendar table{
width:100%;
border:0;
}
.calendar table thead{color:#acacac;}
.calendar table td {
font-size: 11px;
padding:1px;
}
#idcalendarpre{
cursor:pointer;
float:left;
padding-right:5px;
}
#idcalendarnext{
cursor:pointer;
float:right;
padding-right:5px;
}
#idcalendar td.ontoday {
font-weight:bold;
color:#c60;
}
#idcalendar td.onselect {
font-weight:bold;
}
#buttonposition{
margin-left: 10%;
}
</style>

***********下面是应用的主体部分
复制代码 代码如下:

<div class="calendar">
<div id="idcalendarpre"><<</div>
<div id="idcalendarnext">>></div>
<span id="idcalendaryear"></span>年 <span id="idcalendarmonth"></span>月
<table cellspacing="0">
<thead>
<tr>
<td>日</td>
<td>一</td>
<td>二</td>
<td>三</td>
<td>四</td>
<td>五</td>
<td>六</td>
</tr>
</thead>
<tbody id="idcalendar">
</tbody>
</table>
</div>
<div id="buttonposition" ><!-- 通过id获取样式 -->
<input id="idcalendarpreyear" type="button" class="bt" value="上一年" />
<input id="idcalendarnow" type="button" class="bt" value="当前月" />
<input id="idcalendarnextyear" type="button" class="bt" value="下一年" />
</div>
<script language="javascript">
var cale = new calendar("idcalendar", {
ontoday: function(o){ o.classname = "ontoday"; },
onfinish: function(){
$("idcalendaryear").innerhtml = this.year; $("idcalendarmonth").innerhtml = this.month;
}
});
$("idcalendarpre").onclick = function(){ cale.premonth(); }
$("idcalendarnext").onclick = function(){ cale.nextmonth(); }
$("idcalendarpreyear").onclick = function(){ cale.preyear(); }
$("idcalendarnextyear").onclick = function(){ cale.nextyear(); }
$("idcalendarnow").onclick = function(){ cale.nowmonth(); }
</script>
</div>

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网