1、setTimeout

  延迟执行,只执行一次,定时炸弹、炸了就没了

window.setTimeout(function(){要执行的事件},间隔时间毫秒);

2、setInterval

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

window.setInterval(function(){要执行的事件},间隔的时间毫秒);

3、clearInterval  

  关闭定时器

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

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

4、offset

  当前即时的对象的高度、宽带、位置,直接到浏览器上去找

 var v = document.getElementById('a')

v.offsetWidth      // 当前的宽带
v.offsetHeight // 当前的高度
v.offsetLeft //当前距离左侧位置
v.offsetTop //当前距离上方位置
v.offsetParent //当前起点位置

实例

例1、点击按钮,按钮本身的长度发生变化,并且位置移动

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

<script type="text/javascript">
var v = document.getElementById('a')
v.onclick = function () {
v.style.width = v.offsetWidth + + "px"; //长度改变
v.style.left = v.offsetLeft + + "px"; // 位置移动,位置发生改变时必须要有定位 +100向右移动,-100向左移动
}
</script>

例2、点击按钮,按钮本身的长度、位置持续变化

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

<script type="text/javascript">
var v = document.getElementById('a')
v.onclick = function () {
window.setInterval(function () {
v.style.width = v.offsetWidth + + "px";
v.style.left = v.offsetLeft + + "px";
}, )
}
</script>

例3、 在例2的基础上让定时器停下

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

<script type="text/javascript">
var v = document.getElementById('a')
v.onclick = function () {
var t= window.setInterval(function () { //先用 var t 接收 window.setInterval 的值,这个值就是定时器对象
if (v.offsetLeft >)
{
window.clearInterval(t)
}
v.style.width = v.offsetWidth + + "px";
v.style.left = v.offsetLeft + + "px";
}, )
}
</script>

5、计时器

<button id="btn_Phone" click="SetInter()">获取验证码</button>

<script type="text/javascript">

    function SetInter() {
time = ;
$("#btn_Phone").attr("disabled", true);
var myset = setInterval(
function countDown() {
if (time === ) {
$("#btn_Phone").attr("disabled", false);
$("#btn_Phone").html("重新获取验证码");
clearInterval(myset);
            return;
}
else {
time--; $('#btn_Phone').html(time + "秒后重新获取");
}
}, );
} </script>

JS 定时器 setTimeout 与 setInterval 的区别和用法的更多相关文章

  1. setTimeout()和setInterval()的区别

    JS学习 - setTimeout()和setInterval()的区别 相同点 setTimeout 和 setInterval的语法相同.他们都有两个参数,一个是将要执行的代码字符串,还有一个是以 ...

  2. setTimeout和setInterval的区别以及如何写出效率高的倒计时

    1.setTimeout和setInterval都属于js中的定时器,可以规定延迟时间再执行某个操作,不同的是setTimeout在规定时间后执行完某个操作就停止了,而setInterval则可以一直 ...

  3. 【转】JS中setTimeout和setInterval的最大延时值详解

    前言 JavaScript提供定时执行代码的功能,叫做定时器(timer),主要由setTimeout()和setInterval()这两个函数来完成.而这篇文中主要给大家介绍的是关于JS中setTi ...

  4. setTimeout与setInterval的区别

    setTimeout与setInterval的区别:1.setTimeout设置后隔指定时间后只会执行一次2.setInterval设置后会每隔指定时间执行一次3.setTimeout一般在方法内部使 ...

  5. js,setTimeout与setInterval的用法

    1.setTimeout与setInterval的区别 setTimeout: 1.直接使用的话,按照指定 的时间,只执行一次传入的函数参数. 2.函数的终止使用clearTimeout. setIn ...

  6. 定时器setTimeout()和setInterval()使用心得整理

    JavaScript提供定时执行代码的功能,叫做定时器(timer),主要由setTimeout()和setInterval()这两个函数来完成. 一.setTimeout() setTimeout函 ...

  7. javascript中的两个定时函数setTimeOut()和setInterVal()的区别

    js中经常性要用到间隔几秒或暂停几秒执行某个函数, 简单介绍我从网上收集到setTimeOut()和setInterVal()的区别1.setInterVal()介绍 1)定义 setInterval ...

  8. Javascript 笔记与总结(2-13)定时器 setTimeout 和 setInterval

    定时器可以让 js 效果每隔几秒钟执行一次或者 n 秒之后执行某一个效果.定时器不属于 javascript,是 window 对象提供的功能. setTimeout 用法: window.setTi ...

  9. setTimeout()与setInterval()方法区别介绍

    计时器setTimeout()和setInterval()两个都是js的计时功能的函数两个有些区别,下面为大家简单介绍下,希望对大家有所帮助   计时器setTimeout()和setInterval ...

随机推荐

  1. ASP.NET Core 2.1 源码学习之 Options[3]:IOptionsMonitor

    前面我们讲到 IOptions 和 IOptionsSnapshot,他们两个最大的区别便是前者注册的是单例模式,后者注册的是 Scope 模式.而 IOptionsMonitor 则要求配置源必须是 ...

  2. Windows10卡顿,磁盘 内存占用100%或比较多

    1.关闭服务:Superfetch: 2.结束antimalware service executable进程,gpedit.msc下依次点击“计算机配置/管理模板/Windows组件/Windows ...

  3. 拟物设计和Angular的实现 - Material Design

    Material Design是Google最新发布的跨平台统一视觉设计语言.直接翻译是物质设计,但是我更倾向于使用"拟物设计"更为准确. 据谷歌介绍,Material Desig ...

  4. Git之初识

    我的Github地址:https://github.com/shinianzongjishinianxin 初见总是美好的,可是我第一次看到github有点纠结,因为看不懂,然而最终半蒙半猜还是注册完 ...

  5. Lerning Entity Framework 6 ------ Inserting, Querying, Updating, and Deleting Data

    Creating Entities First of all, Let's create some entities to have a test. Create a project Add foll ...

  6. Codeforces Round #425 (Div. 2) B. Petya and Exam(字符串模拟 水)

    题目链接:http://codeforces.com/contest/832/problem/B B. Petya and Exam time limit per test 2 seconds mem ...

  7. odoo-开发笔记 列表视图 增加记录弹出窗口效果

    editable="bottom" 增加该标签的效果是,添加记录的时候,在原列表视图上一行一行添加; 去掉该标签之后,那么增加新记录的时候,会以弹出窗口的方式实现. 如果弹出的窗口 ...

  8. Dev Label显示不同颜色字体

    labelControl1.Text = "<size=14>Size = 14<br>" + "<b>Bold</b> ...

  9. MapReduce中的partitioner

    1.日志源文件: 1363157985066 13726230503 00-FD-07-A4-72-B8:CMCC 120.196.100.82 i02.c.aliimg.com 24 27 2481 ...

  10. 自动化部署-从maven到shell脚本到jenkins

    Java代码自动部署 [ ①Java代码自动部署-总结简介] 代码部署是每一个软件开发项目组都会有的一个流程,也是从开发环节到发布功能必不可少的环节.对于Java开发者来说,Java代码的发布部署也是 ...