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

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

一：window.setTimeout();

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

语法：

  1. setTimeout(code,millisec);
  2.  
  3. 例子：两秒后，弹出“hello js”；
  1.   1  第一个参数 我们要执行的代码 或则 一个函数
      2  第二个参数  毫秒数
    第一种写法 （直接写 js 代码）
    window.setTimeout("alert('hello js')",2000);
  2.  
  3. 第二种写法   先书写函数
    function sayHello(){
       alert('Hello JS');
    }
    window.setTimeout(sayHello,2000);
  4.  
  5. 第三种写法  写匿名函数
    window.setTimeout(
        function sayHello(){
           alert('hello js');
       }
    ,2000);
  6.  
  7. //第四种写法
  1. function sayHello(){
       alert('Hello JS');
    }
  1. window.setTimeout('sayHello()',2000);
  2.  
  3. 二：window.setInterval() ;
    setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式;//每隔几秒调用一次代码；
    语法：
  1. setTimeout(code,millisec);
  2.  
  3. 注意：setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
  4.  
  5. 例子：倒计时10秒；
    界面：

  1.  
  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <link rel="stylesheet" href="../css/time.css">
  7.     <script type="text/javascript" src="../js/time.js"></script>
  8. </head>
  9. <body>
  10. <button>点击开始</button>
  11. <button>点击暂停</button>
  12. <div>10</div>
  13. </body>
  14. </html>
  1. div{
  2.     width: 100px;
  3.     height: 100px;
  4.     margin: 10px 10px;
  5.     background-color: aqua;
  6.     color: black;
  7.     font-size:50px;
  8.     border: 1px blue solid;
  9.     text-align: center;
  10.     line-height: 100px;
  11.  
  12. }
  1. window.onload=function(){
  2.     var div1=document.getElementsByTagName('div')[0];
  3.     var btn=document.getElementsByTagName('button')[0];
  4.     var btn1=document.getElementsByTagName('button')[1];
  5.     btn.onclick=function(){
  6.     time=  window.setInterval(function (){
  7.         var num=parseInt(div1.innerHTML);
  8.         if(num>0){//倒计时的数字需要大于0；
  9.             num--;
  10.             div1.innerHTML=num;
  11.         }
  12.     },1000);
  13.     };
  14.     btn1.onclick=function(){
  15.         window.clearInterval(time);
  16.     }
  17.  
  18. };
  1.  

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

  1. Window对象方法

    Window对象方法 scrollBy() 按照指定的像素值来滚动内容. scrollTo() 把内容滚动到指定的坐标. setInterval() 按照指定的周期(以毫秒计)来调用函数或计算表达式. ...

  2. BOM window对象方法

    window对象方法   alert():弹出一个警告对话框.   prompt():弹出一个输入对话框.   confirm():弹出一个确认对话框.如果单击“确定按钮”返回true,如果单击“取消 ...

  3. window对象方法（alert-confirm-prompt）

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. window对象方法（open和close）

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. js中Window 对象及其的方法

    window.location 对象 window.location 对象用于获得当前页面的地址 (URL),并把浏览器重定向到新的页面.window.location 对象在编写时可不使用 wind ...

  6. window对象中的常见方法

    <body><!-- window对象中的常见方法--><script type="text/javascript"> var timeid; ...

  7. javascript window对象属性和方法

    window对象 window对象表示一个浏览器窗口或一个框架.在客户端JavaScript中,window对象是全局对象,所有的表达式 都在当前的环境中计算.也就是说,要引用当前窗口根本不需要特殊的 ...

  8. Window对象

    Window对象:         Window 对象表示浏览器中打开的窗口,如果文档包含框架(frame 或 iframe 标签),浏览器会为 HTML 文档创建一个 window 对象,并为每个框 ...

  9. Window 对象

    Window 对象 Window 对象表示浏览器中打开的窗口. 如果文档包含框架(<frame> 或 <iframe> 标签),浏览器会为 HTML 文档创建一个 window ...

随机推荐

  1. spring启动component-scan类扫描加载,以及@Resource,postConstruct等等注解的解析生效源码

    spring里IOC的原理就不详细写了, 如果想要搞清楚自动扫描组件是如何实现的,还有@Resouce @PostConstruct等注解的工作原理,最好可以先搞清楚整个IOC容器的运作原理再来分析这 ...

  2. vscode 调试node.js

    在开发的过程中,几乎不可能一次性就能写出毫无破绽的程序,断点调试代码是一个普遍的需求. 作为前端开发工程师,以往我们开发的JavaScript程序都运行在浏览器端,利用Chrome提供的开发者工具就可 ...

  3. java基础知识-算术运算符和赋值运算符

    1.算术运算符 算术运算符: +,-,*,/,% /:取的是两个数的商,当两个数是整数,不整除的情况,结果不包含小数部分 %:取的是两个数的余数. 字符串和+联合使用:此时的+称为连接符.++,--都 ...

  4. TryEnterCriticalSection___Delphi

    VOID EnterCriticalSection:非阻塞函数.将当前线程对指定临界区的引用计数减1:在使用计数变为零时,另一等待此临界区的一个线程将被唤醒. BOOL TryEnterCritica ...

  5. WPF设计时

    资料太少.中文没有.英文的也残缺不全.待补充.问题暂时解决. 设计器通过使用命名约定来发现自定义设计时程序集 运行时程序集与设计时程序集对应关系 加载顺序 程序集名称(*表示版本号,可省略)    0 ...

  6. 记录一次BUG修复-Entity Framwork SaveChanges()失效

    目录 一. 前言 二.问题背景 三.问题描述 四.问题解决步骤 六.总结 一. 前言 这是笔者在参与一个小型项目开发时所遇到的一个BUG,因为项目经验不足对Entity Framwork框架认识不足导 ...

  7. react-native项目之样式总结

    react native(以下简称rn)里面涉及到的样式规则都是在js文件中写的,一改pc端的在样式文件中定义规则,所以pc端开发习惯的童鞋转向开发rn项目时,可能会对样式感到有些奇怪:其实react ...

  8. Linux的1000个命令

    目录 Linux常用命令 uptime wget uname free who last history pwd cd ls cat head tail tr wc cut diff touch mk ...

  9. “全栈2019”Java多线程第二十八章：公平锁与非公平锁详解

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java多 ...

  10. js中获取当前页面的url

    在js中可以通过下面的方式获取当前页面url的相关信息 var item = window.location // 返回的是对象, 这个对象里有各种关于url的信息 var url = window. ...