JavaScript里的Date 对象属性及对象方法--实现简单的日历

上网搜索"js 日历插件"就会出来各种效果的功能丰富的日历插件,很多都可以下载源码,然后根据各自的需求对源码进行修改就可以直接用了.

但今天讲的不是如何使用这些插件,而是讲如何实现一个很简单的只有当前这个月的日历,具体效果如下图:

  ( 截图时间是 2017-7-27 ),下面展示一下实现的代码:

 .wrap {
       font-size: 0;
 }
 .weeks span {
       display: inline-block;
       font-size: 14px;
       width: 47px;
       height: 44px;
       line-height: 44px;
       border: 1px solid #EFEFEF;
       text-align: center;
  }
  #dates span{
      font-size: 14px;
      display: inline-block;
      width:47px;
      height: 49px;
      line-height: 49px;
      text-align: center;
      border: 1px solid #EFEFEF;
  }
  #dates span.today {
      color: #00ADB5;
  }            
<div class="wrap">
    <div class="weeks">
        <span>日</span>
        <span>一</span>
        <span>二</span>
        <span>三</span>
        <span>四</span>
        <span>五</span>
        <span>六</span>
    </div>
    <div id="dates">

    </div>
</div>
var moday=[ 31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31 ]; // 写出每月的总天数,把天数定义给一个数组
var d=new Date();
var month=d.getMonth()+1;      //当前的月份
var days=d.getDate();          //当前月的号数
var years=d.getFullYear();     //当前的年份
var run=years%4;               // 2月份的天数必须得区分今年是不是闰年
if(run!=0){
     moday[1]=28;//2月份的天数
}else{
     moday[1]=29;
}
var date=new Date();
date.setDate(1);  //设置当前月的某一天。  日历都是星期日在第一位,星期六在最后一位:
var momatch=[0,1,2,3,4,5,6];//这个存的是当前月的一号前面有多少空位,周日没有,周一一个以此类推
var dangqian=momatch[date.getDay()];
var dates=document.getElementById("dates");
for(i=1;i<=parseInt(dangqian);i++){
    dates.innerHTML+=‘<span>‘+‘&nbsp;‘+‘</span>‘;
}
var preAll = parseInt(moday[month-1]+dangqian);  //当前月1号前面的空白个数+这个月总天数
for(i=parseInt(dangqian+1);i<= preAll;i++){
    if(i%7==1 && i!=1){
        dates.innerHTML+=‘<br>‘;    //每七个是一行
     }
    if(i==(days+dangqian)){    //给今天添加类名,方便设置样式  days是当前号数加上前面的空白天数就是i
        dates.innerHTML+=‘<span class="today">‘+parseInt(i-dangqian)+‘</span>‘;
     }else {
        dates.innerHTML+=‘<span>‘+parseInt(i-dangqian)+‘</span>‘;
     }
}
for(i=preAll;i< (parseInt(preAll/7)+1)*7 ;i++){
    dates.innerHTML+=‘<span>‘+‘&nbsp;‘+‘</span>‘;   //补全表格的空余部分
}

直接看上面实现的代码应该不难理解该日历实现的原理,如果不能理解的话,我们一起来学习下JavaScript里面对时间日期的相关属性和方法.

上面的代码用到的方法在下面都有说明,而且很清晰哦!

Date 对象属性

属性 描述
constructor 返回对创建此对象的 Date 函数的引用。
prototype 使您有能力向对象添加属性和方法。

Date 对象方法

方法 描述
Date() 返回当日的日期和时间。
getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)。
getMonth() 从 Date 对象返回月份 (0 ~ 11)。
getFullYear() 从 Date 对象以四位数字返回年份。
getYear() 请使用 getFullYear() 方法代替。
getHours() 返回 Date 对象的小时 (0 ~ 23)。
getMinutes() 返回 Date 对象的分钟 (0 ~ 59)。
getSeconds() 返回 Date 对象的秒数 (0 ~ 59)。
getMilliseconds() 返回 Date 对象的毫秒(0 ~ 999)。
getTime() 返回 1970 年 1 月 1 日至今的毫秒数。
getTimezoneOffset() 返回本地时间与格林威治标准时间 (GMT) 的分钟差。
getUTCDate() 根据世界时从 Date 对象返回月中的一天 (1 ~ 31)。
getUTCDay() 根据世界时从 Date 对象返回周中的一天 (0 ~ 6)。
getUTCMonth() 根据世界时从 Date 对象返回月份 (0 ~ 11)。
getUTCFullYear() 根据世界时从 Date 对象返回四位数的年份。
getUTCHours() 根据世界时返回 Date 对象的小时 (0 ~ 23)。
getUTCMinutes() 根据世界时返回 Date 对象的分钟 (0 ~ 59)。
getUTCSeconds() 根据世界时返回 Date 对象的秒钟 (0 ~ 59)。
getUTCMilliseconds() 根据世界时返回 Date 对象的毫秒(0 ~ 999)。
parse() 返回1970年1月1日午夜到指定日期(字符串)的毫秒数。
setDate() 设置 Date 对象中月的某一天 (1 ~ 31)。
setMonth() 设置 Date 对象中月份 (0 ~ 11)。
setFullYear() 设置 Date 对象中的年份(四位数字)。
setYear() 请使用 setFullYear() 方法代替。
setHours() 设置 Date 对象中的小时 (0 ~ 23)。
setMinutes() 设置 Date 对象中的分钟 (0 ~ 59)。
setSeconds() 设置 Date 对象中的秒钟 (0 ~ 59)。
setMilliseconds() 设置 Date 对象中的毫秒 (0 ~ 999)。
setTime() 以毫秒设置 Date 对象。
setUTCDate() 根据世界时设置 Date 对象中月份的一天 (1 ~ 31)。
setUTCMonth() 根据世界时设置 Date 对象中的月份 (0 ~ 11)。
setUTCFullYear() 根据世界时设置 Date 对象中的年份(四位数字)。
setUTCHours() 根据世界时设置 Date 对象中的小时 (0 ~ 23)。
setUTCMinutes() 根据世界时设置 Date 对象中的分钟 (0 ~ 59)。
setUTCSeconds() 根据世界时设置 Date 对象中的秒钟 (0 ~ 59)。
setUTCMilliseconds() 根据世界时设置 Date 对象中的毫秒 (0 ~ 999)。
toSource() 返回该对象的源代码。
toString() 把 Date 对象转换为字符串。
toTimeString() 把 Date 对象的时间部分转换为字符串。
toDateString() 把 Date 对象的日期部分转换为字符串。
toGMTString() 请使用 toUTCString() 方法代替。
toUTCString() 根据世界时,把 Date 对象转换为字符串。
toLocaleString() 根据本地时间格式,把 Date 对象转换为字符串。
toLocaleTimeString() 根据本地时间格式,把 Date 对象的时间部分转换为字符串。
toLocaleDateString() 根据本地时间格式,把 Date 对象的日期部分转换为字符串。
UTC() 根据世界时返回 1970 年 1 月 1 日 到指定日期的毫秒数。
valueOf() 返回 Date 对象的原始值。

下面对某些常用的方法进行详细的案例分析:

时间: 2024-10-07 11:54:54

JavaScript里的Date 对象属性及对象方法--实现简单的日历的相关文章

JavaScript 中关于Date的内置对象属性和方法的总结

Date 属性: 1.constructor    所建立对象的函数参考 2.prototype      能够为对象加入的属性和方法 方法: 1.getDay()    返回一周中的第几天(0-6) 2.getYear()    返回年份.2000年以前为2位,2000(包含)以后为4位 3.getFullYear()     返回完整的4位年份数 4.getMonth()      返回月份数(0-11) 5.getDate()       返回日(1-31) 6.getHours()  

javascript的类方法,对象属性,原型方法的相关理解

1.对象方法,属性:是属于对象实例层次上的方法,没创建一个实例,此实例便有了相应的对象方法,实例可以使用对象方法. eg:function People(name){ //对象属性,公有的(即每个实例都有一个此属性或方法) this.name = name; //对象方法,公有的 this.introduce = function(){ alert('my name = '+this.name); }: } 2.类方法,属性(静态方法,属性):作用在类层次的,不需要生成实例已经存在的属性,在内存

[笔记]JavaScript获得对象属性个数的方法

//扩展对象的count方法 Object.prototype.count = ( Object.prototype.hasOwnProperty(‘__count__’) ) ? function () { return this.__count__; } : function () { var count = 0; for (var i in this) if (this.hasOwnProperty(i)) { count ++; } return count; }; //使用 var m

获取对象属性两种方法的差别

1.中括号法可以用变量作为属性名,而点方法不可以; var obj = {};obj.name = '张三';var myName = 'name';console.log(obj.myName);//undefined,访问不到对应的属性console.log(obj[myName]);//张三 2.中括号法可以用数字作为属性名,而点语法不可以; 3.中括号法可以使用js的关键字和保留字作为属性名,而点语法不可以(尽量避免在变量或者属性中使用关键字或保留字); 原文地址:https://www

Javascript对象属性与方法汇总

1 Javascript对象属性与方法汇总 2 发布时间:2015-03-06 编辑:www.jquerycn.cn 3 详细介绍下,javascript对象属性与对象方法的相关知识,包括javascript字符串.数组.日期等对象的属性与常用方法,有需要的朋友参考下. 4 本节主要内容: 5 Javascript对象属性与方法 6 7 对Javascript对象属性方法做一个详细的汇总介绍,供jquery中文网的朋友参考. 8 9 数组(Array):系列元素的有序集合 10 属性: 11 l

转: JavaScript 获取对象属性和方法

一.获取对象属性和方法 Object.keys()for in 返回对象的可枚举属性和方法的名称数组. Object.getOwnPropertyNames() 返回的数组的所有属性(可枚举或不可枚举)直接找到给定对象. 1 // 创建一个对象的构造方法 2 function myObj(name, attr) { 3 this.name = name; 4 this.attr = attr; 5 6 this.sayHi = function () { 7 return 'hi everyon

对象属性的增删改查、特性已经序列化

1)在javascript中,只有查询属性时才会体会到继承的存在,而设置属性则和继承无关,这使程序员可以有选择的覆盖继承的属性. 2)如果o继承了原型上的属性x,而这个属性是具有setter方法的存取器(accessor)属性,这时会调用setter方法而不是给o创建一个属性x. 注意: setter方法是由对象o调用的,而不是定义这个属性的原型调用的,因此setter定义任何属性,这个操作只针对o本身,而不会改变原型链. 3)属性访问并不总是返回或设置一个值,访问 null 或 undefin

Javascript进阶篇——( JavaScript内置对象---下)--Math对象---笔记整理

Math对象使用 Math 的属性和方法: <script type="text/javascript"> var mypi=Math.PI; var myabs=Math.abs(-15); document.write(mypi); document.write(myabs); </script> 运行结果: 3.141592653589793 15 Math 对象是一个固有的对象,无需创建它,直接把 Math 作为对象使用就可以调用其所有属性和方法.这是它

JS获取对象“属性和方法”的方法

平时在写的代码过程中,经常会遇到对对象Object的数据处理.而在对对象的数据处理中,操作最频繁的是“数据引用”.“值的修改”.“获取关键字(属性)”.平时最烦的也是“获取关键字”,经常忘记怎么去获取,这里做一下整理. 既然要"获取关键字",那么得首先有一个对象才行.创建对象的方式很多,我自己惯用的方式有三种: 1.通过原始构造函数 new Object();创建一个对象,然后赋值: var testObj= new Object(); testObj.name = "sha