本文说明了JavaScript时间和日期操作。分享给大家参考，如下：

本来想在网上找一些js的例子练练手。结果发现了一本书《突破JavaScript编程实例五十讲》。看完内容还不错，我就下去了；

之后我下载了这本书的源代码，才发现这本书是2002年编译的。代码运行后，有些代码可以运行，有些代码已经过期，因为其中使用的一些语言已经被淘汰。

其次，因为是很久以前写的，当时大概没有把css、js和JS、html分开的想法，都混在一起，看着很不舒服。

此外，代码末尾没有分号，还有各种没有关键字var的隐藏全局变量，影响了程序的整洁和简洁。

所以我就想，为什么不重写他的代码来满足书中的要求呢？

在此，我也向这本书的作者马建兵致敬，感谢他们的辛勤付出。

由于空间的限制，JS和CSS并不是作为单独的文件存储的，它们都在html文件中，但是是分开的。

1.指定位置的时钟显示

时钟总是显示在网页的中间，12小时制。

渲染：

源代码：

！doctype HTML HTML Head metachartset=' utf-8 ' title指定位置的时钟/title style body { font-size : 30px；font-family : Arial；背景技术# fef4d9} #当前时间{ color: # 66ff00font-size : 30px；} # live clock { position : absolute；top :50%；左侧：50%；宽度： 250 px；高度： 100像素；margin :-50px 0 0-125 px；} p { text-align : center；color : # ff 00 ff；margin: 0px}/style/head body div id=' live clock ' div id=' show '/div/div脚本函数display(){ var Digital=new Date()；var hours=digital . gethours()；var分钟=digital . getminutes()；var秒=digital . getseconds()；var dn=' AMIf(hours12) //改为12小时{ dn=' PM小时=小时-12；} if(hours==0)hours=12；if(分钟=9)分钟='0 '分钟；//如果(秒=9)秒=' 0 '秒，则改为两位数显示；var myclock='p id='Current-time '当前时间为：/pp '小时' : '分钟' : '秒' ' dn '/p '；var live clock=document . getelementbyid(' live clock ')；live clock . innerhtml=my clock；setTimeout('display()'，1000)；}显示()；/script /body/html2，拨号时钟

因为书里的代码太老了，看不懂，我自己写了一个新的。效果图如下：

源代码：

！doctype html html head meta charset=' utf-8 ' title表针式时钟/title style body { background : # fef4d 9；} # time { position:绝对值宽度： 212像素；高度： 216像素；前：50%；左侧： 50%;边距：-108像素0-106像素；border: 2px固体黄色；} .时间号{位置：绝对值；} # pt0 { position : absolutetop 336020 pxleft : 105 pxborder : 4px纯红；高度： 90pxz-index : 1px} # pt1 { position : absolutetop 336035 pxleft : 105 pxborder : 4px纯蓝；高度： 75pxz-index : 100 px} # pt2 { position : absolutetop 336050 pxleft : 105 pxborder : 4px固体黄色；高度： 60pxz指数： 110 px}/style/head body div id=' time ' div id=' c0 ' class=' timeNum '/div id=' C1 ' class=' timeNum ' 1/div id=' C2 ' class=' timeNum ' 2/div id=' C3 ' class=' timeNum ' 3/div id=' C4 ' class=' timeNum ' 4/div id=' C5 ' class=' timeNum ' 5/div id=' C6 ' class=' timeNum ' 6/div id=' C7 ' class=' }//将数字以圆形的形式显示在屏幕上。根据三角函数的计算函数clock unm(){ for(var I=1；i13I){ var C1=getid(' c ' I)；角度=I * 30/360 *数学* 2；c1.style.top=0 (100-Math.cos(角度)* 100)' px '；c1.style.left=100 Math.sin(角度)* 100 ' px} }函数clockRotate(){ //获取当前的时间var start=新日期();var H=开始。gethours()；var M=开始。getminutes()；var S=开始。getseconds()；//设置其旋转的角度，分针每次6度，秒针每次6度，时针每次0.5度var MDu=M * 6；var hDu=M * 0.5H * 30var SDu=S * 6；var pt0=getid(' pt0 ')；var pt1=getid(' pt1 ')；var pt2=getid(' pt2 ')；//设置其绕末端旋转，宽度是在中间，高度是在整个高度的末尾，采用百分数的形式pt0.setAttribute('style '，' ' ' transform : rotate(' SDu ' deg)；''转换-原始：中心93%;');pt1.setAttribute('style '，' ' ' transform : rotate(' MDu ' deg)；''转换-原始：中心94%;');pt2.setAttribute('style '，' ' ' transform : rotate(' HDu ' deg)；''转换-原始：中心95%;');} //每隔一毫秒检测一次setInterval(时钟状态，100);函数init(){ ClocKnum()；} init()；/script/html3、带按钮开关的形式时钟

采用按钮的形式进行控制，按下开，显示时间和日期，按下关，则清空。效果图如下

源代码：

！doctype html html head meta charset=' utf-8 ' title带按钮开关的形式时钟/title style body { background : # aeb CDF；}表单{ position : absolute eleft :50 top :50 z索引：5;}输入{ color:red}输入[type=' text ']{ color : black；} .中心{位置：绝对值；前：50%；左侧： 50%;transform: translate(-50%，-50%)；border: 2px固体黄色；宽度： 220 pxheight : 42 xpadding : 10px }/style/head body div class=' center ' form name=' clock ' input type=' text ' name=' disp ' value=' size=30 onFocus=' this。blur()' br输入类型=' button '名称=' rad '值=' off ' id=' off BTN '关输入类型='按钮'名称='rad '值=' on ' id=' onbtn '开/form div /body脚本/公共事件var common={ //获取id getid :函数(id){返回文档。getelementbyid(id)；}, //绑定事件：function(元素、eventName、侦听器){ if(元素。addevent listener){元素。addevent listener(事件名称，listener，false)；} else if(元素。attachevent){元素。attachevent(' on '事件名称，侦听器)；}其他元素[' on '事件名称]=侦听器；}, } //时间的方法与属性var time={ //用来标记是开还是关，0表示关enabled:0，//存储星期day:['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'], //设定和显示时间//注意中间用了toLocaleString()；time _ set :函数(){ var today=new Date()；TM=window.setTimeout('time .Time_Set()'，1000)；var timetr=今日。tolocalestring()“”时间。今天。getday()]；文件。时钟。disp。value=timeStr控制台。log(tolocalstring())；}, } //全局定时函数名字var TM//点击开事件var onbtn=公共。getid(' onbtn ')；common.on(onbtn，' click '，function(){ if(time。enabled==0){ time .time _ Set()；时间到了。enabled=1；} });//点击关事件BTN之外的var=common。getid(' off BTN ')；common.on(offbtn，' click '，function(){ if(time。enabled==1){ document。时钟。disp。值=' '；cleartime out(TM)；时间到了。enabled=0；} });/script/html4、年龄提示器

网页打开时依次弹出3个输入对话框，分别需要你输入你的出生日期（年月日),然后显示内容，显示你的出生年月，距离下一次你的生日还有多少时间，以及你活了多少时间。效果图：

源代码：

！doctype html html head meta charset=' utf-8 ' title年龄提示器/title style div { position : absolute；前：50%；左侧： 50%;transform:translate(-50%，-50%)；宽度： 375像素；高度： 200像素；border: 2px纯红；padd : 20px } p { margin : 0；边距-底部： 10px}输入{边距-底部： 10px}/style/head body bgcolor=' F9 fcb 6 ' div form p id=' birday '/p p p id=' age '/p输入类型=' text ' name='明年' size=' 47 ' value=' pI '已经存在了./p输入类型=“文本”名称='liveYear '大小='47 '值=' p '您已在本站停留了/p输入类型=text name=' input 1 ' size=10 value=' ' br/form/div/body脚本函数getid(id){返回文档。getelementbyid(id)；} var timerID=window。settimeout(' show time()'，1)；//弹出输入框，获取用户的出生日期，注意要把日期转化为数字var bMonth=parseInt(提示('你是哪个月出生的？（月份)','1-12'));var bDate=parseInt(提示('你是哪一天出生的？（天)','1-31'));var bYear=parseInt(提示('你是哪一年出生的？（年份)',' 1900-'新日期()。getFullYear()))；var tMonth=['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'];var corrMonth=t月[b月-1]；getid('birday ')。innerHTML='我出生于corrMonth '，' bDate '，' bYear ' .(' b月/b日期/“拜尔”)；//传入格式化后的时间，用来计算两个时间差下一个工作日，今天函数computeTime(nextAgeDay，today){ var day={ }；var liveSec=下一个年龄日。gettime()；var LTime=今日。GetTime()；var day sec=24 * 60 * 60 * 1000 var hour sec=60 * 60 * 1000 var minsec=60 * 1000 var TT=(-lTime liveSec)；//计算时间差，天，小时，分，秒一天。_ 1天=数学地板(TT/天秒);一天。_ 1小时=数学。地板((TT—日。_ 1天*天秒)/小时秒);一天。_ 1分钟=数学。地板((TT—日。_ 1天*天秒-天。_ 1小时*小时秒)/minsec)；一天数学地板(tt日。_ 1天*天秒-天。_ 1小时*小时秒-天。_ 1分钟* minsec)/1000)；返程日；} //计算距离下一岁还有多少天的时候，可以采用与现在的秒数相减取得时间函数showtime() { //获取当前日期var today=new Date()；var month=今天。get month()1；var date=今天。getdate()；var year=今日。getfull year()；//计算下一次生日是哪一年var nextAgeYearvar你的年龄=年-年；如果(b月| |((b)月==月)(日期b日期)){你的年龄-；下一年=第一年；} else { nextAgeYear=year} //下一年几岁var下一个年龄=你的年龄1；//将下一次生日时间格式化，默认时间在00:00;计算距离下一次生日还还有多长时间var nextAgeDay=新日期(“下一年”，“b月，' bDate '，00:00 ')；var day=computeTime(下一个工作日，今天);//将出生日期时间格式化，默认时间在00:00;计算已经活了多久了var bornAgeDay=新日期(' bYear '，' b月，' bDate '，00:00 ')；var lday=computeTime(today，bornAgeDay)；//将结果输出文件。表单[0]。明年。值=' day ._ 1天'天，天。_ 1小时'小时，一天。_ 1分钟'分钟，天_1sec "秒";getid('age ').innerHTML='我是你的歌岁，将在：转“下一个时代”；文件。表单[0]。活一年。值=' lday ._ 1日'天，日。_ 1小时'小时，每天。_ 1分钟，每天_1sec "秒";timerID=窗口。settimeout(' show time()'，1000)；} //第三个输入框，计算停留时间var sec=0；定义变量最小值=0;var Hou=0；IDT=窗口。settimeout('(update()；',1);函数update(){ if(sec==60){ sec=0；最小值=1;} if(min==60){ min=0；侯=1；}文档。表单[0]。输入1。值=侯时' min '分'秒'秒；IDT=窗口。settimeout('(update()；',1000);秒；} /script/html5、得到文件的最后修改时间

本节主要讲获取超文本标记语言文件的最后修改时间。效果如下，其实跟前面的例子很像。

源代码：

！doctype html html head meta charset=' utf-8 ' title获得文件的最后修改时间/title样式正文{ background:黄色；} .中心{位置：绝对值；前：50%；左侧： 50%;transform:translate(-50%，-50%)；宽度： 300像素；height: 110pxborder: 2px纯红；padd : 10px } p { text-align : center；余量： 0pxpadding : 10px }/样式/头模脚本//获得文件的格式化最后修改时间函数DocDate(){ var StrofLastMod=document。上次修改时间；//获得文件的最后修改时间，它是一个线类型的变量var months=['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'];//月份名变量，供转换var days=['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];//星期名变量，供转换var c=' ://用来分隔时，分，秒var mdate=新日期(StrofLastMod)；var月=月[mdate。getmonth()]；var date=mdate。GetDate()；var year=mdate。getfull year()；var day=days[mdate。GetDay()]；var分钟=mdate。getminutes()；var hours=mdate。gethours()；var秒=mdate。getseconds()；var MIlisec=mdate。GetMixels()；var dateStr=年'月'日'时'分'秒'毫秒；//获得格式化的文件最后修改时间返回日期字符串；} var div=文档。创建元素(' div ')；div . NAmE=' center var div son=document。创建元素(' div ')；divson.innerHTML=' pThis '此文件上次更新时间为：/PP ' DocDate()'/PP '文档。上次修改的'/p '；div。append child(div son)；文件。尸体。append child(div)；/脚本/正文/htmlPS:这里再为大家推荐几款比较实用的天数计算在线工具供大家使用：

在线日期/天数计算器：http://工具。JB 51。net/jisuanqi/date _ jisuanqi

在线日期计算器/相差天数计算器：http://工具。JB 51。net/jis uan qi/日期计算

在线日期天数差计算器：http://工具。JB 51。net/jis uan qi/online datejsq

在线天数计算器：http://工具。JB 51。net/jis uan qi/datejsq

更多关于Java脚本语言相关内容感兴趣的读者可查看本站专题： 《JavaScript时间与日期操作技巧总结》 、 《JavaScript+HTML5特效与技巧汇总》 、 《JavaScript错误与调试技巧总结》 、 《JavaScript数据结构与算法技巧总结》 及《JavaScript数学运算用法总结》

希望本文所述对大家Java脚本语言程序设计有所帮助。