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