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

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>

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;

}

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

};

				
时间: 2024-10-25 06:30:03

window对象方法之setTimeout(),setInterval()的相关文章

Window对象方法

Window对象方法 scrollBy() 按照指定的像素值来滚动内容. scrollTo() 把内容滚动到指定的坐标. setInterval() 按照指定的周期(以毫秒计)来调用函数或计算表达式. 取消由 setInterval() 设置的 timeout为clearInterval() setTimeout() 在指定的毫秒数后调用函数或计算表达式. 取消由 setTimeout() 方法设置的 timeout为clearTimeout() open() myWindow=window.o

BOM window对象方法

window对象方法   alert():弹出一个警告对话框.   prompt():弹出一个输入对话框.   confirm():弹出一个确认对话框.如果单击“确定按钮”返回true,如果单击“取消”返回false.   close():关闭窗口   print():打印窗口 open()方法   功能:打开一个新的浏览器窗口.   语法:var winObj = window.open([url][,name][,options]);   说明:参数可有可无.如果没有指定参数,则打开一个选项

JavaScript - window对象方法和事件

window对象方法和事件 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>window对象方法和事件</title> <script type="text/javascript"> /*alert(window.screen); alert(window.history);

window对象方法(open和close)

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con

window对象方法(alert-confirm-prompt)

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con

window对象中的常见方法

<body><!-- window对象中的常见方法--><script type="text/javascript"> var timeid; function windowMethodDemo(){ //var b = confirm("你真的确定点击吗?"); //alert("b="+b); //setTimeout("alert('time run')",40); timeid=se

js中Window 对象及其的方法

window.location 对象 window.location 对象用于获得当前页面的地址 (URL),并把浏览器重定向到新的页面.window.location 对象在编写时可不使用 window 这个前缀. location.hostname 返回 web 主机的域名 location.pathname 返回当前页面的路径和文件名 location.port 返回 web 主机的端口 (80 或 443) location.protocol 返回所使用的 web 协议(http://

javascript window对象属性和方法

window对象 window对象表示一个浏览器窗口或一个框架.在客户端JavaScript中,window对象是全局对象,所有的表达式 都在当前的环境中计算.也就是说,要引用当前窗口根本不需要特殊的语法,可以把那个窗口的属性当作全局变量 来使用.例如,可以只写document,而不必写window.document. window对象属性 标红色的: 重要的 标黑色的: 正常不用  closed:   返回窗口是否已被关闭 defaultStatus:      设置或返回窗口状态栏中的默认文

jsWindow 对象 Window 对象 Window 对象表示浏览器中打开的窗口。 如果文档包含框架(frame 或 iframe 标签),浏览器会为 HTML 文档创建一个 window 对象,并为每个框架创建一个额外的 window 对象。 注释:没有应用于 window 对象的公开标准,不过所有浏览器都支持该对象。 Window 对象集合 集合 描述 frames[] 返回窗口中所有命

一.JSX简介 JSX就是Javascript和XML结合的一种格式.React发明了JSX,利用HTML语法来创建虚拟DOM.当遇到<,JSX就当HTML解析,遇到{就当JavaScript解析. 如下(JS写法) var child1 = React.createElement('li', null, 'First Text Content'); var child2 = React.createElement('li', null, 'Second Text Content'); var