您的位置：首页 > Web前端 > JavaScript

JS 定时器 setTimeout 与 setInterval 的区别和用法

2017-04-02 01:24 816 查看


定时器：

window.setTimeout(function(){},间隔时间毫秒); 

                           -- 定时炸弹，延迟执行，只执行一次

window.setInterval(function(){},间隔的时间毫秒);
                                                              

                           -- 无限循环，每一次循环有间隔时间，一般不要小于20毫秒
                           -- 它是有返回值的，可以用一个变量来接收这个定时器对象

window.clearInterval(要关闭的定时器对象);

                            -- 一旦执行这句代码，会立刻停止此定时器对象的执行

offset

                 -- 当前即时的对象的高度、宽带、位置，

                 -- 直接到浏览器上去找

对象.offsetWidth      -- 当前的宽带

对象.offsetHeight     -- 当前的高度

对象.offsetLeft         --当前距离左侧位置

对象.offsetTop          --当前距离上方位置

对象.offsetParent     -- 当前起点位置 

 

对象.style.样式

                 -- -- Js 只能获取到内联的样式，无法获取 CSS表中的样式

 

例题 1

    点击按钮，按钮本身的长度发生变化，并且位置移动

<html >
<head>
<title></title>

<style type="text/css">
#a {
position:absolute;
}
</style>

</head>
<body>

<input type="button" value="按钮" id="a" />

</body>
</html>

<script type="text/javascript">

var v = document.getElementById('a')

v.onclick = function () {

var t=  window.setInterval(function () {

if (v.offsetLeft >500)
{
window.clearInterval(t)
}

v.style.width = v.offsetWidth + 10 + "px";

v.style.left = v.offsetLeft + 10 + "px";
}, 20)
}

</script>
View Code

-- 先用 var t; 接收 window.setInterval 的值，这个值就是定时器对象

 

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航