zoukankan      html  css  js  c++  java
  • JS window对象 计时器setTimeout() setTimeout()计时器,在载入后延迟指定时间后,去执行一次表达式,仅执行一次。 语法: setTimeout(代码,延迟时间);

    计时器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>




  • 相关阅读:
    升级windows 11小工具
    windows 10更新升级方法
    您需要了解的有关 Oracle 数据库修补的所有信息
    Step by Step Apply Rolling PSU Patch In Oracle Database 12c RAC Environment
    Upgrade Oracle Database Manually from 12.2.0.1 to 19c
    如何应用版本更新 12.2.0.1.210420(补丁 32507738 – 2021 年 4 月 RU)
    xtrabackup 安装、备份和恢复
    Centos_Lvm expand capacity without restarting CentOS
    Centos_Lvm_Create pv vg lv and mount
    通过全备+relaylog同步恢复被drop的库或表
  • 原文地址:https://www.cnblogs.com/yongbin668/p/5592738.html
Copyright © 2011-2022 走看看