计时器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. python面试题之阅读下面的代码,它的输出结果是什么?

    class A(object): def go(self): print "go A go!" def stop(self): print "stop A stop!&q ...

  2. python面试题之docstring是什么?

    Docstring是一种文档字符串,用于解释构造的作用.我们在函数.类或方法中将它放在首位来描述其作用.我们用三个单引号或双引号来声明docstring. >>> def sayhi ...

  3. 19-vim-分屏命令-01-末行命令扩展

    1.末行命令扩展 命令 英文 功能 :e空格. edit 打开内置文件浏览器,浏览当前目录下的文件,不用退出vim,可以在vim中上下浏览目录和文件 :n 文件名 new 新建文件 :w 文件名 wr ...

  4. 安装FTP

    yum install vsftpd -y cd /etc/vsftpd/ touch login.txt vim login.txt db_load -T -t hash -f /etc/vsftp ...

  5. bat批处理----set

    转载自    https://www.cnblogs.com/Braveliu/p/5081084.html [1]set命令简介 set,设置. [2]set命令使用 1. 打印系统环境变量.set ...

  6. centos7上的h5ai折腾记

    过程: 安装php-fpm和nginx,且经验证二者在其他项目可以正常使用. 从debian8拷贝过来_h5ai的nginx配置如下: location ~ [^/]\.php(/|$) { fast ...

  7. element-UI select 踩过的坑和解决办法

    今天遇到了一个bug,就是在使用element-UI的select框时,当选中值,会触发@change事件,下拉框消失,但是这时候select框还是处于获取焦点状态.可以看到select框还是处于颜色 ...

  8. 通过lua进行nginx的权限控制

    nginx_lua的安装 nginx使用luajit进行编译安装 使用openresty进行yum安装 openresty中将lua和nginx进行封装,详情可查看openresty官网 openre ...

  9. jsp EL运算符

    算术运算符 算术运算符 说明 示例 结果 + 加 ${1 + 1} 2 - 减 ${1 - 1} 0 * 乘 ${1 * 2} 2 /或div 除 ${3 / 2} 1.5 %或mod 取余 ${3 ...

  10. Oracle系列教程之一软件安装与卸载

    1.安装软件 软件下载地址:https://www.oracle.com/technetwork/cn/database/enterprise-edition/downloads/index.html ...