javascript——日期时间实例
案例一：输出当前系统时间：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>获取当前系统时间</title> <script> window.onload = function(){ // 获取body元素 var oBody = document.body; // 设置定时器，每隔1秒执行一次该函数 setInterval(fnTime,1000); //页面加载完先执行日期函数，防止刷新时显示空白 fnTime(); // 将小于两位的数字变成两位的数字 function toDouble(num){ return num < 10 ? '0' + num : '' + num; }; // 时间函数体 function fnTime(){ // 获取日期对象 var myDate = new Date(); // 获取年月日时分秒 var iYear = myDate.getFullYear(); var iMonth = myDate.getMonth()+1; var iDay = myDate.getDay(); var iHour = myDate.getHours(); var iMin = myDate.getMinutes(); var iSec = myDate.getSeconds(); var str = ''; // 将iDay的值对应iWeek数组的下标来获取星期 var iWeek = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六']; // 将当前的年月日时分秒保存在字符串str中 str = '今天是：' + iYear + '年' + iMonth + '月' + iWeek[iDay] + ',' + toDouble(iHour) + ':' + toDouble(iMin) + ':' + toDouble(iSec); // 将时间直接输出到body页面上显示出来 oBody.innerHTML = str; }; }; </script> </head> <body> </body> </html>
注意点：
1）getMonth()返回值是 0——11
在获取月份的时候就得在后面加1，不然获取到的是上一个月的月份。
2）getDay()返回星期几（0——6）
0 ——> 星期日
1 ——> 想起一
2 ——> 星期二
3 ——> 星期三
4 ——> 星期四
5 ——> 星期五
6 ——> 星期六
思想：放入数组iWeek = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];，利用数组下标与getDay()的值对应取值
3）细节问题：将一位数处理成两位数的表示
通过toDouble函数三目运算判断或者用if else 判断
--------------------------------------------------------------------------------------------------------------------------------
案例二：图片模拟系统时间
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片时间</title> <script> window.onload = function(){ // 获取相关元素 var oP = document.getElementById('time'); var aImg = document.getElementsByTagName('img'); // 设置定时器 setInterval(fnTime ,1000); //页面加载完立即执行定时器，防止刷新出现空白 fnTime(); // 十位补零变两位 function toDouble(num){ return num <10 ? '0' + num : '' + num; } // 时间函数 function fnTime(){ // 获取日期对象及时分秒 var myDate = new Date(); var iHour = myDate.getHours(); var iMin = myDate.getMinutes(); var iSec = myDate.getSeconds(); // 将获取到的时分秒保存到字符串str中 var str = toDouble(iHour) + toDouble(iMin) + toDouble(iSec); // 将时分秒赋给p标签显示在页面上 oP.innerHTML = str; // str = '150556' //str.charAt()选择字符串中的第几个字符，默认从0开始，正好和图片数组中图片路径数字对应[str.charAt(i)对应相应的图片数字] // console.log(str.charAt(4)); // aImg[4].src = 'img/' + str.charAt(4) + '.JPG'; // aImg[5].src = 'img/' + str.charAt(5) + '.JPG'; for(var i = 0; i<str.length; i++){ aImg[i].src = 'img/' + str.charAt(i) + '.JPG'; } }; }; </script> </head> <body> <p id="time" style="font-size:30px;"></p> <img src="img/0.JPG" /> <img src="img/0.JPG" /> <img src="img/0.JPG" /> <img src="img/0.JPG" /> <img src="img/0.JPG" /> <img src="img/0.JPG" /> </body> </html>
注意点：
六张图片按顺序对应时分秒存在字符串str中，然后通过str.charAt()方法找到数组中对应的图片路径，最后通过for循环，输出六张图片对应的时分秒。
----------------------------------------------------------------------------------------------------------------------------------------------
案例三：倒计时1：APP上线倒计时（天时分秒）
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <script> // var t = Math.floor((iNew - iNow)/1000); // 毫秒 - 秒 // var str = Math.floor(t/86400)+'天'+Math.floor(t%86400/3600)+'时'+Math.floor(t%86400%3600/60)+'分'+t%60+'秒'; // alert( str ); // 天：Math.floor(t/86400) // 时：Math.floor(t%86400/3600) // 分：Math.floor(t%86400%3600/60) // 秒：t%60 // 数字形式：new Date( 2013,4,1,9,48,12 ); // 字符串形式：new Date('June 10,2013 12:12:12'); // January、February、March、April、May、June、 // July、August、September、October、November、December window.onload = function(){ var oBody = document.body; setInterval(showCountDown ,1000); showCountDown(); // 将小于两位的数字变成两位的数字 function toDouble(num){ return num < 10 ? '0' + num : '' + num; }; function showCountDown(){ // 获取当前时间 var iNow = new Date(); // 获取结束时间 var iNew = new Date('2015/6/10,00:00:00'); // alert(Math.floor(4.9)); //向下取整 返回4 // 获取剩余秒数，因为有小数可能，所以就需要向上取整 var t = Math.floor((iNew.getTime() - iNow.getTime())/1000); // alert(t); // 获取天时分秒 var d = Math.floor(t/(60*60*24)); var h = Math.floor((t/(60*60))%24); var m = Math.floor((t/60)%60) var s = Math.floor(t%60); // 然后将秒转换为天时分秒【下面的那种算法也行，不知道怎么算的~_~】 // var str = Math.floor(t/86400) +'天'+ Math.floor(t%86400/3600) +'时'+ Math.floor(t%86400%3600/60) +'分'+ t%60 +'秒'; var str = d +'天'+ toDouble(h) +'时'+ toDouble(m) +'分'+ toDouble(s) +'秒'; oBody.innerHTML = '距离APP上线倒计时：' + str; }; }; </script> </head> <body> </body> </html>
倒计时2：高考倒计时（天）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>考试天数倒计时</title> <script> window.onload = function(){ // 获取相关元素 var oShowTime = document.getElementById('showtime');
// 获取当前时间 var curTime = new Date();
// 获取结束时间
var endTime = new Date('2015,6,6');
// 获取剩余天数
var days = Math.ceil((endTime.getTime()-curTime.getTime())/(1000*60*60*24)); if(days>0){ oShowTime.innerHTML = days; } }; </script> </head> <body> <div>距离高考还有：<span id="showtime"></span>天</div> </body> </html>
倒计时关键点：
1）知道当前时间new Date()和结束时间new Date("2015,6,10"); 可通过new Date("2015,6,10");自定义时间
2）调用getTime()将时间转换成毫秒来进行运算
3）将毫秒转换成天的计算
1天 = 24h, 1h=60m, 1m=60s, 1s=1000ms
天：Math.floor(t/86400)
时：Math.floor(t%86400/3600)
分：Math.floor(t%86400%3600/60)
秒：t%60
或者：
天： Math.floor(t/(60*60*24));
时： Math.floor((t/(60*60))%24);
分： Math.floor((t/60)%60)
秒： Math.floor(t%60);
4)Math.ceil —— 向上取整 （Math.ceil(12.2) == 13）
Math.floor —— 向下取整 (Math.floor(12.9) == 12)
Math.round —— 四舍五入 (Math.round(12.2) == 12 ;Math.round(12.9) == 13)
此处采用向上取整
-------------------------------------------------------------------------------------------------------------------------------------------
案例三：限时抢购倒计时
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js代码实现限时抢购还剩 ？天？时？分？秒的计算并显示，要求实现自动倒计时效果</title> <script> window.onload = function(){ // 获取相关元素 var oBox = document.getElementById('box'); var oShowTime = document.getElementById('showtime'); setInterval(autoCount,1000); // 页面加载完成执行，防止刷新显示空白 autoCount(); // 将小于两位的数字变成两位的数字 function toDouble(num){ return num < 10 ? '0' + num : '' + num; }; //倒计时函数 function autoCount(){ // 获取当前时间(变化) var currTime = new Date(); // 获取结束时间(不变) var endTime = new Date("2015,6,10"); // 获取剩余时间的秒数 var times = (endTime.getTime()-currTime.getTime())/1000; //换算成秒 // 将秒转换成天时分秒 var surplusDay = Math.floor(times/(24*60*60)); var surplusH = Math.floor(times/(60*60)%24); var surplusM = Math.floor(times/60%60); var surplusS = Math.floor(times%60); // 将时分秒转换为两位数字 var h = toDouble(surplusH); var m = toDouble(surplusM); var s = toDouble(surplusS); // 判断剩余时间是否小于0，执行相应操作 if(times < 0){ oBox.innerHTML = "抢购已结束"; }else{ oShowTime.innerHTML = surplusDay+"天"+h+"时"+m+"分"+s+"秒"; } }; }; </script> </head> <body> <div id="box">限时抢购还剩：<span id="showtime"></span></div> </body> </html>
倒计时关键点：
1）知道当前时间new Date()和结束时间new Date("2015,6,10"); 可通过new Date("2015,6,10");自定义时间
2）调用getTime()将时间转换成毫秒来进行运算
3）将毫秒转换成天的计算
1天 = 24h, 1h=60m, 1m=60s, 1s=1000ms
4)Math.floor()用于取整，只取数字的整数部分，即省掉小数部分。 如果是字符串就只取字符串中开头的数字，如果开头没有数字就返回NaN。
5）计算剩余小时，分钟，秒需要注意的问题：
需要采用求余，整数部分是比其大一单位的，所以需要取余数部分，采用Math.floor()再取整数部分，是因为小数部分是比其小一单位的来计算。
比如求还剩多少小时：times的单位是秒，先把times换算成小时，即times/(60*60)，总的剩余times/(60*60)小时，但是现在要除去天的时间，所以times/(60*60)%24 去掉
了天的部分，取余得到小时，此时times/(60*60)%24可能为小时，调用Math.floor(times/(60*60)%24)取整
----------------------------------------------------------------------------------------------------------------------------------------------
案例三2：带按钮倒计时
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> .t1 { width:400px; } </style> <script> /* var t = Math.floor( new Date().getTime()/1000 ); alert( Math.floor(t/86400)+'天'+Math.floor(t%86400/3600)+'时'+Math.floor(t%86400%3600/60)+'分'+t%60+'秒' ); */ window.onload = function () { var aInp = document.getElementsByTagName('input'); var iNow = null; var iNew = null; var t = 0; var str = ''; var timer = null; aInp[2].onclick = function () { iNew = new Date(aInp[0].value); clearInterval( timer ); timer = setInterval (function (){ iNow = new Date(); // t = Math.floor( ( iNew.getTime() - iNow.getTime() ) / 1000 ); t = Math.floor( ( iNew - iNow ) / 1000 ); if ( t >= 0 ) { str = Math.floor(t/86400)+'天'+Math.floor(t%86400/3600)+'时'+Math.floor(t%86400%3600/60)+'分'+t%60+'秒'; aInp[1].value = str; } else { clearInterval( timer ); } }, 1000); }; }; </script> </head> <body> 距离：<input class="t1" type="text" value="November 27,2015 22:3:0" /><br /> 还剩：<input class="t1" type="text" /> <input type="button" value="开始倒计时吧" /> </body> </html>
