JavaScript学习笔记之定时器

 更新时间:2015年01月22日 10:51:08   投稿:hebedich  
本文通过2个定时器的示例向我们展示了javascript中定时器的使用方法,格式以及功能,希望通过本文能够让大家对javascript定时器有新的认识。

定时器1

  用以指定在一段特定的时间后执行某段程序。

  setTimeout():

  格式:[定时器对象名=] setTimeout(“<表达式>”,毫秒)

  功能:执行<表达式>一次。

  例子:

复制代码 代码如下:

<!DOCTYPE html>
<html>
  <head>
    <title>timer1.html</title>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    <script type="text/javascript">
     function count()
     {
         setTimeout("alert('执行成功!')",7000);
     }
    </script>
  </head>
  <body>
    <input type="button" value="点击我啊" onclick="count();">
  </body>
</html>

定时器2

  以一定的时间为间隔,不断地重复执行表达式。

  setInterval():

  格式:[定时器对象名=] setInterval(“<表达式>”,毫秒)

  功能:重复执行<表达式>,直至窗口、框架被关闭或执行clearInterval。

  clearInterval():

  格式:clearInterval(定时器对象名)  

  功能:终止定时器

  例子:

复制代码 代码如下:

<!DOCTYPE html>
<html>
  <head>
    <title>timer2.html</title>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    <script type="text/javascript">
    var sec = 0;
    var timer = setInterval("count();",1000);//页面加载的时候即开始计时
     function count()
     {
        document.getElementById("num").innerHTML = sec++;
     }
     function stopCount()
     {
         clearInterval(timer);//停止定时器的运行
     }
    </script>
  </head>
  <body>
    <font color="red" id="num">0</font>
    <input type="button" value="停止" onclick="stopCount();">
  </body>
</html>

以上就是本文的全部内容了,希望大家能够喜欢

相关文章

  • Javascript 构造函数详解

    Javascript 构造函数详解

    Javascript构造函数是非常强大的,它可能也是Javascript能被充分利用的特点之一。但是如果你想真正的了解Javascript,你还是应该明白构造函数是如何工作的。本文,我们将从三个方面来讲述构造函数。
    2014-10-10
  • document.all与WEB标准

    document.all与WEB标准

    document.all与WEB标准...
    2006-11-11
  • JavaScript字符串对象slice方法入门实例(用于字符串截取)

    JavaScript字符串对象slice方法入门实例(用于字符串截取)

    这篇文章主要介绍了JavaScript字符串对象slice方法入门实例,slice方法用于通过指定开始和结束位置来截取字符串,需要的朋友可以参考下
    2014-10-10
  • JavaScript学习笔记之Cookie对象

    JavaScript学习笔记之Cookie对象

    本文主要简单介绍了javascript中cookie对象的概念,以及cookie的读取,写入,删除操作的方法,并附上示例,非常不错,这里推荐给小伙伴们。
    2015-01-01
  • JavaScript学习笔记之JS事件对象

    JavaScript学习笔记之JS事件对象

    本文介绍了javascript的事件对象的相关资料,需要的朋友可以参考下
    2015-01-01
  • JavaScript中变量的用法

    JavaScript中变量的用法

    这篇文章介绍了JavaScript中变量的用法,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-05-05
  • Javascript事件实例详解

    Javascript事件实例详解

    本文实例当你单击页面上的任何位置都会弹出“a”,正是运用了document的特性
    2013-11-11
  • THREE.JS入门教程(1)THREE.JS使用前了解

    THREE.JS入门教程(1)THREE.JS使用前了解

    Three.js是一个伟大的开源WebGL库,WebGL允许JavaScript操作GPU,在浏览器端实现真正意义的3D,本文介绍下THREE.JS基础/浏览器支持/设置场景/构建网格表面/材质/光/渲染循环/通用的对象属性等等,感兴趣的朋友可以了解下哦
    2013-01-01
  • a标签的href与onclick事件的区别详解

    a标签的href与onclick事件的区别详解

    对于a标签的href与onclick事件,大家都经常见到,也经常使用,可它们有什么区别呢?下面就让小编来给大家详细介绍下,感兴趣的朋友可以学习下,不用谢了,哈哈
    2014-11-11
  • js中一维数组和二位数组中的几个问题示例说明

    js中一维数组和二位数组中的几个问题示例说明

    这篇文章主要介绍了js中一维数组和二位数组中的几个问题,并给出对应的解决方法,需要的朋友可以参考下
    2014-07-07

最新评论