存几个JS日历代码

来源:互联网 发布:selenium python api 编辑:程序博客网 时间:2024/06/05 09:54
1.
 
 
<Script LANGUAGE="JavaScript"> var months = new Array("一", "二", "三","四", "五", "六", "七", "八", "九","十", "十一", "十二"); var daysInMonth = new Array(31, 28, 31, 30, 31, 30, 31, 31,30, 31, 30, 31); var days = new Array("日","一", "二", "三","四", "五", "六"); var classTemp; var today=new getToday(); var year=today.year; var month=today.month; var newCal; function getDays(month, year) {  if (1 == month) return ((0 == year % 4) && (0 != (year % 100))) ||(0 == year % 400) ? 29 : 28;  else return daysInMonth[month]; } function getToday() {  this.now = new Date();  this.year = this.now.getFullYear();  this.month = this.now.getMonth();  this.day = this.now.getDate(); } function Calendar() {  newCal = new Date(year,month,1);  today = new getToday();  var day = -1;  var startDay = newCal.getDay();  var endDay=getDays(newCal.getMonth(), newCal.getFullYear());  var daily = 0;  if ((today.year == newCal.getFullYear()) &&(today.month == newCal.getMonth()))  {   day = today.day;  }  var caltable = document.all.caltable.tBodies.calendar;  var intDaysInMonth =getDays(newCal.getMonth(), newCal.getFullYear());  for (var intWeek = 0; intWeek < caltable.rows.length;intWeek++)   for (var intDay = 0;intDay < caltable.rows[intWeek].cells.length;intDay++)   {    var cell = caltable.rows[intWeek].cells[intDay];    var montemp=(newCal.getMonth()+1)<10?("0"+(newCal.getMonth()+1)):(newCal.getMonth()+1);    if ((intDay == startDay) && (0 == daily)){ daily = 1;}    var daytemp=daily<10?("0"+daily):(daily);    var d="<"+newCal.getFullYear()+"-"+montemp+"-"+daytemp+">";    if(day==daily) cell.className="DayNow";    else if(intDay==6) cell.className = "DaySat";    else if (intDay==0) cell.className ="DaySun";    else cell.className="Day";    if ((daily > 0) && (daily <= intDaysInMonth))    {     cell.innerText = daily;     daily++;    } else    {     cell.className="CalendarTD";     cell.innerText = "";    }  }  document.all.year.value=year;  document.all.month.value=month+1; } function subMonth() {  if ((month-1)<0)  {   month=11;   year=year-1;  } else  {   month=month-1;  }  Calendar(); } function addMonth() {  if((month+1)>11)  {   month=0;   year=year+1;  } else  {   month=month+1;  }  Calendar(); } function setDate() {  if (document.all.month.value<1||document.all.month.value>12)  {   alert("月的有效范围在1-12之间!");   return;  }  year=Math.ceil(document.all.year.value);  month=Math.ceil(document.all.month.value-1);  Calendar(); }</Script><Script>function buttonOver(){ var obj = window.event.srcElement; obj.runtimeStyle.cssText = "background-color:#FFFFFF";// obj.className="Hover";}//欢迎来到站长特效网,我们的网址是www.zzjs.net,很好记,zz站长,js就是js特效,本站收集大量高质量js代码,还有许多广告代码下载。function buttonOut(){ var obj = window.event.srcElement; window.setTimeout(function(){obj.runtimeStyle.cssText = "";},300);}</Script><Style>Input {font-family: verdana;font-size: 9pt;text-decoration: none;background-color: #FFFFFF;height: 20px;border: 1px solid #666666;color:#000000;}.Calendar {font-family: verdana;text-decoration: none;width: 170;background-color: #C0D0E8;font-size: 9pt;border:0px dotted #1C6FA5;}.CalendarTD {font-family: verdana;font-size: 7pt;color: #000000;background-color:#f6f6f6;height: 20px;width:11%;text-align: center;}.Title {font-family: verdana;font-size: 11pt;font-weight: normal;height: 24px;text-align: center;color: #333333;text-decoration: none;background-color: #A4B9D7;border-top-width: 1px;border-right-width: 1px;border-bottom-width: 1px;border-left-width: 1px;border-bottom-style:1px;border-top-color: #999999;border-right-color: #999999;border-bottom-color: #999999;border-left-color: #999999;}.Day {font-family: verdana;font-size: 7pt;color:#243F65;background-color: #E5E9F2;height: 20px;width:11%;text-align: center;}.DaySat {font-family: verdana;font-size: 7pt;color:#FF0000;text-decoration: none;background-color:#E5E9F2;text-align: center;height: 18px;width: 12%;}.DaySun {font-family: verdana;font-size: 7pt;color: #FF0000;text-decoration: none;background-color:#E5E9F2;text-align: center;height: 18px;width: 12%;}.DayNow {font-family: verdana;font-size: 7pt;font-weight: bold;color: #000000;background-color: #FFFFFF;height: 20px;text-align: center;}.DayTitle {font-family: verdana;font-size: 9pt;color: #000000;background-color: #C0D0E8;height: 20px;width:11%;text-align: center;}.DaySatTitle {font-family: verdana;font-size: 9pt;color:#FF0000;text-decoration: none;background-color:#C0D0E8;text-align: center;height: 20px;width: 12%;}.DaySunTitle {font-family: verdana;font-size: 9pt;color: #FF0000;text-decoration: none;background-color: #C0D0E8;text-align: center;height: 20px;width: 12%;}.DayButton {font-family: Webdings;font-size: 9pt;font-weight: bold;color: #243F65;cursor:hand;text-decoration: none;}</Style><a href="<#ZC_BLOG_HOST#>">站长特效网</a>,站长必备的高质量网页特效和广告代码。zzjs.net,站长js特效。<hr><!--欢迎来到站长特效网,我们网站收集大量高质量js特效,提供许多广告代码下载,网址:www.zzjs.net,zzjs@msn.com,用.net打造靓站--><table border="0" cellpadding="0" cellspacing="1" class="Calendar" id="caltable"><thead>     <tr align="center" valign="middle">  <td colspan="7" class="Title">   <a href="javaScript:subMonth();" title="上一月" Class="DayButton">3</a> <input name="year" type="text" size="4" maxlength="4" onkeydown="if (event.keyCode==13){setDate()}" onkeyup="this.value=this.value.replace(/[^0-9]/g,'')"  onpaste="this.value=this.value.replace(/[^0-9]/g,'')"> 年 <input name="month" type="text" size="1" maxlength="2" onkeydown="if (event.keyCode==13){setDate()}" onkeyup="this.value=this.value.replace(/[^0-9]/g,'')"  onpaste="this.value=this.value.replace(/[^0-9]/g,'')"> 月 <a href="JavaScript:addMonth();" title="下一月" Class="DayButton">4</a>  </td> </tr> <tr align="center" valign="middle">  <Script LANGUAGE="JavaScript">   document.write("<TD class=DaySunTitle id=diary >" + days[0] + "</TD>");   for (var intLoop = 1; intLoop < days.length-1;intLoop++)    document.write("<TD class=DayTitle id=diary>" + days[intLoop] + "</TD>");    document.write("<TD class=DaySatTitle id=diary>" + days[intLoop] + "</TD>");  </Script> </TR></thead><TBODY border=1 cellspacing="0" cellpadding="0" ID="calendar" ALIGN=CENTER > <Script LANGUAGE="JavaScript">  for (var intWeeks = 0; intWeeks < 6; intWeeks++)  {//欢迎来到站长特效网,我们的网址是www.zzjs.net,很好记,zz站长,js就是js特效,本站收集大量高质量js代码,还有许多广告代码下载。   document.write("<TR style='cursor:hand'>");   for (var intDays = 0; intDays < days.length;intDays++) document.write("<TD class=CalendarTD onMouseover='buttonOver();' onMouseOut='buttonOut();'></TD>");   document.write("</TR>");  } </Script></TBODY></TABLE><Script  LANGUAGE="JavaScript"> Calendar();</Script>

 

 

2.  

 

<!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><title></title><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><meta http-equiv="Content-Language" content="gb2312" /><meta content="all" name="robots" /><meta name="author" content="RainoXu" /><meta name="Keywords" content=""><meta name="description" content="" /><meta content="Xhtml+CSS,ASP,网页设计" name="keywords" /><style type="text/css">*{      margin:0;      padding:0;      font:10px tahoma;}#calender{      text-align:center;      width:147px;      font-size:10px;      /*color: #27B0C1;*/      margin:12px 0 12px 6px;      border-top:1px solid #EEEEEE;      border-left:1px solid #EEEEEE;}#calender .arrow_over{      color: #FF1493;}#calender .arrow_out{      color: #FF8C00;}#calender td{      border-bottom:1px solid #EEEEEE;      border-right:1px solid #EEEEEE;      width:21px;      height:20px;      line-height:16px;      color:#666666;}#calender #cal_title{      width:147px;      background:#EFEFEF;}#calender #week td{      background: #F8F8F8;}#calender .current{      background: #AAE7E8;      display: block;      margin:2px;}#calender .notcurrent{      display: block;      margin:2px;      background:#EDEDED;}</style><script type="text/javascript"><!--document.writeln("<div id='calenderdiv' style>日历加载中...</div>");var press_tag;function changecal(action,year,month){            var strcal;      switch(action)      {            case "nextmonth":            if(month==11)            {                  month = 1;                  year = year*1 + 1;            }else{                  month = month*1 + 2;            }            strcal = "<span onmouseover=\"this.className='arrow_over'\" onmouseout=\"this.className='arrow_out'\" class='arrow_out'  onclick='calender(" + year + "," + month +")' title='下一个月' style='cursor:hand;'>> </span>";            break;      case "premonth":            if(month==0)            {                  month = 12;                  year = year*1 - 1;            }            strcal = "<span onmouseover=\"this.className='arrow_over'\" onmouseout=\"this.className='arrow_out'\" class='arrow_out' onclick='calender(" + year + "," + month +")' title='上一个月' style='cursor:hand;'> <</span>";            break;      case "nextyear":            year = year*1 + 1;            month = month*1 + 1;            strcal = "<span onmouseover=\"this.className='arrow_over'\" onmouseout=\"this.className='arrow_out'\" class='arrow_out' onclick='calender(" + year + "," + month +")' title='下一年' style='cursor:hand;'>>></span>";            break;      case "preyear":             year = year*1 - 1;            month = month*1 + 1;            strcal = "<span onmouseover=\"this.className='arrow_over'\" onmouseout=\"this.className='arrow_out'\" class='arrow_out' onclick='calender(" + year + "," + month +")' title='上一年' style='cursor:hand;'><<</span>";            break;      default:;      }      strcal = " " + strcal + " ";      return(strcal);} function calender(cyear,cmonth){            var d,d_date,d_day,d_month;      //定义每月天数数组      var monthdates = ["31","28","31","30","31","30","31","31","30","31","30","31"]            d = new Date();      d_year = d.getYear();      //获取年份      //判断闰月,把monthdates的二月改成29      if (((d_year % 4 == 0) && (d_year % 100 != 0)) || (d_year % 400 == 0)) monthdates[1] = "29";            if ((cyear != "" ) || (cmonth != ""))      {            //如果用户选择了月份和年份,则当前的时间改为用户设定            d.setYear(cyear);            d.setMonth(cmonth-1);                        d.setDate(1);      }      d_month = d.getMonth();      //获取当前是第几个月      d_year = d.getYear();      //获取年份      d_date = d.getDate();      //获取日期            //修正19XX年只显示两位的错误      if(d_year<2000){d_year = d_year + 1900}      //===========输出日历===========      var str;      str = "<table cellspacing='0' cellpadding='0' id='calender'>";      str += "<tr><td id='cal_title' colspan='7' >"      str += changecal("preyear",d_year,d_month)       str += changecal("premonth",d_year,d_month)       str += d_year + " - " + (d_month*1+1)       str += changecal("nextmonth",d_year,d_month)       str += changecal("nextyear",d_year,d_month)        str += "</td></tr>";      str += "<tr id='week'><td>Su</td><td>Mo</td><td>Tu</td><td>We</td><td>Th</td><td>Fr</td><td>Sa</td></tr>";      str += "<tr>";      var firstday,lastday,totalcounts,firstspace,lastspace,monthdays;      //需要显示的月份共有几天,可以用已定义的数组来获取      monthdays = monthdates[d.getMonth()];            //设定日期为月份中的第一天      d.setDate(1);            //需要显示的月份的第一天是星期几      firstday = d.getDay();                  //1号前面需要补足的的空单元格的数      firstspace = firstday;            //设定日期为月份的最后一天      d.setDate(monthdays);            //需要显示的月份的最后一天是星期几      lastday = d.getDay();            //最后一天后面需要空单元格数      lastspace = 6 - lastday;            //前空单元格+总天数+后空单元格,用来控制循环      totalcounts = firstspace*1 + monthdays*1 + lastspace*1;                              //count:大循环的变量;f_space:输出前空单元格的循环变量;l_space:用于输出后空单元格的循环变量      var count,flag,f_space,l_space;      //flag:前空单元格输完后令flag=1不再继续做这个小循环      flag = 0;      for(count=1;count<=totalcounts;count++)      {            //一开始flag=0,首先输出前空单元格,输完以后flag=1,以后将不再执行这个循环            if(flag==0)            {                  if(firstspace!=0)                  {                              for(f_space=1;f_space<=firstspace;f_space++)                        {                                    str += "<td> </td>";                              if(f_space!= firstspace) count++;                              }                        flag = 1;                        continue;                  }            }                                    if((count-firstspace)<=monthdays)            {                  //输出月份中的所有天数                              curday = d_year+","+(d_month*1+1)+","+(count - firstspace)+"|"                  linkday = d_year+","+(d_month*1+1)+","+(count - firstspace)                  var today = new Date();                  if( (d_year == today.getYear()) && (d_month == today.getMonth()) && ((count-firstspace) == today.getDate()) )                  {                        //将本地系统中的当前天数高亮                        str += "<td><span class='current'>" + (count - firstspace) + "</span></td>";                  }else{                        //不用高亮的部分,没有日志                        str += "<td>" + (count - firstspace) + "</td>";                  }                                    if(count%7==0)                  {                        if(count<totalcounts)                        {                              str += "</tr><tr>";                        }else{                              str += "</tr>";                        }                  }            }else{                  //如果已经输出了月份中的最后一天,就开始输出后空单元格补足                  for(l_space=1;l_space<=lastspace;l_space++)                  {                        str += "<td> </td>";                        if(l_space!= lastspace) count++;                        }                  continue;            }      }      str += "<tr><td colspan='7' style='text-indent:9px;'><a href='http://www.rainoina.com' title='访问RainoXu的小站'>www.rainoina.com</a></td></tr></table>"      document.getElementById("calenderdiv").innerHTML = "<div id='calenderdiv'>" + str + "</div>";}//调用函数calender("","")//--></script></head><body></body></html></font><a href="http://js.alixixi.com/">欢迎访问阿里西西网页特效代码站,js.alixixi.com</a>


 

 

3.

 

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>DatePicker</title><meta name="author" content="hongru.chen" /><style>.date-picker-wp {display: none;position: absolute;background: #f1f1f1;left: 40px;top: 40px;border-top: 4px solid #3879d9;}.date-picker-wp table {border: 1px solid #ddd;}.date-picker-wp td {background: #fafafa;width: 22px;height: 18px;border: 1px solid #ccc;font-size: 12px;text-align: center;}.date-picker-wp td.noborder {border: none;background: none;}.date-picker-wp td a {color: #1c93c4;text-decoration: none;}.strong {font-weight: bold}.hand {cursor: pointer; color: #3879d9}</style>  <script type="text/javascript">var DatePicker = function () {var $ = function (i) {return document.getElementById(i)},addEvent = function (o, e, f) {o.addEventListener ? o.addEventListener(e, f, false) : o.attachEvent('on'+e, function(){f.call(o)})},getPos = function (el) {for (var pos = {x:0, y:0}; el; el = el.offsetParent) {pos.x += el.offsetLeft;pos.y += el.offsetTop;}return pos;}var init = function (n, config) {window[n] = this;Date.prototype._fd = function () {var d = new Date(this); d.setDate(1); return d.getDay()};Date.prototype._fc = function () {var d1 = new Date(this), d2 = new Date(this); d1.setDate(1); d2.setDate(1); d2.setMonth(d2.getMonth()+1); return (d2-d1)/86400000;};this.n = n;this.config = config;this.D = new Date;this.el = $(config.inputId);this.el.title = this.n+'DatePicker';this.update();this.bind();}init.prototype = {update : function (y, m) {var con = [], week = ['Su','Mo','Tu','We','Th','Fr','Sa'], D = this.D, _this = this;fn = function (a, b) {return '<td title="'+_this.n+'DatePicker" class="noborder hand" onclick="'+_this.n+'.update('+a+')">'+b+'</td>'},_html = '<table cellpadding=0 cellspacing=2>';y && D.setYear(D.getFullYear() + y);m && D.setMonth(D.getMonth() + m);var year = D.getFullYear(), month = D.getMonth() + 1, date = D.getDate();for (var i=0; i<week.length; i++) con.push('<td title="'+this.n+'DatePicker" class="noborder">'+week[i]+'</td>');for (var i=0; i<D._fd(); i++ ) con.push('<td title="'+this.n+'DatePicker" class="noborder"> </td>');for (var i=0; i<D._fc(); i++ ) con.push('<td class="hand" onclick="'+this.n+'.fillInput('+year+', '+month+', '+(i+1)+')">'+(i+1)+'</td>');var toend = con.length%7;if (toend != 0) for (var i=0; i<7-toend; i++) con.push('<td class="noborder"> </td>');_html += '<tr>'+fn("-1, null", "<<")+fn("null, -1", "<")+'<td title="'+this.n+'DatePicker" colspan=3 class="strong">'+year+'/'+month+'/'+date+'</td>'+fn("null, 1", ">")+fn("1, null", ">>")+'</tr>';for (var i=0; i<con.length; i++) _html += (i==0 ? '<tr>' : i%7==0 ? '</tr><tr>' : '') + con[i] + (i == con.length-1 ? '</tr>' : '');!!this.box ? this.box.innerHTML = _html : this.createBox(_html);},fillInput : function (y, m, d) {var s = this.config.seprator || '/';this.el.value = y + s + m + s + d;this.box.style.display = 'none';},show : function () {var s = this.box.style, is = this.mask.style;s['left'] = is['left'] = getPos(this.el).x + 'px';s['top'] = is['top'] = getPos(this.el).y + this.el.offsetHeight + 'px';s['display'] = is['display'] = 'block';is['width'] = this.box.offsetWidth - 2 + 'px';is['height'] = this.box.offsetHeight - 2 + 'px';},hide : function () {this.box.style.display = 'none';this.mask.style.display = 'none';},bind : function () {var _this = this;addEvent(document, 'click', function (e) {e = e || window.event;var t = e.target || e.srcElement;if (t.title != _this.n+'DatePicker') {_this.hide()} else {_this.show()}})},createBox : function (html) {var box = this.box = document.createElement('div'), mask = this.mask = document.createElement('iframe');box.className = this.config.className || 'datepicker';mask.src = 'javascript:false';mask.frameBorder = 0;box.style.cssText = 'position:absolute;display:none;z-index:9999';mask.style.cssText = 'position:absolute;display:none;z-index:9998';box.title = this.n+'DatePicker';box.innerHTML = html;document.body.appendChild(box);document.body.appendChild(mask);return box;}}return init;}();onload = function () {new DatePicker('_DatePicker_demo', {inputId: 'date-input',className: 'date-picker-wp',seprator: '-'});new DatePicker('_demo2', {inputId: 'demo2', className: 'date-picker-wp'})}</script></head><body><input type="text" id="date-input" /><input type="text" id="demo2" /><br/><select><option>岑安</option></select></body></html>



 

原创粉丝点击