JS中定时器的使用

js 定时器的四个方法
  • setInterval() ：按照指定的周期（以毫秒计）来调用函数或计算表达式。方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。
  • setTimeout() ：在指定的毫秒数后调用函数或计算表达式。
  • clearTimeout(timer)：取消由setTimeout()设置的定时操作。
  • clearInterval(timer)：取消由setInterval()设置的定时操作。
setInterval()与clearInterval(timer)
语法
setInterval(code,millisec,lang)
参数
描述
code
必需。要调用的函数或要执行的代码串。
millisec
必须。周期性执行或调用 code 之间的时间间隔，以毫秒计。
lang
可选。 JScript | VBScript | JavaScript
以下实例在每 1000 毫秒执行 clock() 函数。实例中也包含了停止执行的按钮:
<html>
<body>

<input type="text" id="clock" />
<script type="text/javascript">
var int=self.setInterval("clock()",1000);
function clock()
{
var d=new Date();
var t=d.toLocaleTimeString();
document.getElementById("clock").value=t;
}
</script>

<button onclick="int=window.clearInterval(int)">停止</button>

</body>
</html>
setTimeout()与clearTimeout（）
语法 
setTimeout(code,millisec,lang)
参数
描述
code
必需。要调用的函数后要执行的 JavaScript 代码串。
millisec
必需。在执行代码前需等待的毫秒数。
lang
可选。脚本语言可以是：JScript | VBScript | JavaScript
实例演示如下： 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
</head>
<body>

<p>点击按钮，在等待 3 秒后弹出 "Hello"。</p>
<button onclick="myFunction()">点我</button>

<script>
function myFunction()
{
    setTimeout(function(){alert("Hello")},3000);
}
</script>

</body>
</html>
示例一
示例一我们将用定时器做一个鼠标点击定向移动div的demo。 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin:0;
                padding: 0;
            }
            #box{
                position:absolute;
                left: 0;
                height:100px;
                width:100px;
                background:#000;
                }
            #bt{
                position: absolute;
                top:110px;
            }
            
        </style>
        <script type="text/javascript">
            window.onload=function(){
                var bt=document.getElementById("bt");
                var box=document.getElementById("box");
            
                var timer;
                bt.onclick=function(){
                //关闭上一次定时器
                clearInterval(timer);
                //开启一个定时器    
                timer=setInterval(function(){

                        var oldvalue=parseInt(getStyle(box,"left"));
                        var newvalue=oldvalue+10;
                        if(newvalue>800)
                        {
                            newvalue=800;
                        }
                        box.style.left=newvalue+"px";
                        //当元素到达800关闭定时器
                        if(newvalue===800)
                        clearTimeout(timer);
                    
                },30);
                    
                };
            };
            
            function getStyle(obj,name){
                if(window.getComputedStyle){
                    return getComputedStyle(obj,null)[name];
                }else{
                    return obj.currentStyle[name];
                }
            };
        </script>
    </head>
    <body>
        <div id="box">
            
        </div>
        <button id="bt">开始</button>
    </body>
</html>

 

posted @ 2021-04-22 14:33  沉默的的乘客  阅读(924)  评论(0)    收藏  举报