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

    }

};








												


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

    
								
  1. Window对象方法
		
    Window对象方法 scrollBy() 按照指定的像素值来滚动内容. scrollTo() 把内容滚动到指定的坐标. setInterval() 按照指定的周期(以毫秒计)来调用函数或计算表达式. ...
    
		
    2. 
						
  2. BOM window对象方法
		
    window对象方法   alert():弹出一个警告对话框.   prompt():弹出一个输入对话框.   confirm():弹出一个确认对话框.如果单击“确定按钮”返回true,如果单击“取消 ...
    
		
    3. 
						
  3. window对象方法（alert-confirm-prompt）
		
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
    
		
    4. 
						
  4. window对象方法（open和close）
		
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
    
		
    5. 
						
  5. js中Window 对象及其的方法
		
    window.location 对象 window.location 对象用于获得当前页面的地址 (URL),并把浏览器重定向到新的页面.window.location 对象在编写时可不使用 wind ...
    
		
    6. 
						
  6. window对象中的常见方法
		
    <body><!-- window对象中的常见方法--><script type="text/javascript"> var timeid;  ...
    
		
    7. 
						
  7. javascript window对象属性和方法
		
    window对象 window对象表示一个浏览器窗口或一个框架.在客户端JavaScript中,window对象是全局对象,所有的表达式 都在当前的环境中计算.也就是说,要引用当前窗口根本不需要特殊的 ...
    
		
    8. 
						
  8. Window对象
		
    Window对象:         Window 对象表示浏览器中打开的窗口,如果文档包含框架(frame 或 iframe 标签),浏览器会为 HTML 文档创建一个 window 对象,并为每个框 ...
    
		
    9. 
						
  9. Window 对象
		
    Window 对象 Window 对象表示浏览器中打开的窗口. 如果文档包含框架(<frame> 或 <iframe> 标签),浏览器会为 HTML 文档创建一个 window ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. Java读取修改Properties文件
			
    properties文件是我们经常需要操作一种文件,它使用一种键值对的形式来保存属性集. 无论在学习上还是工作上经常需要读取,修改,删除properties文件里面的属性. 本文通过操作一个prope ...
    
			
    2. 
						
  2. Miller_raibin算法随机化检测素数 & Pollar_rho 算法分解大数
			
    这几天一直再学习这些内容,也没有发一些博客,现在我觉得差不多了 首先基础是Miller_raibin随机化检测素数,顾名思义,随机化也就是有几率不对,但是很低,适用于大数快速检测,因为大数已经超出了我 ...
    
			
    3. 
						
  3. Gitlab 赋予某台机器git clone的权限  Deploy key
			
    开发项目CI(持续化部署)的时候,需要赋予jeckins所在的机器从gitlab远程仓库克隆代码到本地的权限. 之前我们基本都是通过管理gitlab某个项目的成员的方式,管理gitlab的权限. 但是 ...
    
			
    4. 
						
  4. CSS 基础 例子 图片拼合技术
			
    利用background-position xpos ypos 就是以图片的左上角顶点为原点,往下和右都为正,反之为负,移动图片 如: background-position: 15px 20px;( ...
    
			
    5. 
						
  5. js获取select标签选中的值及文本
			
    原生js方式: var obj = document.getElementByIdx_x(”testSelect”); //定位id var index = obj.selectedIndex; // ...
    
			
    6. 
						
  6. EFCore2.1中DbFirst和CodeFirst简单使用
			
    EFCore中没有DbFirst了吧,应该都是Code First 先说说第一种,Code First From Database(DbFirst)数据库先行,这种方式就要命令行了...(特不喜欢命令 ...
    
			
    7. 
						
  7. AngularJs从数据库获取数据并显示
			
    哈哈,昨天下午和今天早上,花上一些时间,学习AngularJs,仅是粗略预览一下.很好,非常好. 由于手上有开发ASP.NET MVC环境,就在这测试下,去数据库获取数据并显示数据. 数据库表创建,添 ...
    
			
    8. 
						
  8. DOM LEVEL 1 中的那些事儿[总结篇-上]
			
    DOM是前端编程中一个非常重要的部分,我们在动态修改页面的样式.内容.添加页面动画以及为页面元素绑定事件时,本质都是在操作DOM.DOM并不是JS语言的一个部分,我们通过JAVA.PHP等语言抓取网页 ...
    
			
    9. 
						
  9. Spring IOC 容器源码分析 - 创建单例 bean 的过程
			
    1. 简介 在上一篇文章中,我比较详细的分析了获取 bean 的方法,也就是getBean(String)的实现逻辑.对于已实例化好的单例 bean,getBean(String) 方法并不会再一次去 ...
    
			
    10. 
						
  10. AJPFX:外汇的价格图表类型和技术指标类型
			
    AJPFX:价格图表的类型 柱状图 它是反映价格行为的一种最基本的图表.每一根柱代表一段时间——最短为1分钟,最长为数年.随着时间的推移,柱状图反映出不同的价格形态. 蜡烛图 不同于简单的柱状图,蜡烛 ...
    
			
    11.