zoukankan      html  css  js  c++  java
  • JavaScript学习05 定时器

     

    JavaScript学习05 定时器

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

     

    参考资料

      圣思园张龙老师Java Web视频教程。

      W3School JavaScript教程:http://www.w3school.com.cn/js/index.asp

      英文版:http://www.w3schools.com/js/default.asp

     

      JS Timing:http://www.w3school.com.cn/js/js_timing.asp

  • 相关阅读:
    Zepto
    html5新增表单控件和表单属性
    初识html5
    H5 css3布局
    H5 css3背景透明度
    H5 css3特效
    H5 css3渐变
    H5css3的文本属性
    一个类有两个类别中,在类别里实现了相同的方法结果?
    size_t 理解误区
  • 原文地址:https://www.cnblogs.com/mengdd/p/3680863.html
Copyright © 2011-2022 走看看