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

js课程 3-9 js内置对象定时器和超时器怎么使用的更多相关文章

  1. JS中一些常用的内置对象

    在JS中,经常会遇到明明知道一个对象有某个属性或方法,可是又不知道怎么写的情况.下面,我就罗列了一些JS中常用的内置对象的属性和方法. Math对象: Math对象的作用是执行常见的算术任务. 首先M ...

  2. 从零开始的JS生活(三)——内置对象

    咱们继续进行我们的正经的JS介绍.今天所要跟大家讲述的是JS中十分常用.十分常用.十分常用的内置对象. 一.世界上最熟悉的陌生就是,当你看着数组.而我看着你... - 数组对象 1.数组的概念 在内存 ...

  3. JS基础--函数与BOM、DOM操作、JS中的事件以及内置对象

       前   言 絮叨絮叨 这里是JS基础知识集中讲解的第三篇,也是最后一篇,三篇JS的基础,大多是知识的罗列,并没有涉及更难得东西,干货满满!看完这一篇后,相信许多正在像我一样正处于初级阶段的同学, ...

  4. Js基础知识7-JavaScript所有内置对象属性和方法汇总

    对象什么的,程序员可是有很多呢... JS三大对象 对象,是任何一个开发者都无法绕开和逃避的话题,她似乎有些深不可测,但如此伟大和巧妙的存在,一定值得你去摸索.发现.征服. 我们都知道,JavaScr ...

  5. 一张图理清js原型链(通过内置对象的引用关系)

    很多同学估计写了几年js也没有搞清内置对象之间的原型链关系,鄙人抽空手绘了一张简图,以作参考: 简单说明一下,上图中annonymous()函数相当于是所有函数的根(它本身也是函数),他上面提供了一些 ...

  6. js流程控制;常用内置对象

    一.流程控制 1.if .if-else.if-else if-else var ji = 20; if(ji >= 20){ console.log('大吉大利,晚上吃鸡') } alert( ...

  7. js中的事件,内置对象,正则表达式

    [JS中的事件分类] 1.鼠标事件: click/dbclick/mouseover/mouseout/mousemove/mousedown/mouseup 2.键盘事件: keydown: 键盘按 ...

  8. JavaScript-----13.内置对象 Math()和Date()

    1. 内置对象 js对象分为3种:自定义对象(var obj={}).内置对象.浏览器对象. 前两种对象是js基础内容,属于ECMAScript,第三个浏览器对象是js独有的.讲js API的时候会讲 ...

  9. js课程 2-8 js内置对象有哪些

    js课程 2-8 js内置对象有哪些 一.总结 一句话总结:JS中内置了17个对象,常用的是Array对象.Date对象.正则表达式对象.string对象.Global对象. 1.js常用对象有哪些? ...

随机推荐

  1. BZOJ 1231 状压DP

    思路: f[i][j] i表示集合的组成 j表示选最后一个数 f[i][j]表示能选的方案数 f[i|(1<< k)][k]+=f[i][j]; k不属于i j属于i且符合题意 最后Σf[ ...

  2. C#List<string>和string[]之间的相互转换

     一.LIST概述 所属命名空间:System.Collections.Generic      public class List<T> : IList<T>, IColle ...

  3. wget---从指定的URL下载文件

    wget命令用来从指定的URL下载文件.wget非常稳定,它在带宽很窄的情况下和不稳定网络中有很强的适应性,如果是由于网络的原因下载失败,wget会不断的尝试,直到整个文件下载完毕.如果是服务器打断下 ...

  4. 通过 chroot 重新设置 root 密码

    实例:通过 chroot 重新设置 root 密码 忘记了 root 密码该怎么办?接下来的 demo 将演示如何通过 chroot 命令重新设置 centos7 中被忘记了的 root 密码.sys ...

  5. Ubuntu 美团sql优化工具SQLAdvisor的安装(转)

    by2009 by2009 发表于 3 个月前 SQLAdvisor简介 SQLAdvisor是由美团点评公司技术工程部DBA团队(北京)开发维护的一个分析SQL给出索引优化建议的工具.它基于MySQ ...

  6. 如何通过使用fiddler对Android系统设备抓包总结

    http://www.open-open.com/lib/view/open1427509907668.html

  7. oracle多实例的启动与关闭

    Oracle/oracle登录 1.启监听器 lsnrctl start 监听一般不需要动,如果机器重新启动的话需要将监听启动. 查看当前SID:echo $ORACLE_SID 2.启动数据库实例: ...

  8. 使用Iperf调整网络

    使用Iperf调整网络     Iperf 是一个 TCP/IP 和 UDP/IP 的性能测量工具,通过调谐各种参数可以测试TCP的最大带宽,并报告带宽.延迟,最大段和最大传输单元大小等统计信息.Ip ...

  9. HTML5手机应用的最大优势就是可以在网页上直接调试和修改

    HTML5手机应用的最大优势就是可以在网页上直接调试和修改

  10. Python操作MySQL数据库完成简易的增删改查功能

    说明:该篇博客是博主一字一码编写的,实属不易,请尊重原创,谢谢大家! 目录 一丶项目介绍 二丶效果展示 三丶数据准备 四丶代码实现 五丶完整代码 一丶项目介绍 1.叙述 博主闲暇之余花了10个小时写的 ...