一起学写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 相关文章推荐
Js 刷新框架页的代码
Apr 13 Javascript
初学js 新节点的创建 删除 的步骤
Jul 04 Javascript
javascript插入样式实现代码
Feb 22 Javascript
在JavaScript应用中使用RequireJS来实现延迟加载
Jul 01 Javascript
jQuery控制DIV层实现由大到小,由远及近动画变化效果
Oct 09 Javascript
利用jQuery设计一个简单的web音乐播放器的实例分享
Mar 08 Javascript
用JavaScript和jQuery实现瀑布流
Mar 19 Javascript
微信小程序tabBar底部导航中文注解api详解
Aug 16 Javascript
JsChart组件使用详解
Mar 04 Javascript
微信小程序中使用ECharts 异步加载数据的方法
Jun 27 Javascript
a标签调用js的方法总结
Sep 05 Javascript
关于Vue中axios的封装实例详解
Oct 20 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
对text数据类型不支持代码页转换 从: 1252 到: 936
2011/04/23 PHP
php实现的数字验证码及数字运算验证码
2015/07/30 PHP
thinkPHP3.1验证码的简单实现方法
2016/04/22 PHP
php根据数据id自动生成编号的实现方法
2016/10/16 PHP
JQuery 操作select标签实现代码
2010/05/14 Javascript
jQuery学习笔记之Helloworld
2010/12/22 Javascript
解决extjs grid 不随窗口大小自适应的改变问题
2014/01/26 Javascript
JavaScript实现从数组中选出和等于固定值的n个数
2014/09/03 Javascript
javascript实现倒计时并弹窗提示特效
2015/06/05 Javascript
JS实现点击按钮获取页面高度的方法
2015/11/02 Javascript
详解javascript遍历方式
2015/11/11 Javascript
JavaScript实现经典排序算法之插入排序
2016/12/28 Javascript
原生JS轮播图插件
2017/02/09 Javascript
React组件中的this的具体使用
2018/02/28 Javascript
Vue组件教程之Toast(Vue.extend 方式)详解
2019/01/27 Javascript
js利用递归与promise 按顺序请求数据的方法
2019/08/30 Javascript
js 判断当前时间是否处于某个一个时间段内
2019/09/19 Javascript
vue中使用带隐藏文本信息的图片、图片水印的方法
2020/04/24 Javascript
JavaScript中展开运算符及应用的实例代码
2021/01/14 Javascript
Python通过PIL获取图片主要颜色并和颜色库进行对比的方法
2015/03/19 Python
Python中shutil模块的常用文件操作函数用法示例
2016/07/05 Python
Python实现鼠标自动在屏幕上随机移动功能
2020/03/14 Python
python实现ping命令小程序
2020/12/28 Python
pycharm 复制代码出现空格的解决方式
2021/01/15 Python
HTML5操作WebSQL数据库的实例代码
2017/08/26 HTML / CSS
iPhoneX安全区域(Safe Area)底部小黑条在微信小程序和H5的屏幕适配
2020/04/08 HTML / CSS
YSL Beauty加拿大官方商城:圣罗兰美妆加拿大
2017/05/15 全球购物
PHP如何调用MYSQL存储过程
2014/05/30 面试题
一套.net面试题及答案
2016/11/02 面试题
如果让你测试一台高速激光打印机,你都会进行哪些测试
2012/12/04 面试题
工程造价自荐信
2013/10/09 职场文书
《与朱元思书》的教学反思
2014/04/17 职场文书
社区助残日活动总结
2014/08/29 职场文书
2014年小学国庆节活动方案
2014/09/16 职场文书
诚实守信主题班会
2015/08/13 职场文书
员工安全责任协议书
2016/03/22 职场文书