javascript-简单的日历实现及Date对象语法介绍(附图)


Posted in Javascript onMay 30, 2013

知识点:

主要是对Date对象的使用。(下面的介绍内容来自网络)

创建 Date 对象的语法:
var myDate=new Date()
Date 对象会自动把当前日期和时间保存为其初始值。
参数形式有以下5种:
new Date("month dd,yyyy hh:mm:ss");
 new Date("month dd,yyyy");
new Date(yyyy,mth,dd,hh,mm,ss);
new Date(yyyy,mth,dd);
new Date(ms);

注意:最后一种形式,参数表示的是需要创建的时间和GMT时间1970年1月1日之间相差的毫秒数。

参数的含义如下:

month:用英文表示月份名称,从January到December

mth:用整数表示月份,从(1月)到11(12月)

dd:表示一个月中的第几天,从1到31

yyyy:四位数表示的年份

hh:小时数,从0(午夜)到23(晚11点)

mm:分钟数,从0到59的整数

ss:秒数,从0到59的整数

ms:毫秒数,为大于等于0的整数

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() 方法代替。 1 3
toUTCString() 根据世界时,把 Date 对象转换为字符串。
toLocaleString() 根据本地时间格式,把 Date 对象转换为字符串。
toLocaleTimeString() 根据本地时间格式,把 Date 对象的时间部分转换为字符串。
toLocaleDateString() 根据本地时间格式,把 Date 对象的日期部分转换为字符串。
UTC() 根据世界时返回 1997 年 1 月 1 日 到指定日期的毫秒数。
valueOf() 返回 Date 对象的原始值。
var objDate=new Date([arguments list]);

简单日历实现:

效果:
javascript-简单的日历实现及Date对象语法介绍(附图) 
代码:

<style> 
#calendar{ 
font-size: 12px; 
} 
#calendar tbody td{ 
background:#033; 
color: #fff; 
text-align: center; 
padding: 2px; 
} 
.detail{ 
text-align:center; 
} 
</style> 
测试值:<input id="calendar_value" name="" type="text" /><br /> 
<button id="cal_prev">上一月</button> 
<button id="cal_next">下一月</button> 
<button id="cal_preyear">上一年</button> 
<button id="cal_nextyear">下一年</button> 
<button id="cal_today">今天</button> 
<div id="calendar" style="position:absolute;"></div> <script> 
var Calendar=function(year,monthNum,parent){ 
this.year=year; 
this.parent=parent; 
this.monthNum=monthNum-1; 
function isLeapYear(y){ 
return (y>0)&&!(y%4)&&((y%100)||!(y%400)); 
} 
this.numDays=[31,isLeapYear(this.year)?29:28,31,30,31,30,31,31,30,31,30,31][this.monthNum]; 
this.weekDays=["日","一","二","三","四","五","六"]; 
this.nowDate=new Date; 
this.init(); 
} 
Calendar.prototype={ 
setMonthNum:function(monthNum){ 
this.monthNum=monthNum-1; 
}, 
getMonthNum:function(){ 
return this.monthNum+1; 
}, 
setYearNum:function(year){ 
this.year=year; 
}, 
getYearNum:function(){ 
return this.year; 
}, 
init:function(){ 
this.setup(this.parent); 
}, 
reflesh:function(){ 
this.setup(this.parent); 
}, 
setup:function(id){ 
var date=this.nowDate; 
var cal=document.getElementById(id); 
cal.innerHTML=""; 
var calDiv=document.createElement("div"); 
var tab=document.createElement("table"); 
cal.appendChild(calDiv); 
calDiv.innerHTML=this.getSummary(); 
cal.appendChild(tab); 
calDiv.className="detail" 
this.thead=document.createElement("thead"); 
this.tbody=document.createElement("tbody"); 
this.tfoot=document.createElement("tfoot"); 
this.tr=document.createElement("tr"); 
this.td=document.createElement("td"); 
tab.appendChild(this.thead); 
tab.appendChild(this.tbody); 
this.setThead(); 
this.create(); 
}, 
setThead:function(){ 
var day=this.weekDays; 
var tr=this.tr.cloneNode(true); 
this.thead.appendChild(tr); 
for(var i=0;i<7;i++){ 
var td=this.td.cloneNode(true); 
tr.appendChild(td); 
td.innerHTML=day[i]; 
} 
}, 
create:function(){ 
var day=new Date(this.year,this.monthNum,1); 
var tr=this.tr.cloneNode(true); 
var dayCount=this.numDays; 
var that=this; 
that.tbody.appendChild(tr); 
for(var j=0;j<day.getDay();j++){ 
var td=that.td.cloneNode(true); 
tr.appendChild(td); 
td.innerHTML=" "; 
} 
for(var i=1;i<=dayCount;i++){ 
if((j+i)%7-1==0){ 
tr=that.tr.cloneNode(true); 
that.tbody.appendChild(tr); 
} 
var td=that.td.cloneNode(true); 
var s=i; 
if(i==that.nowDate.getDate()){ 
s="<font color='red'>"+i+"</font>"; 
} 
td.innerHTML=s; 
td.style.cursor="pointer"; 
td.onclick=function(){ 
document.getElementById("calendar_value").value=(that.getYearNum()+"/"+that.getMonthNum()+"/"+this.innerHTML) 
} 
td.onmouseover=function(){ 
this.style.background="#fff"; 
this.style.color="#033" 
} 
td.onmouseout=function(){ 
this.style.background=""; 
this.style.color="#fff" 
} 
tr.appendChild(td); 
} 
}, 
getSummary:function(){ 
var date=this.nowDate; 
return this.year+"年"+(this.monthNum+1)+"月"+date.getDate()+"日"; 
} 
} 
var cal=new Calendar(2013,5,"calendar"); 
cal.init(); 
document.getElementById("cal_prev").onclick=function(){ 
cal.monthNum--; 
if(cal.getMonthNum()<1){ 
cal.setMonthNum(12); 
cal.year--; 
} 
cal.reflesh(); 
} 
document.getElementById("cal_next").onclick=function(){ 
cal.monthNum++ 
if(cal.getMonthNum()>12){ 
cal.setMonthNum(1); 
cal.year++; 
} 
cal.reflesh(); 
} 
document.getElementById("cal_today").onclick=function(){ 
cal.setYearNum((new Date).getFullYear()); 
cal.setMonthNum((new Date).getMonth()+1) 
cal.reflesh(); 
} 
document.getElementById("cal_preyear").onclick=function(){ 
cal.setYearNum(cal.getYearNum()-1); 
cal.reflesh(); 
} 
document.getElementById("cal_nextyear").onclick=function(){ 
cal.setYearNum(cal.getYearNum()+1); 
cal.reflesh(); 
} 
</script>

总结:
以上代码未加注释,写得有点急。以后再整理一下,许多功能未实现。
Javascript 相关文章推荐
极酷的javascirpt,让你随意编辑任何网页
Feb 25 Javascript
jQuery获取文本节点之 text()/val()/html() 方法区别
Mar 01 Javascript
jquery 与NVelocity 产生冲突的解决方法
Jun 13 Javascript
用JS判别浏览器种类以及IE版本的几种方法小结
Aug 02 Javascript
简单谈谈jQuery(function(){})与(function(){})(jQuery)
Dec 19 Javascript
Javascript核心读书有感之表达式和运算符
Feb 11 Javascript
jQuery实现文本框输入同步的方法
Jun 20 Javascript
jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法(附demo源码下载)
Feb 25 Javascript
浅谈JavaScript的push(),pop(),concat()方法
Jun 03 Javascript
React实现双向绑定示例代码
Sep 19 Javascript
html5 canvas 详细使用教程
Jan 20 Javascript
js学习总结之DOM2兼容处理重复问题的解决方法
Jul 27 Javascript
javascript-简单的计算器实现步骤分解(附图)
May 30 #Javascript
js控制的遮罩层实例介绍
May 29 #Javascript
js控制web打印(局部打印)方法整理
May 29 #Javascript
js动态为代码着色显示行号
May 29 #Javascript
js判断背景图片是否加载成功使用img的width实现
May 29 #Javascript
jQuery JSON实现无刷新三级联动实例探讨
May 28 #Javascript
jQuery实现随意改变div任意属性的名称和值(部分原生js实现)
May 28 #Javascript
You might like
php实现扫描二维码根据浏览器类型访问不同下载地址
2014/10/15 PHP
php PDO实现的事务回滚示例
2017/03/23 PHP
PHP实现图的邻接矩阵表示及几种简单遍历算法分析
2017/11/24 PHP
PHP基于SPL实现的迭代器模式示例
2018/04/22 PHP
js cookies 常见网页木马挂马代码 24小时只加载一次
2009/04/13 Javascript
js prototype截取字符串函数
2010/04/01 Javascript
jquery实现心算练习代码
2010/12/06 Javascript
javascript 兼容所有浏览器的DOM扩展功能
2012/08/01 Javascript
jQuery实现响应浏览器缩放大小并改变背景颜色
2014/10/31 Javascript
javascript父子页面通讯实例详解
2015/07/17 Javascript
JavaScript调用客户端Java程序的方法
2015/07/27 Javascript
第一次接触神奇的Bootstrap表单
2016/07/27 Javascript
微信小程序 less文件编译成wxss文件实现办法
2016/12/05 Javascript
DWR3 访问WEB元素的两种方法实例详解
2017/01/03 Javascript
详解Javascript几种跨域方式总结
2017/02/27 Javascript
JavaScript实现获取用户单击body中所有A标签内容的方法
2017/06/05 Javascript
详解如何使用webpack+es6开发angular1.x
2017/08/16 Javascript
javaScript日期工具类DateUtils详解
2017/12/08 Javascript
Vue.js 时间转换代码及时间戳转时间字符串
2018/10/16 Javascript
JavaScript文本特效实例小结【3个示例】
2018/12/22 Javascript
使用原生js编写一个简单的框选功能方法
2019/05/13 Javascript
JS中实现一个下载进度条及播放进度条的代码
2019/06/10 Javascript
解决Vue动态加载本地图片问题
2019/10/09 Javascript
pytorch 调整某一维度数据顺序的方法
2018/12/08 Python
python实现贪吃蛇游戏
2020/03/21 Python
浅谈Python3多线程之间的执行顺序问题
2020/05/02 Python
银行求职推荐信范文
2013/11/30 职场文书
运动会广播稿400字
2014/01/25 职场文书
销售口号大全
2014/06/11 职场文书
一次性工伤赔偿协议书范本
2014/11/25 职场文书
行政处罚告知书
2015/07/01 职场文书
先进个人事迹材料(2016推荐版)
2016/03/01 职场文书
2019辞职报告范本3篇!
2019/07/23 职场文书
springboot读取nacos配置文件
2022/05/20 Java/Android
Android Studio实现带三角函数对数运算功能的高级计算器
2022/05/20 Java/Android
2022年显卡天梯图(6月更新)
2022/06/17 数码科技