js Calender控件使用详解_javascript技巧

最近一直在赶项目。项目现在终于处于稳定的状态，只是修修改改。作为后台程序员的我真是苦逼啊，从web到手机端接口我都得写，杂七杂八的事情。。。这两天终于闲下来了，没事儿看了一下关于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);

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

复制代码 代码如下:

<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是为了可配置性。

        上面代码有简单说明，功能是最基础的，如果更深入的做可以进行扩展

时间： 2024-10-06 19:45:10

js Calender控件使用详解_javascript技巧的相关文章

Bootstrap所支持的表单控件实例详解_javascript技巧

 Bootstrap所支持的表单控件如下所示: Bootstrap 支持最常见的表单控件,主要是 input.textarea.checkbox.radio 和 select. 输入框(Input) 最常见的表单文本字段是输入框 input.用户可以在其中输入大多数必要的表单数据.Bootstrap 提供了对所有原生的 HTML5 的 input 类型的支持,包括:text.password.datetime.datetime-local.date.month.time.week.number.

JavaScript知识点总结(十一)之js中的Object类详解_javascript技巧

JavaScript中的Object对象,是JS中所有对象的基类,也就是说JS中的所有对象都是由Object对象衍生的.Object对象主要用于将任意数据封装成对象形式. 一.Object类介绍 Object类是所有JavaScript类的基类(父类),提供了一种创建自定义对象的简单方式,不再需要程序员定义构造函数. 二.Object类主要属性 1.constructor:对象的构造函数. 2.prototype:获得类的prototype对象,static性质. 三.Object类主要方法 1

JS中的二叉树遍历详解_javascript技巧

二叉树是由根节点,左子树,右子树组成,左子树和友子树分别是一个二叉树. 这篇文章主要在JS中实现二叉树的遍历. 一个二叉树的例子 var tree = { value: 1, left: { value: 2, left: { value: 4 } }, right: { value: 3, left: { value: 5, left: { value: 7 }, right: { value: 8 } }, right: { value: 6 } } } 广度优先遍历广度优先遍历是从二叉树的

vue.js+boostrap项目实践(案例详解)_javascript技巧

一.为什么要写这篇文章 最近忙里偷闲学了一下vue.js,同时也复习了一下boostrap,发现这两种东西如果同时运用到一起,可以发挥很强大的作用,boostrap优雅的样式和丰富的组件使得页面开发变得更美观和更容易,同时vue.js又是可以绑定model和view(这个相当于MVC中的,M和V之间的关系),使得对数据变换的操作变得更加的简易,简化了很多的逻辑代码. 二.学习这篇文章需要具备的知识 1.需要有vue.js的知识 2.需要有一定的HTML.CSS.JavaScript的基础知识 3

在Node.js中使用Javascript Generators详解_javascript技巧

Generators是Javascript的一种协同程序( coroutine 简称:协程)风格,是指那些可以在执行时暂停然后又恢复的函数,该函数是在functi配以星号符号形式如function* ,函数内有些特征关键词如yield 和yield*. function* generatorFn () { console.log('look ma I was suspended') } var generator = generatorFn() // [1] setTimeout(functio

JS中多种方式创建对象详解_javascript技巧

1.内置对象创建 var girl=new Object(); girl.name='hxl'; console.log(typeof girl); 2.工厂模式,寄生构造函数模式 function Person(name){ var p=new Object();//内部进行实例化 p.name=name; p.say=function(){ console.log('my name is '+ p.name); } return p;//注:一定要返回 } var girl=Person('

JS组件Bootstrap Table布局详解_javascript技巧

Bootstrap 提供了一个清晰的创建表格的布局.下表列出了 Bootstrap 支持的一些表格元素: 表格类下表样式可用于表格中: <tr>, <th> 和 <td> 类下表的类可用于表格的行或者单元格: 基本的表格 如果您想要一个只带有内边距(padding)和水平分割的基本表,请添加 class .table,如下面实例所示: <div class="row"> <table class="table"&

D3.js实现柱状图的方法详解_javascript技巧

D3.js介绍 D3.js 是一个基于数据操作文档JavaScript库.D3帮助你给数据带来活力通过使用HTML.SVG和CSS.D3重视Web标准为你提供现代浏览器的全部功能,而不是给你一个专有的框架.结合强大的可视化组件和数据驱动方式Dom操作.这里也可以看到它是用SVG来呈现图表的,所以使用D3.js是需要一定的SVG基础的. 如何用D3.js实现柱状图? 柱状图里面有坐标轴和柱子.然而我们还需要SVG画布来画这些东西.先把大概的画图框架搭起来,代码如下(请注意此时我在body标签里添加

js事件监听器用法实例详解_javascript技巧

本文实例讲述了js事件监听器用法.分享给大家供大家参考.具体分析如下: 1.当同一个对象使用.onclick的写法触发多个方法的时候,后一个方法会把前一个方法覆盖掉,也就是说,在对象的onclick事件发生时,只会执行最后绑定的方法.而用事件监听则不会有覆盖的现象,每个绑定的事件都会被执行.如下: window.onload = function(){ var btn = document.getElementById("yuanEvent"); btn.onclick = funct