JavaScript里的Date 对象属性及对象方法--实现简单的日历
上网搜索"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>'+' '+'</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>'+' '+'</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 对象属性及对象方法--实现简单的日历的更多相关文章
- C++类继承中,基类/当前对象属性/当前对象的构造顺序
[1]中提到,规范的派生类构造函数三个要点: 首先创建基类对象 应通过成员初始化列表,创建基类对象 应该初始化本派生类新增的成员变量 那在构造派生类实例的过程中,其基类(以及多继承的时候多个基类)/当 ...
- Spring中使用事务搭建转账环境方法二 相对简便的注解方法 ——配置文件注入对象属性需要setter方法 注解方法,不需要生成setter方法
XML配置文件代码如下: <?xml version="1.0" encoding="UTF-8"?> <beans xmlns=" ...
- 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($ ...
- fastjson转换包含date类型属性的对象时报错com.alibaba.fastjson.JSONException: For input string: "13:02:19"
问题:time类型数据插入不进mysql数据库:调试的时候报如下错误: Caused by: java.lang.NumberFormatException: For input string: &q ...
- JavaScript之面向对象的概念,对象属性和对象属性的特性简介
一.大家都知道,面向对象语言有一个标志,那就是他们都有类的概念,通过类我们可以创建任意多个具有相同属性和方法的对象.但ECMAScript(指定JavaScript标准的机构,也就是说JavaScri ...
- ECMA5中定义的对象属性特性和方法
ECMA5规定了只有内部才有的特性,描述了属性的各种特征,这些特性用于实现JavaScript引擎,因此在Js中不能直接访问他们.为了标识特性,我们一般会他们放入两对方括号中. ECMAScript中 ...
- 根据对象属性查找对象或者数组(根据对象属性查找某数组内符合该条件的对象,数组内对象属性check为true的对象,存放到数组内) 滚动轴样式
1.根据对象属性查找某数组内符合该条件的对象. optionComwords:[ {optionName:"名称1", optionCode: '1'}, {optionNam ...
- js动态更改对象属性值的方法
下面代码,替换属性名称包含date的属性中的T为空格. for (var o in data) { //console.info(eval("d ...
- js 对象属性和使用方法学习笔记
对象的引用 在ECMAScriipt中,不能访问对象的物理表示,只能访问对象的引用.每次创建对象,存储在变量中的都是对象的引用,而不是对象本身. 对象的废除 ECMASript拥有无用存储单元收集程序 ...
随机推荐
- 22条常用JavaScript开发小技巧
1.使用var声明变量 如果给一个没有声明的变量赋值,默认会作为一个全局变量(即使在函数内赋值).要尽量避免不必要的全局变量. 2.行尾使用分号 虽然JavaScript允许省略行尾的分号,但是有时不 ...
- 2018.09.16 bzoj1176: [Balkan2007]Mokia(cdq分治)
传送门 调了半天发现是输出优化打错了求心理阴影体积233 这题很简单啊. 一个修改操作x如果对一个询问操作y有贡献那么有. tx<ty,Xx<=Xy,Yx<=Yy" rol ...
- 2018.07.06 POJ2536 Gopher II(二分图匹配)
Gopher II Time Limit: 2000MS Memory Limit: 65536K Description The gopher family, having averted the ...
- 26. The Greenhouse Effect and Its Consequences 温室效应及其后果
26. The Greenhouse Effect and Its Consequences 温室效应及其后果 ①The greenhouse effect causes trouble by rai ...
- Android 6.0以上 需要运行时申请的权限
转载:http://www.cnblogs.com/tangs/articles/6377347.html 自从Android6.0发布以来,在权限上做出了很大的变动,不再是之前的只要在manifes ...
- #include 和 #import 的区别, @class 的含义
#import 和 #include 会包含这个类的所有信息,包括实体变量和方法 而#include比起 #import的好处不会引起重复包含 @class是用来做类引用的 @class就是告诉编译 ...
- 通过FactoryBean方式来配置bean
1.实现FactoryBean接口的java类: 2.相应的.xml文件:
- unusedjs
查看js的有效使用情况: https://github.com/gmetais/unusedjs Installation You need to open your console and writ ...
- [JS] Ajax请求会话过期处理
对于页面来说,处理session过期比较简单,一般只需在过滤器里面判断session用户是否存在,不存在则跳转页面到登陆页即可. 对于Ajax请求来说,这个办法则无效,只能获取到登录页的html代码. ...
- dorado7-HelloWorld
1.首先在Tomat中将 Auto reloding enable去掉,去掉的目的不用每次更改代码,都要重新部署 2.创建dorado视图文件 2.1 视图文件的格式为xml 2.2 在view中添加 ...