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