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拥有无用存储单元收集程序 ...
随机推荐
- 【JDBC】jdbc原理总结
1 什么是JDBC JDBC(Java DataBase Connectivity)就是Java数据库连接,说白了就是用Java语言来操作数据库.原来我们操作数据库是在控制台使用SQL语句来操作数据库 ...
- Part 1 - Getting Started(1-3)
https://simpleisbetterthancomplex.com/series/2017/09/04/a-complete-beginners-guide-to-django-part-1. ...
- 20155336 2016-2017-2《JAVA程序设计》第六周学习总结
20155336 2016-2017-2<JAVA程序设计>第六周学习总结 教材学习内容总结 第十章 串流(Stream): 数据有来源及目的地,衔接两者的是串流对象.如果要将数据从来源取 ...
- python编码(四)
一.预备知识 字符集 1, 常用字符集分类 ASCII及其扩展字符集作用:表语英语及西欧语言.位数:ASCII是用7位表示的,能表示128个字符:其扩展使用8位表示,表示256个字符.范围:ASCII ...
- 玩转git分支
搞个代码的管理工具,居然不弄上分支啥的东西.这简直太low了.尤其是在使用了传说中得很牛X的Git的时候,尤其显得low.拿着青龙偃月刀当烧火棍子使,关公知道了还不重反人间教育你!? 远程分支 要说分 ...
- linux环境下的mysql,httpd以及与宿主机的调试问题总结
1. 首先www服务器,在宿主主机浏览器无法访问? (1)修改linux的防火墙,允许宿主主机ip访问即可. (2)关闭防火墙,即可访问. service iptables stop; 2. mysq ...
- node 问题
安装:使用.msi直接安装就好,环境变量已经设置好了 1.问题:验证node是否正确安装 办法:直接计算1+1:创建服务器. 在项目文件夹的路径下,输入node命令,会看到一个提示符,这里只能输入直接 ...
- node API assert
1.assert.throws(block, [error], [message]): assert.throws( function(){ throw new Error('wrong'); }, ...
- Sql Server 2008 压缩数据库日志文件
第一步:将数据库设置为简单模式 选中数据库点右键->属性: 第二步:收缩数日志文件 1, 2, 第三步:将恢复模式改回为完整模式 如果你觉得用UI界面麻烦,那你就用SQL语句吧 ...
- redis开机自启动脚本(linux)
目前redis放在home下的文件夹中,写一个脚本,待系统启动的过程中,去启动该脚本. 脚本:redis.sh #!/bin/sh /home/juepei/Downloads/redis-3.0.0 ...