微信扫一扫打赏支持

js课程 3-9 js内置对象定时器和超时器怎么使用

js课程 3-9 js内置对象定时器和超时器怎么使用

一、总结

一句话总结：定时器:    1.定义    sobj=setInterval(func,1000);        2.清除    clearInterval(sobj);        超时器:    1.定义    tobj=setTimeout(func,1000);        2.清除    clearTimeout(tobj);

 

1、js日期对象的方法有什么规律？

JS日期对象的方法中，年月日不带s，时分秒带s。

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

 

2、js日期对象的获取月方法使用的时候的注意事项是什么？

js中的月是从0开始的，所以我们使用的时候可以加上1。

 

 

3、如何让div中的span中的文字垂直居中？

div的高度width设置为50px，同时，行高也设置成50px，也就是行高和div的高设置成一样

 

4、getDate()是获取日期的函数，setInterval(getDate(),1000)的写法正确么？

不正确，应该是setInterval(getDate,1000)，表示的是过1秒钟之后自动执行，而不是加圆括号
这里放的是代码段function(){}，而不是方法

 

5、getDate()是获取日期的函数，getDate和getDate()的区别是什么？

getDate是这个函数的代码段
getDate()是执行这个函数

 

6、如果获取一个函数的代码段？

getDate()是获取日期的函数，则getDate是这个函数的代码段，也就是去掉方法的圆括号

 

7、js中的一般函数在传递匿名函数做参数的时候，匿名函数的地位是什么？

是代码段，和一个方法不加方法名的效果是一样的
一个方法不加方法名的话就是一个变量，这里变量里面的内容就是这个方法的代码段

 

8、匿名函数中执行某个方法的简写形式是什么？

把方法的代码段放到匿名函数的位置，即方法不加圆括号的那个对应方法代码段的那个变量

61     sobj=setInterval(getDate,1000);

 

9、函数的好处是什么？

封装的功能到时候调用起来特别方便，所以功能一般都要封装便于复用。

 

10、sublime显示函数的快捷键是什么？

ctrl+R

 

11、定时器和超时器的区别是什么？

定时器是周期性的
超时器是一次性的

 

12、定时跳转怎么实现？

用定时器（判断到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>

 

13、动画怎么实现？

通过定时器和超时器。一次性动画用超时器，循环动画用定时器。

 

 

二、js内置对象定时器和超时器怎么使用

1、相关知识

日期对象:
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);

 

2、代码

完整的秒表实例

 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>

 

 

 

 

 

 

 
posted @ 2018-07-08 17:21  范仁义  阅读(667)  评论(0)  编辑  收藏  举报