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、代码

完整的秒表实例

 <!doctype html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>index</title>
     <style>
         *{
             font-family: 微软雅黑;
         }
         .clock{
             width:200px;
             height:50px;
             background: #000;
             color:#0f0;
             font-weight: bold;
             border-radius:50px;
             text-align:center;
             line-height:50px;
             font-size:30px;
         }
     </style>
 </head>
 <body>
     <div class="clock">
         <span id='sid'></span>
     </div>
     <br>
     <button id='bid'>停止</button>
     <button id='bid2'>开始</button>
 </body>
 <script>
 //日期对象
 
 function getDate(){
     dobj=new Date();
     hour=dobj.getHours();
     if(hour<10){
         hour='0'+hour;
     }
 
     minute=dobj.getMinutes();
     if(minute<10){
         minute='0'+minute;
     }
 
     second=dobj.getSeconds();
     if(second<10){
         second='0'+second;
     }
 
     str=hour+':'+minute+':'+second;
     sidobj=document.getElementById('sid');
     sidobj.innerHTML=str;
 }
 
 getDate();
 start();
 
 //开始函数
 function start(){
     sobj=setInterval(getDate,1000);
 }
 
 //停止函数
 function stop(){
     clearInterval(sobj);
 }
 
 //关闭秒表
 bidobj=document.getElementById('bid');
 bidobj.onclick=function(){
     stop();
 }
 
 //开始秒表
 bid2obj=document.getElementById('bid2');
 bid2obj.onclick=function(){
     start();
 }
 
 </script>
 </html>

过几秒钟后页面跳转

 <!doctype html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>index</title>
     <style>
         *{
             font-family: 微软雅黑;
         }
         .clock{
             width:100%;
             height:50px;
             background: #000;
             color:#0f0;
             font-weight: bold;
             border-radius:50px;
             text-align:center;
             line-height:50px;
         }
     </style>
 </head>
 <body>
     <div class="clock">
         <span>提交成功，<span id='sid'>3</span>秒后页面即将跳转到百度!</span>
     </div>
 </body>
 <script>
 sidobj=document.getElementById('sid');
 s=3;
 
 sobj=setInterval(function(){
     sidobj.innerHTML=--s;
 
     if(s==0){
         // clearInterval(sobj);
         location='http://www.baidu.com';
     }
 },1000);
 </script>
 </html>

 <script>
 bidobj=document.getElementById('bid');
 
 tobj=setTimeout(function(){
     location='http://www.baidu.com';
 },6000);
 
 bidobj.onclick=function(){
     clearTimeout(tobj);
 }
 </script>

0 Links