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);
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>