js实现定时器及注意的问题

<html>
<head>
<style>
div{width:100px;height:100px;position:absolute;background:red;left:0;top:50px;}
</style>
<script>
 var timer=null;
function startMove()
{
    clearInterval(timer);//开定时器前先关闭定时器。否则会多开几个定时器，div的速度会变快。
    var oDiv=document.getElementById(‘div1‘);
   
    timer=setInterval(function(){
        
        if(oDiv.offsetLeft>=300)
        {
            clearInterval(timer);//关闭timer定时器后会继续运行下面的代码。因此要将oDiv.style.left=oDiv.offsetLeft+10+‘px‘;放到else里，避免clearInterval（timer）之后运行，否则会出现div 10px的向右移动。
            //停止定时器是下次不执行了，但是这次还要将函数跑完了。
        }
        else
        {
            oDiv.style.left=oDiv.offsetLeft+10+‘px‘;
        }
    },30);
}
</script>
</head>
<body>
<input type=‘button‘ value="开始运动" onclick=‘startMove()‘/>
<div id="div1"></div>
</body>
</html>

时间： 2024-11-07 22:18:40

js实现定时器及注意的问题的相关文章

js给定时器调用传递参数

给定时器调用传递参数无论是window.setTimeout 还是window.setInterval,在使用函数名作为调用句柄时都不能带参数,而在许多场合必需要带参数,这就需要想方法解决.例如对于函数hello(_name), 它用于针对用户名显示欢迎信息: var userName="jack"; //根据用户名显示欢迎信息 function hello(_name){ alert("hello,"+_name); } 这时,如果企图使用以下语句来使hell

智能社Js笔记——定时器的使用

写JS代码,首先确定写的JS能够完成功能,并且没有任何bug,然后再做的事情就是把代码里面相似的东西进行合并,代码优化: 1.定时器的作用开启定时器 setInterval(function (){} , 1000) 间隔型 setTimeOut (function (){}, 1000) 延时型两种定时器的区别停止定时器 clearInterval(timer); clearTimeout(timer); <!DOCTYPE html> <html lang="e

js之定时器

一.通过定时器我们可以间隔设定时间重复调用某个函数,利用这个特性,我们可以做很多事,例如,12306上的每间隔5秒查询自动查询一次余票,简单动画的实现等等二.定时器的格式: 定时器有两种格式,分别是setInterval(func, time) 和 setTimeout(func, time),这两个有一些区别 1.setInterval(func, tine); (1). 此定时器操作是这样的,解释到该语句时,是要间隔time时间后第一次执行func函数,间隔time时间后再次执行func函

JS之定时器函数

1.倒计时定时器 timename=setTimeout("function()",delaytime); clearTimeout(timename); 2.循环定时器 timename=setInterval("function()",delaytime); clearTimeout(timename);

20150706 js之定时器

对应智能社:09 定时器的使用 setInterval(a,1000); 其中参数一为一个函数名,第二个为一个数值,单位为毫秒. function a(){ console.log('wyl'); } setInterval(a,1000) setInterval 的会一直执行,简直停不下来. 与之对应的是setTimeout则只执行一次.这就是二者的区别.

js中定时器2

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> //执行一次定时执行 //setTimeout("alert(123)",2000); function test(num){

js之定时器操作

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .pmd{ width:200px; height: 100px; color: red; position: absolute; left:50%; top:50%; margin-left:-100

JS中定时器setTimeout,setInterval,clearTimeout,clearInterval用法

setTimeout是指过多久执行,只执行一次 setInterval是指每过多久执行一次 clearTimeout是关闭setTimeout定时器 clearInterval是关闭setInterval定时器,不让它一直执行 <html> <head> <title></title> </head> <style> </style> <script> window.onload=function(){ var

js设置定时器和清除定时器

一.前言在前端,我们有很多功能需要用到定时器.譬如轮询,譬如定时关闭弹框,譬如实现秒表,譬如一段时间后跳转页面等等.因此,我们需要掌握定时器的用法.二.设置定时器目前window对象提供有两个方法来实现定时器的效果,分别是window.setTimeout()和window.setInterval(). 其中setInterval()的作用是:使一段代码每过指定时间就运行一次:常用于轮询. setInterval(function(){ console.log("这是一个setInterva