js課程 3-9 js內置對象定時器和超時器怎麼使用

時間 2020-05-22

標籤課程內置對象定時器超時怎麼使用欄目 JavaScript 简体版

原文原文鏈接

js課程 3-9 js內置對象定時器和超時器怎麼使用

1、總結

一句話總結：定時器: 1.定義 sobj=setInterval(func,1000); 2.清除 clearInterval(sobj); 超時器: 1.定義 tobj=setTimeout(func,1000); 2.清除 clearTimeout(tobj);

一、js日期對象的方法有什麼規律？

JS日期對象的方法中，年月日不帶s，時分秒帶s。html

getFullYear();
getMonth();
getDate();
getHours();
getMinutes();
getSeconds();函數

二、js日期對象的獲取月方法使用的時候的注意事項是什麼？

js中的月是從0開始的，因此咱們使用的時候能夠加上1。動畫

三、如何讓div中的span中的文字垂直居中？

div的高度width設置爲50px，同時，行高也設置成50px，也就是行高和div的高設置成同樣spa

四、getDate()是獲取日期的函數，setInterval(getDate(),1000)的寫法正確麼？

不正確，應該是setInterval(getDate,1000)，表示的是過1秒鐘以後自動執行，而不是加圓括號
這裏放的是代碼段function(){}，而不是方法code

五、getDate()是獲取日期的函數，getDate和getDate()的區別是什麼？

getDate是這個函數的代碼段
getDate()是執行這個函數htm

六、若是獲取一個函數的代碼段？

getDate()是獲取日期的函數，則getDate是這個函數的代碼段，也就是去掉方法的圓括號對象

七、js中的通常函數在傳遞匿名函數作參數的時候，匿名函數的地位是什麼？

是代碼段，和一個方法不加方法名的效果是同樣的
一個方法不加方法名的話就是一個變量，這裏變量裏面的內容就是這個方法的代碼段blog

八、匿名函數中執行某個方法的簡寫形式是什麼？

把方法的代碼段放到匿名函數的位置，即方法不加圓括號的那個對應方法代碼段的那個變量ip

61  sobj=setInterval(getDate,1000);

九、函數的好處是什麼？

封裝的功能到時候調用起來特別方便，因此功能通常都要封裝便於複用。get

十、sublime顯示函數的快捷鍵是什麼？

ctrl+R

十一、定時器和超時器的區別是什麼？

定時器是週期性的
超時器是一次性的

十二、定時跳轉怎麼實現？

用定時器（判斷到0後跳轉便可）

27 <script> 28 sidobj=document.getElementById('sid'); 29 s=3; 30 31 sobj=setInterval(function(){ 32  sidobj.innerHTML=--s; 33 34 if(s==0){ 35 // clearInterval(sobj); 36  location='http://www.baidu.com'; 37  } 38 },1000); 39 </script>

超時器也能夠

 1 <script>  2 bidobj=document.getElementById('bid');  3  4 tobj=setTimeout(function(){  5  location='http://www.baidu.com';  6 },6000);  7  8 bidobj.onclick=function(){  9  clearTimeout(tobj); 10 } 11 </script>

1三、動畫怎麼實現？

經過定時器和超時器。一次性動畫用超時器，循環動畫用定時器。

2、js內置對象定時器和超時器怎麼使用

一、相關知識

日期對象:
1.生成對象
dobj=new Date();

2.方法:
getFullYear();
getMonth();
getDate();
getHours();
getMinutes();
getSeconds();

3.秒錶實例

定時器:
1.定義
sobj=setInterval(func,1000);

2.清除
clearInterval(sobj);

超時器:
1.定義
tobj=setTimeout(func,1000);

2.清除
clearTimeout(tobj);

二、代碼

完整的秒錶實例

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>index</title>
 6     <style>
 7  *{
 8  font-family: 微軟雅黑;
 9         }
10  .clock{
11  width:200px;
12  height:50px;
13  background: #000;
14  color:#0f0;
15  font-weight: bold;
16  border-radius:50px;
17  text-align:center;
18  line-height:50px;
19  font-size:30px;
20         }
21     </style>
22 </head>
23 <body>
24     <div class="clock">
25         <span id='sid'></span>
26     </div>
27     <br>
28     <button id='bid'>中止</button>
29     <button id='bid2'>開始</button>
30 </body>
31 <script>
32 //日期對象
33 
34 function getDate(){ 35  dobj=new Date(); 36  hour=dobj.getHours(); 37     if(hour<10){ 38  hour='0'+hour; 39  } 40 
41  minute=dobj.getMinutes(); 42     if(minute<10){ 43  minute='0'+minute; 44  } 45 
46  second=dobj.getSeconds(); 47     if(second<10){ 48  second='0'+second; 49  } 50 
51  str=hour+':'+minute+':'+second; 52  sidobj=document.getElementById('sid'); 53  sidobj.innerHTML=str; 54 } 55 
56 getDate(); 57 start(); 58 
59 //開始函數
60 function start(){ 61  sobj=setInterval(getDate,1000); 62 } 63 
64 //中止函數
65 function stop(){ 66  clearInterval(sobj); 67 } 68 
69 //關閉秒錶
70 bidobj=document.getElementById('bid'); 71 bidobj.onclick=function(){ 72  stop(); 73 } 74 
75 //開始秒錶
76 bid2obj=document.getElementById('bid2'); 77 bid2obj.onclick=function(){ 78  start(); 79 } 80 
81 </script>
82 </html>

過幾秒鐘後頁面跳轉

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>index</title>
 6     <style>
 7  *{
 8  font-family: 微軟雅黑;
 9         }
10  .clock{
11  width:100%;
12  height:50px;
13  background: #000;
14  color:#0f0;
15  font-weight: bold;
16  border-radius:50px;
17  text-align:center;
18  line-height:50px;
19         }
20     </style>
21 </head>
22 <body>
23     <div class="clock">
24         <span>提交成功，<span id='sid'>3</span>秒後頁面即將跳轉到百度!</span>
25     </div>
26 </body>
27 <script>
28 sidobj=document.getElementById('sid'); 29 s=3; 30 
31 sobj=setInterval(function(){ 32  sidobj.innerHTML=--s; 33 
34     if(s==0){ 35         // clearInterval(sobj);
36  location='http://www.baidu.com'; 37  } 38 },1000); 39 </script>
40 </html>

 1 <script>
 2 bidobj=document.getElementById('bid');  3 
 4 tobj=setTimeout(function(){  5  location='http://www.baidu.com';  6 },6000);  7 
 8 bidobj.onclick=function(){  9  clearTimeout(tobj); 10 } 11 </script>