Created by Marydon on

1.定义

　　语法：setInterval(param1,param2)

　　param1　　要调用的函数或要执行的代码串。

　　param2　　周期性调用param1的时间间隔，单位：毫秒

　　表示每隔多少毫秒执行一次param1。

　　停止执行需要使用clearInterval()。

2.情景展示

　　设置指定时间后，同意按钮才可以使用，并显示剩余时间

3.代码实现

　　使用计时器setInterval()方法可以实现

　　html

<body>

    <div style="width:500px;">您通过本网站下使用或获取任何材料、信息、产品或服务之前，请先仔细阅读本 cookie 声明。我们有权随时更改、更新或更正任何本 cookie 声明或本网站所载任何信息，并将经修订条款公布于本网站，恕不另行通知。请不时审阅本 cookie 声明，确保您了解任何变更。如果本 cookie 声明有任何重大的变更，我们将会在本网站上的主页清楚说明这些变更。</div>

    <input type="button" value="我同意" disabled="disabled"/>

</body>

　　javascript

<script type="text/javascript">

    (function(i){// 闭包

        var countDown;

        // 对按钮进行操作

        function change(i) {

            var text = "我同意";

            if (i > 0) {

                text += "（" + i + "秒）";

            } else {

                $(':button').prop('disabled', false);

                // 不再调用

                clearInterval(countDown);

            }

            $(':button').val(text);

        };

        // 页面加载完毕执行

        $(function(){

            // 计时器（1秒调用一次）

            countDown = setInterval(function () {

                change(i);

                i--;

            }, 1 * 1000);// 1000毫秒

        });

    })(60);// 60s

</script>

4.效果展示

　　60秒后

5.小结

　　使用闭包的原因，是为了避免全局污染，不让外界访问到变量i；

　　闭包语法：(function(){//具体要执行的代码})()。

相关推荐：

 

js setInterval() 用法示例的更多相关文章

  1. Javascript模块化编程（三）：require.js的用法

    Javascript模块化编程(三):require.js的用法 原文地址:http://www.ruanyifeng.com/blog/2012/11/require_js.html 作者: 阮一峰 ...

  2. JS 正则表达式用法

    JS 正则表达式用法简介 简单的说,正则表达式是一种可以用于模式匹配和替换的强有力的工具.其作用如下: 测试字符串的某个模式.例如,可以对一个输入字符串进行测试,看在该字符串是否存在一个电话号码模式或 ...

  3. 腾讯云上PhantomJS用法示例

    崔庆才 前言 大家有没有发现之前我们写的爬虫都有一个共性,就是只能爬取单纯的html代码,如果页面是JS渲染的该怎么办呢?如果我们单纯去分析一个个后台的请求,手动去摸索JS渲染的到的一些结果,那简直没 ...

  4. 腾讯云上Selenium用法示例

    欢迎大家关注腾讯云技术社区-博客园官方主页,我们将持续在博客园为大家推荐技术精品文章哦~ 作者:崔庆才 前言 在上一节我们学习了PhantomJS 的基本用法,归根结底它是一个没有界面的浏览器,而且运 ...

  5. (转)Javascript模块化编程（三）：Require.js的用法

    转自 ruanyifeng 系列目录: Javascript模块化编程(一):模块的写法 Javascript模块化编程(二):AMD规范 Javascript模块化编程(三):Require.js的 ...

  6. Linux find 用法示例

    Linux中find常见用法示例 ·find   path   -option   [   -print ]   [ -exec   -ok   command ]   {} \; find命令的参数 ...

  7. jQuery中$.fn的用法示例介绍

    $.fn是指jquery的命名空间,加上fn上的方法及属性,会对jquery实例每一个有效,下面有个不错的示例,喜欢的朋友可以参考下 如扩展$.fn.abc(),即$.fn.abc()是对jquery ...

  8. [转]Linux中find常见用法示例

    Linux中find常见用法示例[转]·find   path   -option   [   -print ]   [ -exec   -ok   command ]   {} \;find命令的参 ...

  9. oracle中to_date详细用法示例(oracle日期格式转换)

    这篇文章主要介绍了oracle中to_date详细用法示例,包括期和字符转换函数用法.字符串和时间互转.求某天是星期几.两个日期间的天数.月份差等用法 TO_DATE格式(以时间:2007-11-02 ...

随机推荐

  1. 关于OPC Client 编写

    昨天又有人问我 OPC Client 编写,实际是他们不了解OPC 客户端的工作原理,要想写客户端程序,必须知道OPC对象, OPC逻辑对象模型包括3类对象:OPC server对象.OPC grou ...

  2. Asp.Net中自以为是的Encode

    Asp.Net 引擎可能是不错,但是它把程序员想的太笨,会自以为是做很多自动的 Encode 和 Decode,以下文举例: 如果客户端我们 post 了如下的数据, 但是你实际得到的是: 也就是说, ...

  3. http状态码的含义及502, 503和504的区别

    https://zh.wikipedia.org/wiki/HTTP%E7%8A%B6%E6%80%81%E7%A0%81#5xx%E6%9C%8D%E5%8A%A1%E5%99%A8%E9%94%9 ...

  4. Android - 错误:&quot;No resource found that matches the given name android:Theme.Material&quot;

    Android - 错误:"No resource found that matches the given name android:Theme.Material" 本文地址:  ...

  5. eclipse svn 配置

    1.安装svn http://subversion.apache.org/ 到apache网站上下载svn 2.在eclipse中安装svn插件 在eclipse->help->eclip ...

  6. C++获得本机所有网卡的IP和MAC地址信息

    一台机器上可能不只有一个网卡,但每一个网卡只有一个MAC地址,而每一个网卡可能配置有多个IP地址:如平常的笔记本电脑中,就会有无线网卡和有线网卡(网线接口)两种:因此,如果要获得本机所有网卡的IP和M ...

  7. guess-number-higher-or-lower

    // Forward declaration of guess API. // @param num, your guess // @return -1 if my number is lower, ...

  8. Apache PHP Mysql 开发环境快速配置

    学习PHP开发要配置各种环境,一般会用到apache作为服务器.Mysql数据库.如何快速的配置环境成为困扰大家的烦恼,之前自己也配过,比较繁琐. 最新发现一款集成安装软件“phpStudy”.真可谓 ...

  9. cookie.setPath（）的用法

    正常的cookie只能在一个应用中共享,即一个cookie只能由创建它的应用获得.1.可在同一应用服务器内共享方法:设置cookie.setPath("/");    本机tomc ...

  10. Android数据适配-ExpandableListView

    Android中ListView的用法基本上学的时候都会使用,其中可以使用ArrayAdapter,SimpleAdapter,BaseAdapter去实现,这次主要使用的ExpandableList ...