Javascript日历类和实例

最新推荐文章于 2024-05-17 14:54:19 发布

KarlLuo

最新推荐文章于 2024-05-17 14:54:19 发布

阅读量1.6k

点赞数

分类专栏： IT技术文章标签： javascript 日历 function button calendar table

本文链接：https://blog.csdn.net/lk188/article/details/4350854

版权

IT技术专栏收录该内容

54 篇文章 0 订阅

订阅专栏

我编写和调试了几天兼容性还可以给大家介绍一下类的属性和方法吧.

Calendar 类:

属性:

obj dom 对象将日历表格插入到哪个dom对象中 (必须)

title 日历星期的显示名称数组

today 下面有三个对象 yeah month 和 date 表示今天的年月日

yeah 年

month 月

stableLine 表格行数是否固定的开关布尔

table 表格的dom对象

td 表格里所有td dom对象的数组

todayDom 今天那个td的dom对象

current 本月td dom对象的数组

方法:
createElement(obj,tag,init) 创建html dom对象
obj 父dom对象 tag 标签 init 初始化对象如{'innerHTML':'abc'}

getFirstDay() 获取月份第一天的星期

getTotalDay() 获取月份的总共天数

createTable() 创建日历表格

changeDate(mode,type) 改变年或月

mode ‘next’ 下一 ‘last’ 上一或直接赋值为数字

type 布尔 true 为月 false 为年

JS日历类如下:

日历运用实例如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css">

#box table{

border:1px solid #666;

border-collapse:collapse;

text-align:center;

}

#box table th,#box table td {

border:1px #CCC solid;

padding:8px 10px;

font-family:"Arial Black", Gadget, sans-serif;

font-size:20px;

}

#box table th {

background-color:#69C;

font-weight:bold;

}

#box table .today{

background-color:#FF9;

}

#box table .others{

color:#CCC;

}

#test2 {

width:188px;

}

#cale2_chs {

border-collapse:collapse;

border-spacing:0px;

padding:0px;

margin:0px;

border:0px;

}

#box2 table {

border:#333 solid 1px;

text-align:center;

border-collapse:collapse;

}

#box2 table th{

background-color:#000;

color:#FFF;

}

#box2 table td{

padding:3px 5px;

}

.cale2_ch{

height:11px;

width:20px;

margin:0px;

padding:0px;

}

.cale2_sw{

background-color:#000;

color:#FFF;

}

</style>

<title>JS日历</title>

<script type="text/javascript">

function Calendar(obj){

  this.obj = obj;

  this.title = ['日','一','二','三','四','五','六'];

  var D = new Date();

  this.today = {'yeah':D.getFullYear(),'month':(D.getMonth()+1),'date':D.getDate()};

  this.yeah = this.today.yeah;

  this.month = this.today.month;

  this.stableLine = false;

  this.createElement = function(obj,tag,init){

var dom = document.createElement(tag);

if(init){

for (var i in init){

dom[i] = init[i];

}

}

return obj.appendChild(dom);

  }



  this.getFirstDay = function(){

return new Date(this.yeah,this.month-1,1).getDay();

  }

  this.getTotalDay = function(){

return new Date(this.yeah,this.month,0).getDate();

  }



  this.createTable = function(){

this.tr = [],this.th = [],this.td = [],this.current = [];

if(this.table){this.obj.removeChild(this.table);}

if(this.stableLine){

var line = 7;

}else{

var line = this.getFirstDay()+this.getTotalDay();

if (line > 35){line = 7;}else if(line <= 28){line = 5;}else{line = 6;}

}

this.table = this.createElement(this.obj,'table');

this.tbody = this.createElement(this.table,'tbody');

this.tr[0] = this.createElement(this.tbody,'tr');

for(var i=0;i<7;i++){

this.th[i] = this.createElement(this.tr[0],'th',{'innerHTML':this.title[i]});

}

for (var i=1,x=0;i<line;i++){

this.tr[i] = this.createElement(this.tbody,'tr');

for (var j=0;j<7;j++,x++){

this.td[x] = this.createElement(this.tr[i],'td',{'innerHTML':' '});

}

}

var cm = this.month==this.today.month&&this.yeah==this.today.yeah;

for(var i=this.getFirstDay(),x=0;i<this.getTotalDay()+this.getFirstDay();i++,x++){

var date = i-this.getFirstDay()+1;

this.current[x] = this.td[i];

this.td[i].innerHTML = date;

if (cm&&date==this.today.date){this.todayDom=this.td[i];}

}

if(typeof(this.onchange)=='function'){this.onchange();};

  }



  this.changeDate = function(mode,type){

if(type){

if(mode == 'next'){

mode = parseInt(this.month)+1;

} else if(mode == 'last'){

mode = parseInt(this.month)-1;

}

if(mode >12){

this.month = 1;

++this.yeah;

} else if(mode < 1){

this.month = 12;

--this.yeah;

}else {

this.month = mode;

}

} else {

if(mode == 'next'){

++this.yeah;

} else if(mode == 'last'){

--this.yeah;

} else {

this.yeah = mode;

}

}

this.createTable();

  }

}

function $(id){return document.getElementById(id);}

window.onload = function(){

  for(var i=minY;i<maxY;i++){

cale.createElement($('cale_y'),'option',{'innerHTML':i,'value':i});

  }

  for(var i=1;i<13;i++){

cale.createElement($('cale_m'),'option',{'innerHTML':i,'value':i});

  }

  $('cale_y').value=cale.yeah;

  $('cale_m').value=cale.month;

  cale.obj = $('box');

  cale.onchange = function(){

if(this.todayDom){this.todayDom.className = 'today'};

$('cale_y').value=this.yeah;

$('cale_m').value=this.month;

for (var i in this.current){

this.current[i].title = this.yeah+'-'+this.month+'-'+this.current[i].innerHTML;

this.current[i].onclick = function(){

alert(this.title);

};

}

  }

  cale.createTable();



  cale2.obj = $('box2');

  cale2.onchange = function(){

$('cale2_y').value=this.yeah;

$('cale2_m').value=this.month;

this.current[parseInt(mydate)-1].className = 'cale2_sw';

for (var i in this.current){

this.current[i].onclick = function(){

var trs = this.parentNode.parentNode.rows;

for (var i=0;i<trs.length;i++){

for(var j=0;j<trs[i].cells.length;j++){

trs[i].cells[j].className = '';

}

}

mydate = this.innerHTML;

this.className = 'cale2_sw'

};

}

  }

  cale2.createTable();

}

var cale = new Calendar();

cale.title = ['周日','周一','周二','周三','周四','周五','周六'];

var maxY = 2030;

var minY = 1930;

var cale2 = new Calendar();

cale2.stableLine = true;

var mydate = cale2.today.date;

</script>

</head>

<body>

<div id="demo">

<div id="box">

<input type="button" name="button1" value="上一年" οnclick="javascript:cale.changeDate('last');" />

<input type="button" name="button2" value="上一月" οnclick="javascript:cale.changeDate('last',1);" />

<select name="cale_y" id="cale_y" οnchange="javascript:cale.changeDate(this.value);"></select>

<select name="cale_m" id="cale_m" οnchange="javascript:cale.changeDate(this.value,1);"></select>

<input type="button" name="button3" value="下一月" οnclick="javascript:cale.changeDate('next',1);" />

<input type="button" name="button4" value="下一年" οnclick="javascript:cale.changeDate('next');" />

</div>

<br />

<br />

<br />

<br />

<fieldset id="test2">

  <table>

  <tr>

   <td>

   <select name="cale2_m" id="cale2_m" οnchange="javascript:cale2.changeDate(this.value,1);">

   <option value="1">一月</option>

   <option value="2">二月</option>

   <option value="3">三月</option>

   <option value="4">四月</option>

   <option value="5">五月</option>

   <option value="6">六月</option>

   <option value="7">七月</option>

   <option value="8">八月</option>

   <option value="9">九月</option>

   <option value="10">十月</option>

   <option value="11">十一月</option>

   <option value="12">十二月</option>

   </select>

   </td>

   <td><table id="cale2_chs">

   <tr>

   <td rowspan="2">

   <input name="cale2_y" type="text" id="cale2_y" size="6" maxlength="4" οnchange="javascript:cale2.changeDate(this.value);" />

   </td>

   <td><input οnclick="javascript:cale2.changeDate('last');" class="cale2_ch" type="button" title="Last" /></td>

   </tr>

   <tr>

   <td><input οnclick="javascript:cale2.changeDate('next');" class="cale2_ch" type="button" title="Next" /></td>

   </tr>

   </table>

   </td>

  </tr>

  <tr>

   <td colspan="2" id="box2"></td>

   </tr>

  <tr>

   <td> </td>

   <td><input type="button" name="button" id="button" value="应用" οnclick="javascript:alert(cale2.yeah+'-'+cale2.month+'-'+mydate);" /></td>

  </tr>

</table>

</fieldset>

<div id="box3"></div>

<script language="javascript" type="text/javascript">

new Calendar($('box3')).createTable();

</script>

</div>

</body>

</html>

KarlLuo

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Javascript日历类和实例

我编写和调试了几天兼容性还可以给大家介绍一下类的属性和方法吧.Calendar 类:属性:obj dom 对象将日历表格插入到哪个dom对象中 (必须)title 日历星期的显示名称数组today 下面有三个对象 yeah month 和 date 表示今天的年月日yeah 年month 月stableLine 表格行数是否固定的开关布尔tab
复制链接

扫一扫

专栏目录