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 ...
随机推荐
- .net正则表达式实例
正则表达式的本质是使用一系列特殊字符模式,来表示某一类字符串.正则表达式无疑是处理文本最有力的工具,而.NET的System.dll类库提供的System.Text.RegularExpression ...
- python函数知识
一.三目运算 也叫三元运算,例如result=x if x<y else y 二.集合(set) 返回主页集合(set):把不同的元素组成一起形成集合,是python基本的数据类型.集合元素(s ...
- SRM484
又Orz了一发rng_58.. 250pt: 题意:给定一种兔子数:当S(x*x) = S(x)*S(x)时,x为兔子数,其中S(x)表示各个数位之和. 思路:本来想了一个复杂度很高的想法..然后想看 ...
- Concurrency Programming Guide 并发设计指引(二)
以下翻译是本人通过谷歌工具进行翻译,并进行修正后的结果,希望能对大家有所帮助.如果您发现翻译的不正确不合适的地方,希望您能够发表评论指正,谢谢.转载请注明出处. Concurrency and App ...
- Excel表格公式大全[转]
Excel技巧网_官方微博 作者: Excel技巧网_官方微博 2016-09-23 14:05:20 举报 阅读数:21219 1.查找重复内容公式:=IF(COUNTIF(A:A,A2)> ...
- Azure DevOps Server: 使用Rest Api获取拉取请求Pull Request中的变更文件清单
需求: Azure DevOps Server 的拉取请求模块,为开发团队提供了强大而且灵活的代码评审功能.拉取请求中变更文件清单,对质量管理人员,是一个宝贵的材料.质量保障人员可以从代码清单中分析不 ...
- Markdown的学习笔记一
之前学习看些书籍.学些技术都喜欢用xmind做思维导图的笔记,慢慢的发现想把一些笔记做的详细一些就会变得很复杂,个人觉得误了思维导图本意,而且用手机查看的时候也各种不方便.所以开始学习使用markdo ...
- 2018宁夏邀请赛网赛 I. Reversion Count(java练习题)
题目链接 :https://nanti.jisuanke.com/t/26217 Description: There is a positive integer X, X's reversion c ...
- Mac上搭建rtmp流媒体服务器(结合FFmpeg的使用)
1.确保安装homebrew ---安装则跳到第二步 ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/ins ...
- iOS数据持久化--用户属性
一.简介 NSUserDefaults类是一个单例类,每个程序只有一个 NSUserDefaults对象,可以用来存储用户的属性,比如自动登录时候的账号密码等小型的数据. 二.使用 1.NSUserD ...