window对象方法之setTimeout(),setInterval()

简介: window中的这两个方法是比较重要的,在许多的设计中会使用到这两个方法。比如使用在倒计时抢购中。 首先来说说这两个方法的用法吧! 一:window.setTimeout(); setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。

window中的这两个方法是比较重要的,在许多的设计中会使用到这两个方法。比如使用在倒计时抢购中。

首先来说说这两个方法的用法吧!

一:window.setTimeout();

setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。 //延迟几秒以后执行代码,并且只执行 一次

语法:

setTimeout(code,millisec);

例子:两秒后,弹出“hello js”;
 
1 第一个参数 我们要执行的代码 或则 一个函数
2 第二个参数 毫秒数
第一种写法 (直接写 js 代码)
window.setTimeout("alert('hello js')",2000);


第二种写法 先书写函数
function sayHello(){
alert('Hello JS');
}
window.setTimeout(sayHello,2000);


第三种写法 写匿名函数
window.setTimeout(
function sayHello(){
alert('hello js');
}
,2000);


//第四种写法
function sayHello(){
alert('Hello JS');
}
window.setTimeout('sayHello()',2000);


二:window.setInterval() ;
setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式;//每隔几秒调用一次代码;
语法:
setTimeout(code,millisec);

注意:setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

例子:倒计时10秒;
界面:

 
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="../css/time.css">
    <script type="text/javascript" src="../js/time.js"></script>
</head>
<body>
<button>点击开始</button>
<button>点击暂停</button>
<div>10</div>
</body>
</html>
View Code
div{
    width: 100px;
    height: 100px;
    margin: 10px 10px;
    background-color: aqua;
    color: black;
    font-size:50px;
    border: 1px blue solid;
    text-align: center;
    line-height: 100px;

}
View Code
window.onload=function(){
    var div1=document.getElementsByTagName('div')[0];
    var btn=document.getElementsByTagName('button')[0];
    var btn1=document.getElementsByTagName('button')[1];
    btn.onclick=function(){
    time=  window.setInterval(function (){
        var num=parseInt(div1.innerHTML);
        if(num>0){//倒计时的数字需要大于0;
            num--;
            div1.innerHTML=num;
        }
    },1000);
    };
    btn1.onclick=function(){
        window.clearInterval(time);
    }

};
View Code

 

 



相关文章
|
JavaScript 前端开发
第46天:setInterval与setTimeout的区别
js的setTimeout方法用处比较多,通常用在页面刷新了、延迟执行了等等。今天对js的setTimeout方法做一个系统地总结。 setInterval与setTimeout的区别 说道setTimeout,很容易就会想到setInterval,因为这两个用法差不多,但是又有区别,今天一起总结了吧! 1、setTimeout 定义和用法: setTimeout()方法用于在指定的毫秒数后调用函数或计算表达式。
1452 0
|
JavaScript 前端开发 Java
|
JavaScript 前端开发
setInterval和setTimeout的使用区别
这两个方法都可以用来实现在一个固定时间段之后去执行JavaScript。不过两者各有各的应用场景。 一、方法 相同点:setTimeout和setInterval的语法相同。它们都有两个参数,一个是将要执行的代码字符串,还有一个是以毫秒为单位的时间间隔,当过了那个时间段之后就将执行那段代码。
1527 0
setTimeOut函数和setInterval函数
setTimeout( )是设定一个指定等候时间 (单位是千分之一秒, millisecond), 时间到了, 浏览器就会执行一个指定的 method 或 function, 有以下语法:     今次例子是设定等 3 秒 (3000 milliseconds), 浏览器就会执行 alert( ) 这一个method。
1036 0
|
JavaScript 前端开发 HTML5
setTimeout/setInterval 传参的问题
我们知道,setTimeout/setInterval 是 JavaScript 语言下的两门利器。有时候控件没反应了,代码外层包装一下 setTimeout 就可以了。JavaScript 是单线程的环境,setTimeout 的作用是把包装的代码塞入队列,而不是立刻执行。
918 0
|
2月前
|
JavaScript 前端开发
window.setTimeout() 和window.setInterval() 的用法与区别
window.setTimeout() 和window.setInterval() 的用法与区别
25 0
|
JavaScript 前端开发
|
3月前
|
消息中间件 JavaScript 前端开发
setTimeout和setInterval
setTimeout和setInterval
|
JavaScript 前端开发 API
setTimeout,setInterval你不知道的事
  javascript线程解释(setTimeout,setInterval你不知道的事)  标签: javascript引擎任务浏览器functionxmlhttprequest 2011-11-21 14:22 5672人阅读  分类: javascrip...
1199 0