一起学写js Calender日历控件


Posted in Javascript onApril 14, 2016

最近看了一下关于js日期的一些函数,突然想到了日历控件,于是试着写了一个,作为后台程序员的我水平有限,大家抱着学习的态度看看我写的这个例子吧,一起学习进步!

首先一个常用的日期函数:

Date(year,month,day)

 var   date=new  Date();

获取年份

var   year=this.date.getFullYear();

获取月份,这里是月索引所以要+1

var   month=this.date.getMonth()+1;

获取当天是几号

var   day=this.date.getDate();

获取当天是周几,返回0.周日   1.周一  2.周二  3.周三  4.周四  5.周五  6.周六

var   week=this.date.getDay();

 获取当月一号是周几      

var   getWeekDay=function(year,month,day){
      var date=new Date(year,month,day);
      return date.getDay();
      }

 var  weekstart= getWeekDay(this.year, this.month-1, 1)

获取当月的天数

var getMonthDays=function(year,month){
      var date=new Date(year,month,0);
      return date.getDate();
    }
var  monthdays= this.getMonthDays(this.year,this.month);

 好了,我们用到的参数就这么多,后面其实就是关于日期对应周几的一些操作和判断,动态的拼接标签,下面就直接把我写的例子发出来:

效果图:

一起学写js Calender日历控件

<html>  
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<head>
  <style type="text/css">

td{ text-align: center;}
  </style>
  <script type="text/javascript">
   
window.onload=function(){
  var  Calender=function(){
    this.Init.apply(this,arguments);
  }
  Calender.prototype={
    Init:function(container,options){
      this.date=new Date();
      this.year=this.date.getFullYear();
      this.month=this.date.getMonth()+1;
      this.day=this.date.getDate();
      this.week=this.date.getDay();
      this.weekstart=this.getWeekDay(this.year, this.month-1, 1);
      this.monthdays= this.getMonthDays(this.year,this.month);
      this.containerDiv=document.getElementById(container);
      this.options=options!=null?options:{
        border:'1px solid green',
        width:'400px',
        height:'200px',
        backgroundColor:'lightgrey',
        fontColor:'blue'
      }
    },
    getMonthDays:function(year,month){
      var date=new Date(year,month,0);
      return date.getDate();
    },
    getWeekDay:function(year,month,day){
      var date=new Date(year,month,day);
      return date.getDay();
    },
    View:function(){
      var tablestr='<table>';
       tablestr+='<tr><td colspan="3"></td><td>年:'+this.year+'</td><td colspan="3">月:'+this.month+'</td></tr>';
      tablestr+='<tr><td width="14%">日</td><td width="14%">一</td><td width="14%">二</td><td width="14%">三</td><td width="14%">四</td><td width="14%">五</td><td width="14%">六</td></tr>';
      var index=1;
      //判断每月的第一天在哪个位置
      var style='';
      if(this.weekstart<7)
      {
        tablestr+='<tr>';
         for (var i = 0; i <this.weekstart; i++) {
           tablestr+='<td></td>';
         };
         for (var i = 0; i < 7-this.weekstart; i++) {
          style=this.day==(i+1)?"background-Color:green;":"";
           index++;
           tablestr+='<td style="'+style+'" val='+(this.year+'-'+this.month+'-'+(i+1))+'>'+(i+1)+'</td>';
         };
        tablestr+='</tr>';

      }
      ///剩余天数对应的位置

      //判断整数行并且对应相应的位置
      var remaindays=this.monthdays-(7-this.weekstart);
      var row=Math.floor(remaindays%7==0?remaindays/7:((remaindays/7)+1)) ;
      var  count=Math.floor(remaindays/7);
      for (var i = 0; i < count; i++) {
         tablestr+='<tr>';
         for (var k = 0; k < 7; k++) {
           style=this.day==(index+k)?"background-Color:green;":"";
           tablestr+='<td style="'+style+'" val='+(this.year+'-'+this.month+'-'+(index+k))+'>';
           tablestr+=index+k;
           tablestr+='</td>';
         };
         tablestr+='</tr>';
         index+=7;
      };

      //最后剩余的天数对应的位置(不能填充一周的那几天)
      var remaincols=this.monthdays-(index-1);
      tablestr+='<tr>';
      for (var i = 0; i < remaincols; i++) {
        style=this.day==index?"background-Color:green;":"";
        tablestr+='<td style="'+style+'" val='+(this.year+'-'+this.month+'-'+(index))+'>';
        tablestr+=index;
        tablestr+='</td>';
        index++;
      };
      tablestr+='</tr>';
      tablestr+='</table>';
      return tablestr;
    },
    Render:function(){
      var calenderDiv=document.createElement('div');
      calenderDiv.style.border=this.options.border;
      calenderDiv.style.width=this.options.width;
      calenderDiv.style.height=this.options.height;
      calenderDiv.style.cursor='pointer';
      calenderDiv.style.backgroundColor=this.options.backgroundColor;
      // calenderDiv.style.color=this.options.fontColor;
      calenderDiv.style.color='red' ;

      calenderDiv.onclick=function(e){
        var evt=e||window.event;
        var  target=evt.srcElement||evt.target;

        if(target&&target.getAttribute('val'))
        {

          alert(target.getAttribute('val'));
        }
      
      }
      var tablestr=this.View();
      this.tablestr=tablestr;
      calenderDiv.innerHTML=tablestr;
      var div=document.createElement('div');
      div.style.width='auto';
      div.style.height='auto';
       div.appendChild(calenderDiv);

       ///翻页div
      var pagerDiv=document.createElement('div');
      pagerDiv.style.width='auto';
      pagerDiv.style.height='auto';

        var that=this;


        ///重新设置参数
      var  resetPara=function(year,month,day){
          that.date=new Date(year,month,day);
          that.year=that.date.getFullYear();
          that.month=that.date.getMonth()+1;
          that.day=that.date.getDate();
          that.week=that.date.getDay();
          that.weekstart=that.getWeekDay(that.year, that.month-1, 1);
          that.monthdays= that.getMonthDays(that.year,that.month);
      }

      //上一页
      var preBtn=document.createElement('input');
       preBtn.type='button';
       preBtn.value='<';

       preBtn.onclick=function(){
           that.containerDiv.removeChild(div);
           resetPara(that.year,that.month-2,that.day);
           that.Render();

       }
       //下一页
       var nextBtn=document.createElement('input');
       nextBtn.type='button';
       nextBtn.value='>';
     
       nextBtn.onclick=function(){
           that.containerDiv.removeChild(div);
           resetPara(that.year,that.month,that.day);
           that.Render();

       }

       pagerDiv.appendChild(preBtn);
       pagerDiv.appendChild(nextBtn);
       div.appendChild(pagerDiv);

       var dropDiv=document.createElement('div');
       var  dropdivstr='';
       //选择年份
       dropdivstr+='<select id="ddlYear">';
       for (var i = 1900; i <= 2100; i++) {
        dropdivstr+= 
        i==that.year
        ?'<option value="'+i+'" selected="true">'+i+'</option>'
        : '<option value="'+i+'">'+i+'</option>';
       };
       dropdivstr+='</select>';
      
      //选择月份
      dropdivstr+='<select id="ddlMonth">';
       for (var i = 1; i <= 12; i++) {
        dropdivstr+=
        i==that.month
        ?'<option value="'+i+'" selected="true">'+i+'</option>'
        : '<option value="'+i+'">'+i+'</option>';
       };
       dropdivstr+='</select>';
       dropDiv.innerHTML=dropdivstr;
       div.appendChild(dropDiv);
      that.containerDiv.appendChild(div);
  

       ///绑定选择年份和月份的事件
       var ddlChange=function(){
           var ddlYear=document.getElementById('ddlYear');
          var ddlMonth=document.getElementById('ddlMonth');
          var  yearIndex=ddlYear.selectedIndex;
          var year=ddlYear.options[yearIndex].value;
          var  monthIndex=ddlMonth.selectedIndex;
          var month=ddlMonth.options[monthIndex].value;
          that.containerDiv.removeChild(div);
          resetPara(year,month-1,that.day);
          that.Render();
       }

      ddlYear.onchange=function(){
         ddlChange();
      }

       ddlMonth.onchange=function(){
         ddlChange();
        
      }
    }

  }


  var  calender=new Calender('dvTest',{
        border:'1px solid green',
        width:'400px',
        height:'200px',
        backgroundColor:''
        }
        );
  calender.Render();
 
}
  </script>
 
 
</head>
<body>
 <div id="dvTest"></div>
</body>
</html>

代码重新做了改动,将视图的table换为了div,是为了解决IE的tableinnerHTML的只读问题。另外加了options是为了可配置性。
上面代码有简单说明,功能是最基础的,如果更深入的做可以进行扩展,希望这篇文章可以给大家一些启发。

Javascript 相关文章推荐
XML的代替者----JSON
Jul 21 Javascript
jquery cookie插件代码类
May 26 Javascript
AJAX分页的代码(后台asp.net)
Feb 14 Javascript
jquery 获取dom固定元素 添加样式的简单实例
Feb 04 Javascript
JS模拟实现Select效果代码
Sep 24 Javascript
jQuery实现带有动画效果的回到顶部和底部代码
Nov 04 Javascript
JavaScript动态设置div的样式的方法
Dec 26 Javascript
javascript将list转换成树状结构的实例
Sep 08 Javascript
JS 实现百度搜索功能
Feb 01 Javascript
在Web关闭页面时发送Ajax请求的实现方法
Mar 07 Javascript
Node.js Event Loop各阶段讲解
Mar 08 Javascript
node 标准输入流和输出流代码实例
Sep 19 Javascript
jQuery获取父元素节点、子元素节点及兄弟元素节点的方法
Apr 14 #Javascript
原生js实现autocomplete插件
Apr 14 #Javascript
jQuery循环遍历子节点并获取值的方法
Apr 14 #Javascript
基于jQuery实现音乐播放试听列表
Apr 14 #Javascript
js仿3366小游戏选字游戏
Apr 14 #Javascript
Javascript实现鼠标框选操作  不是点击选取
Apr 14 #Javascript
Node.js实现数据推送
Apr 14 #Javascript
You might like
杏林同学录(四)
2006/10/09 PHP
php断点续传之如何分割合并文件
2014/03/22 PHP
ThinkPHP3.1之D方法实例详解
2014/06/20 PHP
PHP实现导出excel数据的类库用法示例
2016/10/15 PHP
Django 中 cookie的使用
2017/08/17 PHP
PHP变量的作用范围实例讲解
2020/12/22 PHP
父页面显示遮罩层弹出半透明状态的dialog
2014/03/04 Javascript
window.onload绑定多个事件的两种解决方案
2016/05/15 Javascript
JavaScript原型链与继承操作实例总结
2018/08/24 Javascript
配置一个vue3.0项目的完整步骤
2019/04/26 Javascript
nodejs对项目下所有空文件夹创建gitkeep的方法
2019/08/02 NodeJs
VUE实现图片验证码功能
2020/11/18 Javascript
浅谈vue中组件绑定事件时是否加.native
2019/11/09 Javascript
在vue中动态添加class类进行显示隐藏实例
2019/11/09 Javascript
微信小程序接入vant Weapp组件的详细步骤
2020/10/28 Javascript
前端vue如何使用高德地图
2020/11/05 Javascript
[47:03]Ti4第二日主赛事败者组 LGD vs iG 2
2014/07/21 DOTA
[01:17:12]职来职往完美电竞专场
2014/09/18 DOTA
解析Python中的__getitem__专有方法
2016/06/27 Python
Python cookbook(数据结构与算法)字典相关计算问题示例
2018/02/18 Python
django反向解析和正向解析的方式
2018/06/05 Python
Python类中的魔法方法之 __slots__原理解析
2019/08/26 Python
使用OpenCV circle函数图像上画圆的示例代码
2019/12/27 Python
Python3和PyCharm安装与环境配置【图文教程】
2020/02/14 Python
HTML5 CSS3新的WEB标准和浏览器支持
2009/07/16 HTML / CSS
AmazeUI导航的示例代码
2020/08/14 HTML / CSS
amazeui 验证按钮扩展的实现
2020/08/21 HTML / CSS
what is the difference between ext2 and ext3
2013/11/03 面试题
大学自我鉴定范文
2013/12/26 职场文书
心理健康课教学反思
2014/02/13 职场文书
2015年店长工作总结范文
2015/04/08 职场文书
投资公司董事长岗位职责
2015/04/16 职场文书
文明礼仪倡议书
2015/04/28 职场文书
解决golang结构体tag编译错误的问题
2021/05/02 Golang
python 详解turtle画爱心代码
2022/02/15 Python
python中使用redis用法详解
2022/12/24 Redis