一款网友自编简单的日历js代码特效

稿源：互联网 2018-09-03 02:08:43 点击： 20199 撤稿纠错

网友自编写的简单日历代码特效，供新手参考学习。调用：new Calendar("calTable","date","selectYear","selectMonth",2000,2015); 前四个参数都是一些ID，最后两个，前一个是日历的起始年份，后一个是日历的结束年份，若不写，默认当年为结束年份

以下讨论的是和日历相关的一款网友自编简单的日历js代码特效教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!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" />
<title>日历js代码特效 by js.alixixi.com</title>
<style type="text/css">
*{ margin:0; padding:0;}
.red{ color:red;}
.date{ cursor:pointer;}
.today{ background:#F90; font-weight:bold;cursor:pointer;}
#calendar{ width:260px; margin:50px auto; }
#date{ text-align:center; border:1px #ccc solid; border-bottom:0;}  
#date a{ display:inline-block; width:18px; height:20px; background-position:center -20px; vertical-align:middle; cursor:pointer;}
#date #selectDate{ width:120px;display:inline-block;}
#preYear{ background:url(http://d.hiphotos.baidu.com/album/s%3D900%3Bq%3D90/sign=ad9b3be5fdfaaf5180e38dbfbc6fe5d3/728da9773912b31bd3d15eea8618367adbb4e1b0.jpg);}
#preMonth{ background:url(http://f.hiphotos.baidu.com/album/s%3D900%3Bq%3D90/sign=f73776510cf431adb8d24f397b0ddd92/43a7d933c895d143e8cb77e073f082025baf07b7.jpg);}
#nextMonth{ background:url(http://g.hiphotos.baidu.com/album/s%3D900%3Bq%3D90/sign=f0feb6cb5343fbf2c12caa238045bbbd/80cb39dbb6fd5266e6b4afd7ab18972bd5073651.jpg);}
#nextYear{ background:url(http://d.hiphotos.baidu.com/album/s%3D900%3Bq%3D90/sign=09074fa3352ac65c63056a73cbc9c32c/ac6eddc451da81cb0a5b100e5266d016082431b7.jpg);}
#calTable{ width:100%; border-collapse:collapse;}
#calTable th,#calTable td{ width:30px; height:20px; border:1px #ccc solid; text-align:center;}
#calTable tbody{ font-family:Georgia, "Times New Roman", Times, serif;}
</style>
</head>

<body>
<div id="calendar">
 <div id="date">
     <a id="preMonth" title="上一年"></a>
        <a id="preYear" title="上一月"></a>
        <span id="selectDate">
            <select id="selectYear"> 
            </select>
            <select id="selectMonth">
                <option value="1">1月</option>
                <option value="2">2月</option>
                <option value="3">3月</option>
                <option value="4">4月</option>
                <option value="5">5月</option>
                <option value="6">6月</option>
                <option value="7">7月</option>
                <option value="8">8月</option>
                <option value="9">9月</option>
                <option value="10">10月</option>
                <option value="11">11月</option>
                <option value="12">12月</option>
            </select>
        </span>
        <a id="nextYear" title="下一月"></a>
        <a id="nextMonth" title="下一年"></a>
    </div>
    <table id="calTable">
     <thead>
            <tr>
                <th class="red">日</th>
                <th>一</th>
                <th>二</th>
                <th>三</th>
                <th>四</th>
                <th>五</th>
                <th class="red">六</th>
            </tr>
        </thead>
        <tbody>
         <tr>
             <td></td><td></td><td></td><td></td><td></td><td></td><td></td>
            </tr>
            <tr>
             <td></td><td></td><td></td><td></td><td></td><td></td><td></td>
            </tr>
            <tr>
             <td></td><td></td><td></td><td></td><td></td><td></td><td></td>
            </tr>
            <tr>
             <td></td><td></td><td></td><td></td><td></td><td></td><td></td>
            </tr>
            <tr>
             <td></td><td></td><td></td><td></td><td></td><td></td><td></td>
            </tr>
            <tr>
             <td></td><td></td><td></td><td></td><td></td><td></td><td></td>
            </tr>
        </tbody>
    </table>
</div>
<script type="text/javascript">
var doc=document;
function Calendar(){
 this.init.apply(this,arguments);
}
Calendar.prototype={
 init:function(tableId,dateId,selectY,selectM,startYear,endYear){
  var table=doc.getElementById(tableId);
  var dateObj=doc.getElementById(dateId);
  var selectY=doc.getElementById(selectY);
  var selectM=doc.getElementById(selectM);
  this._setSelectYear(selectY,startYear,endYear);
  this._setTodayDate(table,selectY,selectM);
  this._selectChange(table,selectY,selectM);
  this._clickBtn(table,dateObj,selectY,selectM,startYear,endYear);
 },
 //设置年份
 _setSelectYear:function(selectY,startYear,endYear){
  var html="";
  var date=new Date();
  if(!endYear){
   var endYear=date.getFullYear();
  }else{
   var endYear=endYear; 
  }
  for(var i=startYear;i<=endYear;i++){
   var _option=document.createElement('option');
   selectY.appendChild(_option);
   _option.value=i;
   _option.innerHTML=i;
  }
 },
 //设置当天的时间
 _setTodayDate:function(table,selectY,selectM){
  var _this=this;
  var date=new Date();
  var year=date.getFullYear(),month=date.getMonth(),_date=date.getDate(),day=date.getDay();
  var n=parseInt(_date/7);
  var l=n%7;
  
  if(l>=day){
   var todayTd=day+7*l;
  }else{
   var todayTd=day+7*(l+1);
  }
  var startTd=todayTd-_date+1;
  var monthDays=this._getMonthDays(year,month);
  var td=table.getElementsByTagName('td');
  this._setSelectValue(selectY,year);
  this._setSelectValue(selectM,month+1);
  for(i=startTd,len=td.length;i<len;i++){
   var _td=td[i]; 
   var j=i-startTd+1
   _td.innerHTML=j;
   _td.className="date";
   if(j==_date){
    _td.className="today";
   }else{
    _this._mouseOn(_td);
   }
   if(j>=monthDays){
    break;
   }
  }
 },
 //鼠标移入移出日期
 _mouseOn:function(obj){
  obj.onmouseover=function(){
   if(this.innerHTML){
    this.style.background="#bbb"; 
   }
  }
  obj.onmouseout=function(){
   this.style. background="";
  }
 },
 //下拉菜单选择日期
 _selectChange:function(table,selectY,selectM){
  var _this=this;
  selectY.onchange=function(){
   var year=_this._getSelectValue(selectY);
   var month=_this._getSelectValue(selectM)-1;
   _this._showCalendar(table,year,month);

  }
  selectM.onchange=function(){
   var year=_this._getSelectValue(selectY);
   var month=_this._getSelectValue(selectM)-1;;
   _this._showCalendar(table,year,month);
  }
 },
 //获取下拉菜单的默认值
 _getSelectValue:function(selectObj){
  var selectList=selectObj.getElementsByTagName('option');
  for(var i=0,len=selectList.length;i<len;i++){
   var _option=selectList[i];
   if(_option.selected){
    return parseInt(_option.value);
   }
  }
 },
 //设置下拉菜单默认值
 _setSelectValue:function(selectObj,value){
  var selectList=selectObj.getElementsByTagName('option');
  for(var i=0,len=selectList.length;i<len;i++){
   var _option=selectList[i];
   if(parseInt(_option.value)==value){
    _option.selected=true;
    break;
   }
  }
 },
 _clickBtn:function(table,dateObj,selectY,selectM,startYear,endYear){
  var _this=this,year=0;
  var btn=dateObj.getElementsByTagName('a');
  btn[0].onclick=function(){
   year=_this._getSelectValue(selectY)-1;
   var month=_this._getSelectValue(selectM);
   if(!isYearOver(year)){
    return;
   }
   _this._setSelectValue(selectY,year);
   _this._setSelectValue(selectM,month);
   _this._showCalendar(table,year,month-1);
  }
  btn[1].onclick=function(){
   year=_this._getSelectValue(selectY);
   var month=_this._getSelectValue(selectM)-1;
   if(month<=0){
    month=12;
    year--;
   }
   if(!isYearOver(year)){
    return;
   }
   _this._setSelectValue(selectM,month);
   _this._setSelectValue(selectY,year);
   _this._showCalendar(table,year,month-1);
  }
  btn[2].onclick=function(){
   year=_this._getSelectValue(selectY);
   var month=_this._getSelectValue(selectM)+1;
   if(month>12){
    month=1;
    year++;
   }
   if(!isYearOver(year)){
    return;
   }
   _this._setSelectValue(selectM,month);
   _this._setSelectValue(selectY,year);
   _this._showCalendar(table,year,month-1);
  }
  btn[3].onclick=function(){
   year=_this._getSelectValue(selectY)+1;
   var month=_this._getSelectValue(selectM);
   if(!isYearOver(year)){
    return;
   }
   _this._setSelectValue(selectM,month);
   _this._setSelectValue(selectY,year);
   _this._showCalendar(table,year,month-1);
  }
  function isYearOver(year){
   var date=new Date();
   var _endYear=endYear?endYear:date.getFullYear();
   if(year>_endYear||year<startYear){
    alert("超出日期范围");
    return false;;
   }else{
    return true; 
   }
  }
 },
 //显示日历
 _showCalendar:function(table,year,month){
  var date=new Date();
  var _year=date.getFullYear();
  var _month=date.getMonth();
  var _date=date.getDate();
  date.setYear(year);
  date.setMonth(month);
  date.setDate(1);
  var day=date.getDay();
  var _this=this;
  var monthDays=this._getMonthDays(year,month);
  var td=table.getElementsByTagName('td');
  for(var k=0;k<td.length;k++){
   td[k].innerHTML="";
   td[k].className="";
  }
  for(var i=day,len=td.length;i<len;i++){
   var _td=td[i];
   var j=i-day+1;
   _td.innerHTML=j;
   _td.className="date";
   if(_year==year&&_month==month&&_date==j){
    _td.className="today";
   }else{
    _this._mouseOn(_td); 
   }
   if(j>=monthDays){
    break;
   }
  }
 },
 //返回某个月的天数
 _getMonthDays:function(year,month){
  var monthAry=[31,28,31,30,31,30,31,31,30,31,30,31];
  if(year%400==0){
   monthAry[1]=29;
  }else{
   if(year%4==0&&year%100!=0){
    monthAry[1]=29;
   }
  }
  return monthAry[month];
 }
}
new Calendar("calTable","date","selectYear","selectMonth",2000,2015);
</script>
</body>
</html>

关于一款网友自编简单的日历js代码特效的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2018090386513.shtml方便下次再访问哦。

·上一篇： 鼠标悬停后带下滑动图片展示的导航菜单js特效代码
·下一篇： 通过鼠标拉拽将文本快速填充于单元格数据的特效代码

一款网友自编简单的日历js代码特效

文章分类LIST >>返回首页

最新游戏

最新新闻