zoukankan      html  css  js  c++  java
  • JS中的计时器事件

    JS可以实现很多java代码不易完成的功能。这里学习一些js中的计时器事件。

    JavaScript 一个设定的时间间隔之后来执行代码,称之为计时事件。

    主要通过两个方法来实现:

    1.setInterval() - 间隔指定的毫秒数不停地执行指定的代码。

    2.setTimeout() - 暂停指定的毫秒数后执行指定的代码

    并且,这两个方法都是window对象的方法。

    首先,介绍setInterval()方法,该方法值得是间隔一定的毫秒数不停的执行指定的代码。

    语法:window.setInterval(”js代码,函数等“,毫秒数);

    实例1:每三秒弹出一个hello

    setInterval(function(){alert("Hello")},3000);

    实例2:显示当前时间,通过按钮实现时间的停止,开始

    <script type="text/javascript">
        var myVar;
        function startTimer(){ 
            /*setInterval() 间隔指定的毫秒数不停地执行指定的代码*/
            myVar=setInterval(function(){myTimer()},1000);
            }
        function myTimer()/* 定义一个得到本地时间的函数*/
        {
        var d=new Date();
        var t=d.toLocaleTimeString();
        document.getElementById("demo").innerHTML=t;
        }
        function stopTimer()
        {/* clearInterval() 方法用于停止 setInterval() 方法执行的函数代码*/
        clearInterval(myVar);
        }
        </script>
    setTimeout() 方法

    在html或jsp中

    <body>
        <h4 id="demo"></h4>
        <input type="button" onclick="startTimer()" value="开始">
        <input type="button" onclick="stopTimer()" value="停止">
    </body>


    对于setTimeout()方法,指的是指定的毫秒数后执行指定的代码或方法。

    语法:window.setTimeout("javascript 函数",毫秒数);

    实例1:3秒钟后弹出”hello“提示框

    setTimeout(function(){alert("Hello")},3000);

    实例2:三秒钟后跳转到前一个页面

    <script type="text/javascript">
        setTimeout(function(){
                window.history.back();
        },3000);
    </script>

    如何执行停止呢?

    clearTimeout() 方法用于停止执行setTimeout()方法的函数代码。这里注意myVar必须是一个全局变量。实例如下:

    var myVar;
        function myFunction()
        {
        myVar=setTimeout(function(){alert("Hello")},3000);
        }
    
        function myStopFunction()
        {
        clearTimeout(myVar);
        }

    以上就把js计时器的基本功能简要介绍了,具体的使用场景,想要深刻理解,只有到项目用到时方可有新的理会。

    业务驱动技术,技术是手段,业务是目的。
  • 相关阅读:
    Jzoj3895 数字对
    Jzoj3895 数字对
    Jzoj3894 改造二叉树
    Jzoj3894 改造二叉树
    Jzoj3883 线段树
    Jzoj3883 线段树
    Jzoj3882 近邻
    Jzoj3882 近邻
    第三十一天 how can I 坚持
    第三十天 how can I 坚持
  • 原文地址:https://www.cnblogs.com/sloveling/p/js.html
Copyright © 2011-2022 走看看