js的计时器

最新推荐文章于 2022-06-14 22:30:00 发布

LM_AC

最新推荐文章于 2022-06-14 22:30:00 发布

阅读量345

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/Myair_AC/article/details/77779999

版权

JavaScript 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

1 . 计时器函数有两个:
第一个:setInterval(fn,ms) fn:函数 ms毫秒
此方法的含义：间隔指定毫秒的时间去重复执行fn函数的内容重复执行
1.1 手机注册发送验证码， 60s倒计时每隔1000ms更新一次页面
1.2 注册成功后跳转到成功页面，倒计时5s跳转到登录页面每隔1000ms更新一次页面
1.3 广告轮播效果，重复显示图片
第二个:setTimeOut(fn,ms) fn:函数 ms毫秒
此方法的含义：指定毫秒数后执行fn函数的内容，只执行一次
我们先来看一个短信验证码倒计时的例子:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            var  time =10;/*60秒*/
            var interval1;

            /*1.查找控件*/
            window.onload=function(){
            /*查找元素*/
            var  input1   =  document.getElementById("input1");
            }
            /*2.点击调用倒计时函数*/
            function  test1(){
             /*60s倒计时*/
             interval1 =  setInterval("calTime()",1000);
            }

            /*3.处理倒计时的任务*/
            function calTime(){
                /*真正的操作*/
                time--;
                if(time==-1){
                    input1.value="重新发送"; 
                    window.clearInterval(interval1);//用来停止的
                }else{
                    input1.value="还剩"+time+"s";
                }
            }
        </script>
    </head>
    <body>
        <input type="text" name="phonenumber"/>
        <input type="button" value="发送验证码" onclick="test1()" id="input1"/>
        <br>
    </body>
</html>

总结:
注意 setInterval()函数的第一个参数要用引号引起来,
另外,window.clearInterval(interval1);这是用来停止计时器计数的,在这里具体说一下window.clearInterval()的用法:
clearInterval() 方法可取消由 setInterval() 设置的倒计时时间。
clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值,所以要在setInterval()函数的前面加个接收ID值的变量.
另外注意给input的value赋值是怎么赋值的:

input1.value="还剩"+time+"s";

2 .实现页面跳转倒计时,使用setInterval()

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            window.onload=function test(){
        var  time =  document.getElementById("time");
                var timeValue = time.innerHTML;

                var interval01 =  setInterval(function(){

                    timeValue--;
                    if(timeValue==-1){
                        /*清除计时器*/
                        window.clearInterval(interval01);
                        window.open("login.html");
                    }else{
                        time.innerHTML=timeValue;
                    }
                 },1000);
            }

        </script>
    </head>
    <body>
        注册成功！<font style="color:red;" id="time">5</font>s后跳转到登录页面进行登录！
    </body>
</html>

总结:获取文本内容是var timeValue = time.innerHTML;,如果给文本赋值是time.innerHTML=timeValue;

3 . 实现图片轮播效果,具体分两个功能,一个是自动轮播,还有一个是有上一个按钮,可以查看上一个图片.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            var imgName=1;
            window.onload=function(){
            var img1= document.getElementById("img1");  
             setInterval("handleImg()",4000);
            }

            function handleImg(){
                imgName++;
                if(imgName==5){
                    imgName=1;
                }
                img1.src="img/"+imgName+".png";
            }
            //如果点击上一个的按钮,
            function prevImg(){
                /*点击该按钮加载上一个图*/
                /*
                 * 1.获取当前图片的位置: imgName
                 */
                alert("当前位置："+imgName);

                imgName = imgName-1;

                /*找临界条件*/
                if(imgName==0){
                    /*如果是第一页，直接让显示最后一个*/
                    imgName=4;
                }
                img1.src="img/"+imgName+".png";
            }


        </script>
    </head>
    <body>

        <button onclick="prevImg()">上一个</button>
        <img id="img1" src="img/1.png"  alt="图片加载失败"
            width="200px" height="200px" style="background-color: gray;"/>

    </body>
</html>

4 .看一下计时器的另外一种函数方式:setTimeout(函数,间隔毫秒数);
在body中:

        注册成功！<font style="color:red;" id="time">5</font>s后跳转到登录页面进行登录！

在script中:加一个window.onload就不用在用的时候调用函数了,执行完body会直接执行window.onload的代码,5秒过后直接跳转到login界面,没倒计时提示

<script>
            window.onload=function test(){
              //方式一：   一进入该页面就开始倒计时，5s后直接跳转到登录页面，只执行一次
                setTimeout(function(){

                    window.open("login.html");

                },5000);

5 .浏览器历史,使用history.go()实现

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
         <a href="短信倒计时.html">点击进行发送验证码</a>
         <!--

            浏览器中的上一页历史查看(从其他页面1跳转到当前页， 其他页1就是当前页的上一页)：history.back()/ history.go(-1)
            浏览器中的下一页历史查看(从当前页跳转到其他页2,其他页2就是当前页的下一页)：history.forward()/ history.go(1)
            当前页 ：history.go(0)

         -->
        <!-- <input  type="button" value="上一页" onclick="history.back()"/>
             当前页
         <input  type="button" value="下一页" onclick="history.forward()"/>    -->


           <input  type="button" value="上一页" onclick="history.go(-1)"/>
             当前页
         <input  type="button" value="下一页" onclick="history.go(1)"/>    
    </body>
</html>

LM_AC

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js的计时器

1 . 计时器函数有两个: 第一个:setInterval(fn,ms) fn:函数 ms毫秒此方法的含义：间隔指定毫秒的时间去重复执行fn函数的内容重复执行 1.1 手机注册发送验证码， 60s倒计时每隔1000ms更新一次页面 1.2 注册成功后跳转到成功页面，倒计时5s跳转到登录页面每隔100
复制链接

扫一扫

专栏目录