计时器setTimeout()

setTimeout()计时器,在载入后延迟指定时间后,去执行一次表达式,仅执行一次。

语法:

setTimeout(代码,延迟时间);

参数说明:

1. 要调用的函数或要执行的代码串。

2. 延时时间:在执行代码前需等待的时间,以毫秒为单位(1s=1000ms)。

当我们打开网页3秒后,在弹出一个提示框,代码如下:

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
setTimeout("alert('Hello!')", 3000 );
</script>
</head>
<body>
</body>
</html>

当按钮start被点击时,setTimeout()调用函数,在5秒后弹出一个提示框。

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function tinfo(){
var t=setTimeout("alert('Hello!')",5000);
}
</script>
</head>
<body>
<form>
<input type="button" value="start" onClick="tinfo()">
</form>
</body>
</html>

要创建一个运行于无穷循环中的计数器,我们需要编写一个函数来调用其自身。在下面的代码,当按钮被点击后,输入域便从0开始计数。

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
var num=0;
function numCount(){
document.getElementById('txt').value=num;
num=num+1;
setTimeout("numCount()",1000);
}
</script>
</head>
<body>
<form>
<input type="text" id="txt" />
<input type="button" value="Start" onClick="numCount()" />
</form>
</body>
</html>

任务

补充右边编辑器第12和14行,使用setTimeout()实现计数统计效果,并在文本框中显示数值。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>计时器</title>
</head>
<script type="text/javascript">
var num=0;
function startCount() {
document.getElementById('count').value=num;
num=num+1;
setTimeout("startCount()",1000) ;
}
setTimeout("startCount()",1000);
</script>
</head>
<body>
<form>
<input type="text" id="count" />
</form>
</body>
</html>

JS window对象 计时器setTimeout() setTimeout()计时器,在载入后延迟指定时间后,去执行一次表达式,仅执行一次。 语法: setTimeout(代码,延迟时间);的更多相关文章

  1. JS window对象 返回前一个浏览的页面 back()方法

    JS window对象 返回前一个浏览的页面 back()方法,加载 history 列表中的前一个 URL. 语法: window.history.back();   返回前一个浏览的页面 back ...

  2. JS Window对象 计时器setInterval() 在执行时,从载入页面后每隔指定的时间执行代码。

    计时器setInterval() 在执行时,从载入页面后每隔指定的时间执行代码. 语法: setInterval(代码,交互时间); 参数说明: 1. 代码:要调用的函数或要执行的代码串. 2. 交互 ...

  3. JS window对象详解

    window 是客户端浏览器对象模型的基类,window 对象是客户端 JavaScript 的全局对象.一个 window 对象实际上就是一个独立的窗口,对于框架页面来说,浏览器窗口每个框架都包含一 ...

  4. js window对象

    BOM的核心对象是window,它表示浏览器的一个实例. 在浏览器中,window对象是(1)通过JavaScript访问浏览器窗口的一个接口 (2)ECMAScript规定的Global对象 1.全 ...

  5. 【repost】js window对象属性和方法相关资料整理

    window对象有以下方法: open close alert confirm prompt setTimeout clearTimeout setInterval clearInterval mov ...

  6. js window对象属相和方法相关整理资料

    window对象有以下方法: open close alert confirm prompt setTimeout clearTimeout setInterval clearInterval mov ...

  7. JS window对象的top、parent、opener含义

    .top 该变更永远指分割窗口最高层次的浏览器窗口.如果计划从分割窗口的最高层次开始执行命令,就可以用top变量. .opener opener用于在window.open的页面引用执行该window ...

  8. JS window对象的top、parent、opener含义介绍 以及防止网页被嵌入框架的代码

    1.top该变更永远指分割窗口最高层次的浏览器窗口.如果计划从分割窗口的最高层次开始执行命令,就可以用top变量. 2.openeropener用于在window.open的页面引用执行该window ...

  9. JS window对象的top、parent、opener含义介绍(转载)

    1.top该变更永远指分割窗口最高层次的浏览器窗口.如果计划从分割窗口的最高层次开始执行命令,就可以用top变量. 2.openeropener用于在window.open的页面引用执行该window ...

随机推荐

  1. ant的安装和使用

    1.ant的安装 1.1 添加环境变量:ANT_HOME=D:\software\ant\apache-ant-1.10.1 在path中添加:%ANT_HOME%\bin 1.2 测试是否安装成功 ...

  2. Electron 常见问题

    导读: 以下记录了作者在实践中遇到的问题和最后的解决方法,如果有错误或者更新更完美的解决方案,欢迎留言指正.交流. 1.jQuery/RequireJS/Meteor/AngularJS 的问题 jQ ...

  3. 一个完整实用的axios封装

    1.先引入 import axios from 'axios' import qs from 'qs'import router from '../router'; import store from ...

  4. pytest框架结构运行规则及命名方式

    Pytest框架结构 Import pytest 类似的setup,teardown同样更灵活,还有个session() 模块级 (setup_module/teardown_module) 不在类中 ...

  5. pytest-调整测试用例的执行顺序

    场景:未考虑按自然顺序执行时,或想变更执行顺序,比如增加 数据的用例要先执行,再执行删除的用例.测试用例默认是按名 称顺序执行的. • 解决: • 安装:pip install pytest-orde ...

  6. bzoj4544 椭圆上的整点

    我会所有推理..... Q1:真的这么暴力的统计答案? Q2:蜜汁统计答案.... Q3:为什么不考虑3在不同的位置的情况

  7. android中的国际化

    java国际化步骤: 定义资源文件: baseName_language_country.properties baseName_language.properties baseName.proper ...

  8. CSS 是怎样确定图像大小的?

    本文转自奇舞周刊学习使用侵权删 先来看个例子,热热身. 上面这张图像的原始尺寸是:宽 54px 高 49px. 那么,在以下代码中,每张图像显示的最终尺寸是多少? https://p1.ssl.qhi ...

  9. PHP构建一句话木马

    构建一句话木马,密码为simple: url/search.php?searchtype=5&tid=&area=eval($_POST[simple]) 之后使用菜刀进行链接,密码为 ...

  10. Mina---系统学习

    1.为何使用Mina? java提供的BIO.NIO使用的复杂性等原因,导致Mina框架的诞生: 2.什么时候使用Mina? 易于使用 高并发的用户量 被证明的系统: Mina已被全球数以万计的应用使 ...