js—时间对象

xiaoxiao2021-02-28 82

1.Date 对象用于处理日期和时间。 2.创建 Date 对象的语法：var myTime=new Date() 注：Date 对象会自动把当前日期和时间保存为其初始值。 3.Date对象的常用方法： Date()：返回当日的日期和时间（直接使用，不需要对象调用） getDate()：返回一个月的某一天（1~31） getDay()：返回一周中的某一天（0~6分别代表周日~周六） getMonth()：返回月份（0~11） getFullYear()：返回四位数字的年份 getHours()：返回小时数（0~23） getMinutes()：返回分钟数（0~59） getSeconds()：返回秒数（0~59） getTime()：返回 1970 年 1 月 1 日至今的毫秒数。（用来判断一段程序运行的时间） 4.时间对象的应用：

练习1：把当前时间做一个字符串拼接，并用计时器定时更新时间，且要求页面刷新时也显示时间

<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> h1{margin-top:100px; margin-left:40px; font-weight:bolder; color:#000; font-size:36px;} </style> </head> <body> <h1 id="h1"></h1> <script> var oH1=document.getElementById("h1"); showtime(); setInterval(function(){ showtime(); },1000) function showtime(){ var myTime = new Date();//当时在写这段代码的时候，犯了一个很致命也很让人啼笑皆非的错误，没有把定义时间对象放在计时器外面，相当于页面刷新时获取到了一个时间对象，而后来计时器里用该对象获取时间的方法全部无用，因为该对象在页面刷新之后已失效，因此就导致了时间不能与系统时间同步的错误。后来将定义时间对象放在计时器里面就解决了这一问题 oH1.innerHTML=myTime.getFullYear()+"年"+(myTime.getMonth()+1)+"月"+myTime.getDate()+"日"+" "+myTime.getHours()+":"+myTime.getMinutes()+":"+myTime.getSeconds(); } </script> </body> 12345678910111213141516171819202122 12345678910111213141516171819202122

但是像这种情况，如果月份、日期等是个位数时显示出来就会很难看，所以应该对输出格式做统一规定：

当然，也可以用有数字的图片来渲染表达的效果：

<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> body{margin:0;} #p1{font-size:50px;} ul,li,p{margin:0;padding:0;} li{list-style:none; float:left;} #li1{width:122px; height:172px; background:url(img/colon.JPG);} </style> </head> <body> <p id="p1"></p> <ul> <li><img src="img/0.JPG" width="122" height="172"/></li> <li><img src="img/0.JPG" width="122" height="172"/></li> <li id="li1"></li> <li><img src="img/0.JPG" width="122" height="172"/></li> <li><img src="img/0.JPG" width="122" height="172"/></li> <li id="li1"></li> <li><img src="img/0.JPG" width="122" height="172"/></li> <li><img src="img/0.JPG" width="122" height="172"/></li> </ul> <script> var aImg = document.getElementsByTagName('img'); showTime(); setInterval(function(){ showTime(); },1000) function $( v ){//$为函数名 if( typeof v === 'function' ){ window.onload = v; } else if ( typeof v === 'string' ) { return document.getElementById(v); } else if ( typeof v === 'object' ) { return v; } } function addZ(a){ return a<10 ? a='0'+a : a=''+a; } function showTime(){ var myTime = new Date(); var iYear = myTime.getFullYear(); var iMonth = myTime.getMonth()+1; var iDate = myTime.getDate(); var iWeek = myTime.getDay(); if(iWeek === 0)iWeek = '星期日'; if(iWeek === 1)iWeek = '星期一'; if(iWeek === 2)iWeek = '星期二'; if(iWeek === 3)iWeek = '星期三'; if(iWeek === 4)iWeek = '星期四'; if(iWeek === 5)iWeek = '星期五'; if(iWeek === 6)iWeek = '星期六'; var iHours = myTime.getHours(); var iMinutes = myTime.getMinutes(); var iSeconds = myTime.getSeconds(); var str1 = ''; var str2 = ''; str1 = addZ(iHours)+addZ(iMinutes)+addZ(iSeconds); str2 = addZ(iYear)+"年"+addZ(iMonth)+"月"+addZ(iDate)+"日"+iWeek; $('p1').innerHTML = str2; for(var i = 0; i<aImg.length;i++){ aImg[i].src = 'img/' + str1.charAt(i) +'.JPG'; } } </script> </body> 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172

5.倒计时原理将要达到的时间是固定的，而现在的时间在不断地变化，所以倒计时就是不断地用将来要到达的时间减去现在的时间（相减的结果是毫秒数，需要通过数学计算换成天小时*分）

练习：做两个输入框，距离第一个输入框的时间，还剩第二个输入框显示时间，点击按钮展示（用字符串传入）当差值为0的时候要停止计时器

<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> #input1{border:none; width:400px; height:50px; border:1px #666 solid;} #input3{border:none; width:300px; height:50px; border:1px #666 solid;} #input2{cursor:pointer;} #div1{position:relative; left:50%; margin-left:-400px;margin-top:300px;} </style> </head> <body> <div id="div1"> <input id="input1" type="text" placeholder='请输入您想到达的未来时间：(格式如September 1,2016 9:48:12)' /> <input id="input2" type="button" value='查看您距离未来时间还有多久' /> <input id="input3" type="text" placeholder='这里将显示您距离未来时间所剩的时间：' /> </div> <script> var oDiv=document.getElementById("div1"); var aInput=oDiv.getElementsByTagName("input"); var timer=null; aInput[1].onclick=function(){ clearInterval(timer); timer=setInterval(function (){ fn(); },1000) } function fn(){ var iNew = new Date((aInput[0].value)); var iNow = new Date(); var time = Math.floor((iNew - iNow)/1000); var day ='0'+Math.floor(time/86400); var hour =Math.floor(time%86400/3600); var minute =Math.floor(time%3600/60); var second =time%60; var str = '距离结束还有'+day+'天 '+judge(hour)+'小时 '+judge(minute)+'分钟 '+judge(second)+'秒'; aInput[2].value=str; if(time<=0){ clearInterval(timer); aInput[2].value = '时间到！'; } } function judge(a){ return a<10 ? a='0'+a : a=''+a; } </script> </body> 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647

注：在本题中，输入未来时间格式为字符串的原因是：创建的时间对象返回的数本身就是一个字符串，如alert(mytime=new Date())返回的内容是如下格式的字符串

上面代码的运行结果：

在到达预计时间后：

转载请注明原文地址: https://www.6miu.com/read-57410.html

技术

最新回复(0)