網頁顯示時間，時分秒轉化、倒計時原理
阿新 • • 發佈：2019-01-05
<script type="text/javascript"> //倒計時原理 = 未來時間點-現在時間點 //var iNow = new Date();//現在的時間點 年月日時分秒 //var iNow = new Date().getTime();//獲取1970年到現在的秒數 //var iNew = new Date('2018,2,22,13,40,20');//未來的時間點 年月日時分秒 //var iNew = new Date('March 22,2018,13:55:12'); //var t = (iNew-iNow)/1000;//毫秒 //數字形式:(2018,3,21,13,48,20);月從0開始算2實際位3月分 //字串形式：('June 10,2018,12:12:12'); //天:Math.floor(t/86400) //時:Math.floor(t%86400/3600) //分:Math.floor(t%86400%3600/60) //秒:Math.floor(t%60) //var str = Math.floor(t/86400) + '天' + Math.floor(t%86400/3600)+'時'+ Math.floor(t%86400%3600/60) + '分' + Math.floor(t%60)+'秒' //alert(str); </script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>js</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/> <style> *{margin: 0;padding: 0;} input{ width: 600px; height: 25px; margin: 10px 0; } </style> </head> <body> <script type="text/javascript"> function Showdate(){ var date = new Date(); var oTime1 = document.getElementById('time1'); //1:將日期格式轉化為:"yyyy-mm-dd hh:mm:ss"這種形式 var time1 = date.getFullYear()+'-'+checkTime((date.getMonth()+1))+ '-'+date.getDate()+' '+date.getHours()+':'+checkTime(date.getMinutes())+':'+checkTime(date.getSeconds()); //2.直接獲取年月日 var time2 = date.toLocaleDateString(); //3.直接獲取 "hh:mm:ss" var time3 = date.toLocaleTimeString(); //4.直接獲取 年月日 時分秒 var time4 = date.toLocaleString(); // 當時、分、秒、小於10時，則新增0 function checkTime(i){ if(i<10) return "0"+i; return i; } oTime1.innerHTML = '第一種形式: '+' '+ time1+'<br/>' +'第二種形式: '+' '+ time2+'<br/>' +'第三種形式:'+' '+ time3+'<br/>' +'第四種形式: '+' '+ time4+'<br/>'; }; setInterval('Showdate()',1000);//呼叫Showdate函式 setInterval(function(){ function initArray(){ this.length=initArray.arguments.length; for(var i=0;i<this.length;i++) this[i+1]=initArray.arguments[i] } var Day=new initArray( "星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"); var time=new Date(); today=new Date(); var year=time.getFullYear(); //獲取年份 var month=time.getMonth()+1; //獲取月份 var day=time.getDate(); //獲取日期 var hour=checkTime(time.getHours()); //獲取時 var minite=checkTime(time.getMinutes()); //獲取分 var second=checkTime(time.getSeconds()); //獲取秒 /****當時、分、秒、小於10時，則新增0****/ function checkTime(i){ if(i<10) return "0"+i; return i; } var oTime2=document.getElementById("time2"); oTime2.innerHTML='第五種形式: '+year+"年"+month+"月"+day+"日"+' '+Day[today.getDay()+1]+' '+hour+":"+minite+":"+second; },1000); //setInterval(fn,i) 定時器，每隔i秒執行fn </script> </head> <body> <div id="time1"></div> <div id="time2"></div> </body> </html>