javascript中date物件,Date物件,時鐘案列,setInterval,setTimeout,定時器
阿新 • • 發佈：2018-12-11
javascript中date物件,Date物件,時鐘案列,setInterval,setTimeout,定時器
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>javascript中date物件,Date物件,時鐘案列,setInterval,setTimeout,定時器,雪豹軟體工作室</title> <link rel="stylesheet" type="text/css" href="body.css"> <style type="text/css"> input { /*文字框樣式*/ font-size:50px; color: #CC0000; border-style: none; readonly:expression(this.readOnly=true);/*好像不起效果*/ } </style> <script type="text/javascript"> /* 頁面會在停留三秒之後彈出對話方塊！這個案例應用了setTimeout最基本的語法，setTimeout不會自動重複執行！ */ /* window物件是預設的全域性系統物件，所以使用時可以省略掉 window.setTimeout("方法名", 毫秒數);//setTimeout是window物件的方法,window可以省略不寫,可以直 接寫成setTimeout("方法名", 毫秒數); */ setTimeout("alert('對不起,雪豹軟體工作室讓您等候多時了!')", 3000); /* 這個知識點參考 http://www.jb51.net/article/56097.htm 這個知識點挺有用的，沒來得及看 alert("test = " + test); test = "testAAA"; var test; alert("test = " + test); */ //定義成全域性變數 var myTimeout; //測試方法 function myTest(){ myText = "my test!"; alert("內容 = " + myText); } var myText;//測試變數 var myDate = new Date(); var date2 = new Date("July 29, 2007,10:30:53"); //alert("時間：" + myDate + "-" + new Date()); //alert("時間 = " + date2); //var times = new Date(2017, 05, 18); //alert(times.toLocaleDateString()); document.write(myDate.getSeconds() + " getSeconds<br>"); document.write(myDate.getMinutes() + " getMinutes<br>"); document.write(myDate.getHours() + " getHours<br>"); document.write(myDate.getDay() + " getDay<br>");//星期幾,範圍是0-6(國外禮拜天稱為第一天,即禮拜天是0) document.write(myDate.getMonth() + " getMonth<br>");//範圍是0-11(一月至十二月)即國外的一月是0,0代表1月，11表代表12月 document.write(myDate.getDate() + " getDate<br>"); myDate.setDate(26);//設定成26號 document.write(myDate.getDate() + " getDate<br>"); document.write(myDate.getYear() + " getYear<br>");//年份基數是1900 document.write(myDate.getFullYear() + " getFullYear<br>"); var myDate2 = new Date("2010/1/1"); document.write(myDate2.getYear() + " getYear<br>"); document.write(myDate2.getFullYear() + " getFullYear<br>"); var index = 0; //顯示當前時間 function showTime(){ /* 之所以先清除一下，是因為怕有人多次點選了顯示時間的按鈕,即多次呼叫了showTime()方法，即多次執行了showTime()方法體中的程式碼，導 致myTimeout變數混亂,myTimeout變數累加的速度翻倍,到時候我們點選停止顯示時間按鈕的時候就無法正常正確停止了 */ clearTimeout(myTimeout);//先清除一下，再往下操作 index++; var myTime; var now = new Date(); /* myTime = now.getFullYear() + "-" + (now.getMonth() + 1) + "-" + now.getDate() + " " + now.getHours() + ":" + now.getMinutes() + ":" + now.getSeconds(); */ myTime = now.getFullYear() + "-"; if(now.getMonth() < 9){ myTime += "0"; } myTime += (now.getMonth() + 1) + "-"; if(now.getDate() <= 9){ myTime += "0"; } myTime += (now.getDate()) + " "; if(now.getHours() <= 9){ myTime += "0"; } myTime += (now.getHours()) + ":"; if(now.getMinutes() <= 9){ myTime += "0"; } myTime += (now.getMinutes()) + ":"; if(now.getSeconds() <= 9){ myTime += "0"; } myTime += (now.getSeconds()); //myTime += "-" +index document.getElementById("myTime").value = myTime; //console.log("當前時間 = " + myTime); //setInterval("showTime()", 1000); //setInterval是不能寫在被呼叫的函式裡面的，如果是，那麼就是次方呼叫，效率低下。 //showTime(); /* 相當於遞迴，即方法的自我呼叫 setTimeout方法不是定時器，setTimeout方法只執行一次，這裡是運用了遞迴，才能不斷的自我呼叫，做到了定時器的效果，其實setTimeout方法不是真正的定時器 真正的定時器是setInterval方法 */ /* 以下2種寫法方式都可以 */ //setTimeout是要寫在被多次呼叫的函式裡面的，就是遞迴。 //window.setTimeout("方法名", 毫秒數);//setTimeout是window物件的方法,window可以省略不寫 console.log(" myTimeout = " + myTimeout); myTimeout = setTimeout("showTime()", 1000);//這種寫法是setTimeout("方法名帶小括號，即showTime()，而且帶雙引號",毫秒數); //setTimeout(showTime, 1000);//這種寫法是setTimeout("方法名不帶小括號，即showTime，並且沒有雙引號",毫秒數); } //測試 function hello(){ alert("hello"); } //讓時間每秒走動一下 function now(){ //這是真正的定時器 // setInterval("showTime()", 1000); //setInterval("hello()", 3000);//測試 //myTimeout = setInterval(showTime, 1000); showTime(); } //停止顯示時間 function stopTime(){ // alert(" myTimeout = " + myTimeout); clearTimeout(myTimeout); } /* setTimeout和setInterval的知識點，可以參考網頁 http://www.jb51.net/article/20741.htm 總結 setTimeout: setTimeout()方法用於在指定的毫秒數後呼叫函式或計算表示式。 語法: setTimeout(code,millisec) setTimeout() 只執行code一次。如果要多次呼叫，請使用 setInterval() 或者讓 code 自身再次呼叫 setTimeout()。 setInterval: setInterval()方法可按照指定的週期（以毫秒計）來呼叫函式或計算表示式。 setInterval()方法會不停地呼叫函式，直到 clearInterval() 被呼叫或視窗被關閉。由 setInterval() 返 回的 ID 值可用作 clearInterval() 方法的引數。 語法: setInterval(code,millisec[,"lang"]) 引數: code 必需。要呼叫的函式或要執行的程式碼串。millisec 必須。週期性執行或呼叫 code 之間的時間間隔，以毫秒計。 返回值: 一個可以傳遞給 Window.clearInterval() 從而取消對 code 的週期性執行的值。 區別 通過上面可以看出，setTimeout和setinterval的最主要區別是： setTimeout只執行一次，也就是說設定的時間到後就觸發執行指定程式碼，執行完後即結束。如果執行的程式碼中再次運行同樣的setTimeout命令，則可迴圈執行。（即 要迴圈執行，需函式自身再次呼叫 setTimeout()） 而 setinterval是迴圈執行的，即每到設定時間間隔就觸發指定程式碼。這是真正的定時器。 setinterval使用簡單，而setTimeout則比較靈活，可以隨時退出迴圈，而且可以設定為按不固定的時間間隔來執行，比如第一次1秒，第二次2秒，第三次3秒。 我個人而言，更喜歡用setTimeout多一些！ */ </script> </head> <body onload="showTime()"> <p align="center"> <input type="text" id="myTime"/><br/> <input type="button" onclick="now()" value="now()顯示時間"> <input type="button" onclick="showTime()" value="showTime()顯示時間"> <input type="button" onclick="stopTime()" value="停止顯示時間"> <br><br> <input type="button" onclick="myTest()" value="測試變數"> </p> </body> </html>
