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. 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. 由异常掉电问题---谈xfs文件系统

    由异常掉电问题---谈xfs文件系统 本文皆是作者自己的学习总结或感悟(linux环境),如有不对,欢迎提出一起探讨!! 目录结构 一.相关知识 二.问题提出 三.处理方法 四.最终结果 一.相关知识 ...

  2. [leetcode 120]triangle 空间O(n)算法

    1 题目 Given a triangle, find the minimum path sum from top to bottom. Each step you may move to adjac ...

  3. 利用RGB-D数据进行人体检测 带dataset

    利用RGB-D数据进行人体检测 LucianoSpinello, Kai O. Arras 摘要 人体检测是机器人和智能系统中的重要问题.之前的研究工作使用摄像机和2D或3D测距器.本文中我们提出一种 ...

  4. redis集群(主从配置)

    市面上太多kv的缓存,最常用的就属memcache了,但是memcache存在单点问题,不过小日本有复制版本,但是使用的人比较少,redis的出现让kv内存存储的想法成为现实.今天主要内容便是redi ...

  5. strom ui Topology 可视化视图各个指标含义说明

    In the visualization, spout components are represented as blue, while bolts are colored between gree ...

  6. 饭否Oauth记录

    饭否Oauth授权   首先去饭否申请一个应用,创建新应用即可,等待审核.审核通过了之后会拿到consumer_key和consumer_secret.这两个值先记录在代码里.后面经常用到. 然后第一 ...

  7. BigDecimalUtils

    package com.sprucetec.tms.utils; import java.math.BigDecimal;import java.text.SimpleDateFormat;impor ...

  8. Flash 0day漏洞(CVE-2018-4878)复现

    该漏洞影响 Flash Player 当前最新版本28.0.0.137以及之前的所有版本,而Adobe公司计划在当地时间2月5日紧急发布更新来修复此漏洞. 本文作者:i春秋作家——F0rmat 前言 ...

  9. javaweb项目中的过滤器的使用

    翻阅博客园的的时候,看到两篇关于javaweb过滤器的帖子写的很好,这里备忘一下: 过滤器基础:http://www.cnblogs.com/xdp-gacl/p/3948353.html 获取器案例 ...

  10. Windows + VS2013 + Dlib

    Dlib是一个机器学习的C++库,包含了许多机器学习常用的算法, 而且文档和例子都非常详细. 安装有点类似于opencv,这里我从官网下载dlib-18.17到D盘 1. cmake转VS工程 这里使 ...