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);
}
};
window对象方法之setTimeout(),setInterval()的更多相关文章
- Window对象方法
Window对象方法 scrollBy() 按照指定的像素值来滚动内容. scrollTo() 把内容滚动到指定的坐标. setInterval() 按照指定的周期(以毫秒计)来调用函数或计算表达式. ...
- BOM window对象方法
window对象方法 alert():弹出一个警告对话框. prompt():弹出一个输入对话框. confirm():弹出一个确认对话框.如果单击“确定按钮”返回true,如果单击“取消 ...
- window对象方法（alert-confirm-prompt）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- window对象方法（open和close）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- js中Window 对象及其的方法
window.location 对象 window.location 对象用于获得当前页面的地址 (URL),并把浏览器重定向到新的页面.window.location 对象在编写时可不使用 wind ...
- window对象中的常见方法
<body><!-- window对象中的常见方法--><script type="text/javascript"> var timeid; ...
- javascript window对象属性和方法
window对象 window对象表示一个浏览器窗口或一个框架.在客户端JavaScript中,window对象是全局对象,所有的表达式 都在当前的环境中计算.也就是说,要引用当前窗口根本不需要特殊的 ...
- Window对象
Window对象: Window 对象表示浏览器中打开的窗口,如果文档包含框架(frame 或 iframe 标签),浏览器会为 HTML 文档创建一个 window 对象,并为每个框 ...
- Window 对象
Window 对象 Window 对象表示浏览器中打开的窗口. 如果文档包含框架(<frame> 或 <iframe> 标签),浏览器会为 HTML 文档创建一个 window ...
随机推荐
- Ubuntu12搭建nutch1.2+tomcat7+jdk1.6
Ubuntu12搭建nutch1.2+tomcat7+jdk1.6 所用软件:jdk-6u24-linux-i586.bin apache-tomcat-7.0.27.tar.gz apache-nu ...
- HDU3506环形石子合并问题
HDU3506环形石子合并问题 线性的石子合并问题比较好理解,环形的转成线性的方法就是扩展数组 1 2 3 . . . n 1 2 3 ... n 依据是我们最优的取值可以是 1 --- n也能是 2 ...
- 数字证书管理工具openssl和keytool的区别
1. 用SSL进行双向身份验证意思就是在客户机连接服务器时,链接双方都要对彼此的数字证书进行验证,保证这是经过授权的才能够连接(我们链接一般的SSL时采用的是单向验证,客户机只验证服务器的证书,服务器 ...
- 【转】jQuery.validate 用法
名称 返回类型 描述 validate(options) 返回:Validator ...
- Opencv3.4：显示一张图片
Github https://github.com/gongluck/Opencv3.4-study.git #include "opencv2/opencv.hpp" using ...
- Cordova - Windows 下创建第一个 Android App
官方文档: Create your first Cordova app Android Platform Guide 安装 JDK 和 Android SDK 注意: 需要将 JK 和 Android ...
- C# WPF 中WebBrowser拖动来移动窗口，改变窗口位置
前言 wpf中的WebBrowser相比之前的winform阉割了不少东西,也增加了不少东西,但是msdn对wpf也没有较好的文档 WebBrowser可以说是一个.NET控件,相对于WPF中的控件, ...
- 背水一战 Windows 10 (59) - 控件（媒体类）: Image, MediaElement
[源码下载] 背水一战 Windows 10 (59) - 控件(媒体类): Image, MediaElement 作者:webabcd 介绍背水一战 Windows 10 之 控件(媒体类) Im ...
- 【转】C# Enum,Int,String的互相转换 枚举转换
Enum为枚举提供基类,其基础类型可以是除 Char 外的任何整型.如果没有显式声明基础类型,则使用 Int32.编程语言通常提供语法来声明由一组已命名的常数和它们的值组成的枚举. 注意:枚举类型的基 ...
- 安装openvpn
1.安装服务器端openvpn yum install -y openvpn easy-rsa 如果已存在的yum源中找不安装文件,则可通过以下安装epel yum源 rpm -ivh http:/ ...