• 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>
    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


  • 相关阅读:
    mfc启动画面
    个人冲刺第十天
    个人冲刺第九天
    个人冲刺第八天
    个人冲刺第七天
    个人冲刺第六天
    新一周冲刺计划2
    新一周冲刺
    创意1
    团队绩效与目标
  • 原文地址:https://www.cnblogs.com/hellokitty1/p/4790022.html
Copyright © 2020-2023  润新知