zoukankan      html  css  js  c++  java
  • 计时器用法

    一、setTimeout()和clearTimeout()一起使用,停止计时器。

     1 <!DOCTYPE HTML>
     2 <html>
     3 <head>
     4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     5     <title>计时器</title>
     6 </head>
     7 <script type="text/javascript">
     8     var num=0,i;
     9     function startCount(){
    10         document.getElementById('count').value=num;
    11         num=num+1;
    12         i=setTimeout("startCount()",1000);
    13     }
    14     function stopCount(){
    15         clearTimeout(i);
    16     }
    17 </script>
    18 </head>
    19 <body>
    20 <form>
    21     <input type="text" id="count" />
    22     <input type="button" value="Start" onclick="startCount()" />
    23     <input type="button" value="Stop" onclick="stopCount()"  />
    24 </form>
    25 </body>
    26 </html>
    27     

     2、5秒后返回到首页

     用的知识点:

    <input type=button value=刷新 onclick="window.location.reload()">
    <input type=button value=前进 onclick="window.history.go(1)">
    <input type=button value=后退 onclick="window.history.go(-1)">
    <input type=button value=前进 onclick="window.history.forward()">
    <input type=button value=后退 onclick="window.history.back()"> 后退+刷新<input type=button value=后退 onclick="window.history.go(-1);window.location.reload()">

    <!DOCTYPE html>
    <html>
     <head>
      <title>浏览器对象</title>  
      <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>   
     </head>
     <body>
      <H4>操作成功</H4>
      <p>
         <b id="second">5</b>秒后回到主页&nbsp;<a href="javascript:goBack();">返回</a>  
      </p>
     
    <script type="text/javascript">  
     
        var sec = document.getElementById("second");
        var i = 5;
        var timer = setInterval(function(){
            i--;
            sec.innerHTML = i;
            if(i==1){
                window.location.href =  "http://www.imooc.com/";
            }
        },1000);
         
      function goBack(){ 
        window.history.go(-1);
      }  
      </script> 
     </body>
    </html>
  • 相关阅读:
    vue前台(八)
    npm 淘宝镜像的配置
    详解数组中的reduce方法
    javaScript中的布尔值判断
    vue前台(七)
    vue前台(六点二)
    vue前台(六点一)
    vue前台(五)
    Android涂鸦技术及刮刮乐示例分析
    Android控件ActionBar浅析及适配2.x的方法介绍
  • 原文地址:https://www.cnblogs.com/yjhua/p/4588269.html
Copyright © 2011-2022 走看看