JS计时器

这个代码我折腾了好久，发现以下几点不足：

1、对onclick三种调用方式不熟悉，一是无参数调用，二是有参数调用，三是this 调用

2.存在只是盲点，不知道clearInterval（）

3、对js函数理解不够透彻。

<body>
    alarm clock: <span id = "alarmID"></span><br>
    <input  type="button" value="start"  onclick="start()">
    <input type="button" value="stop"  onclick="stop()">
  
    <script type="text/javascript"> 
         var alarm_obj = document.getElementById("alarmID");
         var timer_id;
         function time(){
                var time_now = new Date();
                 time_now = time_now.toLocaleString();
                alarm_obj.innerHTML = time_now;  //把time_now的字符串写入alarmID指向的标签内容中
            }
        function start(){  
           timer_id = window.setInterval("time()", 1000); //time_id是一个固定的整数
        }
        function stop(){
           window.clearInterval(timer_id);
        }
     </script>
</body>

下面是错误写法

 

<body>
    alarm clock: <span id = "alarmID"></span><br>
    <input  type="button" value="start"  onclick="start()">
    <input type="button" value="stop"  onclick="stop()">
  
    <script type="text/javascript"> 
         var alarm_obj = document.getElementById("alarmID");
         var timer_id;
        
        function start(){
            var time_now = new Date();
            time_now = time_now.toLocaleString();
            alarm_obj.innerHTML = time_now; 
            timer_id = window.setInterval("start()", 1000); //无线循环自我调用，使得stop函数无法运行
        }
        function stop(){
           window.clearInterval(timer_id);
        }
     </script>
</body>

 下面是简单的登录界面

login.html

<body>
   <form action="#" name="loginForm" method="get">
       username: <input type="text" name="userName" value="luoxu">
       password: <input type="password" name="password" value="123">
      <input type="button" value="login" onclick="checkUser()">
   </form>
    <script type="text/javascript"> 
        var userName = loginForm.userName.value;
        var password = loginForm.password.value;
        function checkUser(){
            if(userName == "luoxu" && password == "123"){
                window.open("loginOk.html", "_self");
            }else{
                window.alert("Input error");
            }
        }
     </script>
</body>

 

5秒后跳转页面

loginOk.html

<body>
    Return after <span id = "timer">5</span>seconds! <br>
    <script type="text/javascript"> 
        var time_span = window.document.getElementById("timer"); //js代码必须在span后面，否则取不到span对象
        var time_id = window.setInterval("timer()", 1000);
        function timer(){
           var time_count = time_span.innerHTML - 1;
            time_span.innerHTML =time_count;
            if(time_count == 0){
                window.clearInterval(time_id);
                window.open("test.html", "_self");
            }
        }
     </script>
</body>

 

posted @ 2019-06-16 18:08  Coding_Changes_LIfe  阅读(856)  评论(0)  编辑  收藏  举报