一起学写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 相关文章推荐
JavaScript语言中的Literal Syntax特性分析
Mar 08 Javascript
js删除所有的cookie的代码
Nov 25 Javascript
javascript下使用Promise封装FileReader
Feb 19 Javascript
JavaScript驾驭网页-DOM
Mar 24 Javascript
jQuery Ajax请求后台数据并在前台接收
Dec 10 Javascript
javascript容错处理代码(屏蔽js错误)
Jan 20 Javascript
详解vue2.0 使用动态组件实现 Tab 标签页切换效果(vue-cli)
Aug 30 Javascript
浅谈MUI框架中加载外部网页或服务器数据的方法
Jan 31 Javascript
vue实现选项卡及选项卡切换效果
Apr 24 Javascript
vue awesome swiper异步加载数据出现的bug问题
Jul 03 Javascript
Vue配置marked链接添加target=&quot;_blank&quot;的方法
Jul 19 Javascript
webpack+vue-cil 中proxyTable配置接口地址代理操作
Jul 18 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
php 随机排序广告的实现代码
2011/05/09 PHP
ThinkPHP打水印及设置水印位置的方法
2016/10/14 PHP
用Laravel轻松处理千万级数据的方法实现
2020/12/25 PHP
发两个小东西,ASP/PHP 学习工具。 用JavaScript写的
2007/04/12 Javascript
JQuery 1.3.2以上版本中出现pareseerror错误的解决方法
2011/01/11 Javascript
jquery validate添加自定义验证规则(验证邮箱 邮政编码)
2013/12/04 Javascript
JS批量操作CSS属性详细解析
2013/12/16 Javascript
ubuntu下安装nodejs以及升级的办法
2015/05/08 NodeJs
js控制元素显示在屏幕固定位置及监听屏幕高度变化的方法
2015/08/11 Javascript
jQuery Validate初步体验(一)
2015/12/12 Javascript
Web前端新人笔记之jquery入门心得(新手必看)
2016/05/17 Javascript
jquery显示隐藏元素的实现代码
2016/05/19 Javascript
Angular 4依赖注入学习教程之组件服务注入(二)
2017/06/04 Javascript
用JS实现选项卡
2020/03/23 Javascript
js实现类选择器和name属性选择器的示例步骤
2021/02/07 Javascript
Python中random模块生成随机数详解
2016/03/10 Python
Python面向对象特殊成员
2017/04/24 Python
python更改已存在excel文件的方法
2018/05/03 Python
Django使用HttpResponse返回图片并显示的方法
2018/05/22 Python
mac下pycharm设置python版本的图文教程
2018/06/13 Python
Selenium元素的常用操作方法分析
2018/08/10 Python
20行python代码实现人脸识别
2019/05/05 Python
Python循环结构的应用场景详解
2019/07/11 Python
python pygame实现挡板弹球游戏
2019/11/25 Python
Python3中的tuple函数知识点讲解
2021/01/03 Python
canvas烟花特效锦集
2018/01/17 HTML / CSS
用HTML5的canvas实现一个炫酷时钟效果
2016/05/20 HTML / CSS
函授本科自我鉴定
2014/02/04 职场文书
火车的故事教学反思
2014/02/11 职场文书
《雨点儿》教学反思
2014/04/14 职场文书
党的群众路线教育实践活动对照检查材料(四风)
2014/09/27 职场文书
先进教育工作者事迹材料
2014/12/23 职场文书
车间统计员岗位职责
2015/04/14 职场文书
2015年驾驶员工作总结
2015/04/29 职场文书
职场:企业印章管理制度(模板)
2019/10/18 职场文书
使用Python的开发框架Brownie部署以太坊智能合约
2021/05/28 Python