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. js删除字符串的最后一个字符三种方法

    字符串 var basic = "abc,def,ghi,"; 第一种 basic = basic.substr(0, basic.length - 1); 第二种 basic = ...

  2. MsDepSvc 启动失败

    MsDepSvc 使用80端口,用于 Microsoft Web Deploy 3.6 的远程代理服务. 如果80端口被占用,则启动失败.我的是被phpstudy软件占用,所以启动失败.

  3. MVC文件上传02-使用HttpPostedFileBase上传多个文件

    本篇体验上传多个文件.兄弟篇为: MVC文件上传01-使用jquery异步上传并客户端验证类型和大小           MVC最基本上传文件方式中的一个遗漏点 □ 前台视图部分 1: <% u ...

  4. IOS开发之----代码块的使用(二)

    iOS4引入了一个新特性,支持代码块的使用,这将从根本上改变你的编程方式.代码块是对C语言的一个扩展,因此在Objective-C中完全支持.如果你学过Ruby,Python或Lisp编程语言,那么你 ...

  5. nsstring 怎么包含”(引号)号

    使用转义字符 \ 即可.如下: [NSString *string = @"\"好\""]; NSLog("%@",string); 打印结 ...

  6. 解决ElasticSearch5.x中@Field注解之IK分词不能用的问题

    一.概述 环境:ElasticSearch版本5.6.3,SpringBoot 2.0.2.RELEASE,索引myIndex 问题描述:使用@Field注解给实体类指定ik分词解析器(ik_smar ...

  7. SYS.AUD$无法扩容导致无法登录的问题

    版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/bisal/article/details/19068663 昨天同事说有个测试库无法登录了,用PLS ...

  8. appium+python自动化53-adb logcat查看日志

    前言 做app测试,遇到异常情况,查看日志是必不可少的,日志如何输出到手机sdcard和电脑的目录呢?这就需要用logcat输出日志了 以下操作是基于windows平台的操作:adb logcat | ...

  9. 如何解决Maven速度慢

    注:oschina已失效 Maven 远程仓库 <mirror> <id>ui</id> <mirrorOf>central</mirrorOf& ...

  10. HBase性能调优(转)

    原文链接:http://www.blogjava.net/ivanwan/archive/2011/06/15/352350.html 因官方Book Performance Tuning部分章节没有 ...