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

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

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

 .wrap {
font-size:;
}
.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 对象的原始值。
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

这次的分享就到这里,下次再对一个日历(有公历,农历,节气...)的js框架进行详解!!!

 

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

  1. C++类继承中,基类/当前对象属性/当前对象的构造顺序

    [1]中提到,规范的派生类构造函数三个要点: 首先创建基类对象 应通过成员初始化列表,创建基类对象 应该初始化本派生类新增的成员变量 那在构造派生类实例的过程中,其基类(以及多继承的时候多个基类)/当 ...

  2. Spring中使用事务搭建转账环境方法二 相对简便的注解方法 ——配置文件注入对象属性需要setter方法 注解方法,不需要生成setter方法

    XML配置文件代码如下: <?xml version="1.0" encoding="UTF-8"?> <beans xmlns=" ...

  3. PHP 根据对象属性进行对象数组的排序(usort($your_data, "cmp");)(inside the class: usort($your_data, array($this, "cmp")))

    PHP 根据对象属性进行对象数组的排序(usort($your_data, "cmp");)(inside the class: usort($your_data, array($ ...

  4. fastjson转换包含date类型属性的对象时报错com.alibaba.fastjson.JSONException: For input string: "13:02:19"

    问题:time类型数据插入不进mysql数据库:调试的时候报如下错误: Caused by: java.lang.NumberFormatException: For input string: &q ...

  5. JavaScript之面向对象的概念,对象属性和对象属性的特性简介

    一.大家都知道,面向对象语言有一个标志,那就是他们都有类的概念,通过类我们可以创建任意多个具有相同属性和方法的对象.但ECMAScript(指定JavaScript标准的机构,也就是说JavaScri ...

  6. ECMA5中定义的对象属性特性和方法

    ECMA5规定了只有内部才有的特性,描述了属性的各种特征,这些特性用于实现JavaScript引擎,因此在Js中不能直接访问他们.为了标识特性,我们一般会他们放入两对方括号中. ECMAScript中 ...

  7. 根据对象属性查找对象或者数组(根据对象属性查找某数组内符合该条件的对象,数组内对象属性check为true的对象,存放到数组内) 滚动轴样式

      1.根据对象属性查找某数组内符合该条件的对象. optionComwords:[ {optionName:"名称1", optionCode: '1'}, {optionNam ...

  8. js动态更改对象属性值的方法

    下面代码,替换属性名称包含date的属性中的T为空格. for (var o in data) {                        //console.info(eval("d ...

  9. js 对象属性和使用方法学习笔记

    对象的引用 在ECMAScriipt中,不能访问对象的物理表示,只能访问对象的引用.每次创建对象,存储在变量中的都是对象的引用,而不是对象本身. 对象的废除 ECMASript拥有无用存储单元收集程序 ...

随机推荐

  1. 22条常用JavaScript开发小技巧

    1.使用var声明变量 如果给一个没有声明的变量赋值,默认会作为一个全局变量(即使在函数内赋值).要尽量避免不必要的全局变量. 2.行尾使用分号 虽然JavaScript允许省略行尾的分号,但是有时不 ...

  2. 2018.09.16 bzoj1176: [Balkan2007]Mokia(cdq分治)

    传送门 调了半天发现是输出优化打错了求心理阴影体积233 这题很简单啊. 一个修改操作x如果对一个询问操作y有贡献那么有. tx<ty,Xx<=Xy,Yx<=Yy" rol ...

  3. 2018.07.06 POJ2536 Gopher II(二分图匹配)

    Gopher II Time Limit: 2000MS Memory Limit: 65536K Description The gopher family, having averted the ...

  4. 26. The Greenhouse Effect and Its Consequences 温室效应及其后果

    26. The Greenhouse Effect and Its Consequences 温室效应及其后果 ①The greenhouse effect causes trouble by rai ...

  5. Android 6.0以上 需要运行时申请的权限

    转载:http://www.cnblogs.com/tangs/articles/6377347.html 自从Android6.0发布以来,在权限上做出了很大的变动,不再是之前的只要在manifes ...

  6. #include 和 #import 的区别, @class 的含义

    #import 和 #include  会包含这个类的所有信息,包括实体变量和方法 而#include比起 #import的好处不会引起重复包含 @class是用来做类引用的 @class就是告诉编译 ...

  7. 通过FactoryBean方式来配置bean

    1.实现FactoryBean接口的java类: 2.相应的.xml文件:

  8. unusedjs

    查看js的有效使用情况: https://github.com/gmetais/unusedjs Installation You need to open your console and writ ...

  9. [JS] Ajax请求会话过期处理

    对于页面来说,处理session过期比较简单,一般只需在过滤器里面判断session用户是否存在,不存在则跳转页面到登陆页即可. 对于Ajax请求来说,这个办法则无效,只能获取到登录页的html代码. ...

  10. dorado7-HelloWorld

    1.首先在Tomat中将 Auto reloding enable去掉,去掉的目的不用每次更改代码,都要重新部署 2.创建dorado视图文件 2.1 视图文件的格式为xml 2.2 在view中添加 ...