JavaScript笔记-发送验证码定时器案例(setInterval与clearInterval的使用)

最新推荐文章于 2022-03-16 10:47:09 发布
最新推荐文章于 2022-03-16 10:47:09 发布
阅读量595 收藏 4
点赞数
分类专栏： JavaScript 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/init_8y0/article/details/114702423
版权

文章目录

前言

JavaScript的学习笔记-发送验证码定时器案例(setInterval与clearInterval的使用)

注：仅实现倒计时的功能，无实际发送验证码功能

一、函数用法

引用自菜鸟教程: https://www.runoob.com/jsref/met-win-setinterval.html

1.setInterval

setInterval(function, milliseconds[, param1, param2, ...])
参数 描述
function 必填项，函数名或匿名函数
milliseconds 必填项，周期性执行或调用function之间的时间间隔，以毫秒计
param1, param2, … 选填项，传给执行函数的其他参数（IE9前不支持）

2.clearInterval

clearInterval(setintervalId)
参数 描述
setintervalId 必填项，调用 setInterval() 函数时所获得的返回值
可以取消该 setInterval() 所设定的定时执行操作

二、代码

HTML代码如下：

<!DOCTYPE html>
<html lang="en
最低0.47元/天 解锁文章
Green8y0
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
setInterval() 定时器 —— 发送短信验证码倒计时
赚钱养自个儿的博客
05-01 529
    学习来源：https://www.bilibili.com/video/BV1HJ41147DG   要求  点击按钮后，该按钮60秒之内不能再次点击，防止重复发送短信。 思路  1、按钮点击之后，使用禁用 disabled = true;  2、同时按钮里面的内容会变化，注意 button 里面的内容通过 innerHTML 修改  3、里面秒数是有变化的，因此需要用到定时器 &am...
JavaScript学习笔记之基于定时器实现图片无缝滚动功能详解
12-01
本文实例讲述了JavaScript学习笔记之基于定时器实现图片无缝滚动功能。分享给大家供大家参考，具体如下： 一、无缝滚动理论基础 基础知识 1.setInterval（function，time）、clearInterval（timer） setInterval() ...
发送短信案例 利用javascript计时器setInterval和清除效果
mastercao的博客
03-16 1137
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do.
【干货分享|建议收藏】1w字搞定BOM
09-02 7342
8.1 BOM 简介 在实际开发中，使用 JavaScript 开发 Web 程序时，经常需要对浏览器进行访问及其他的操作，实现浏览器与页面之间的动态交互效果。为此，BOM 提供了很多用于访问浏览器的对象。本节将详细讲解 BOM 的组成。 8.1.1 什么是 BOM 浏览器对象模型 ( Brower Object Model, BOM ) 提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是 window。 BOM 由一系列相关的对象构成，并且每个对象都提供了很多方法和属性。但是 BOM 缺乏标准，J
JS第四天
I_love_bc的博客
04-05 119
1.BOM概述 1.1什么是BOM BOM ( Browser Object Model )即浏览器对象模型,它提供了独立于内容而与浏览器窗口进行交互的对象,其核心对象是window。 BOM由- -系列相关的对象构成,并且每个对象都提供了很多方法与属性。 BOM缺乏标准, JavaScript语法的标准化组织是ECMA , DOM的标准化组织是W3C , BOM最初是Netscape浏览器标准的一部分。 DOM ●文档对象模型 ●DOM就是把「文档」当做 一个「对象」来看待 ●DOM的顶级对象是docum
JS setInterval() 与 clearInterval() 方法的使用
xiaoshang的专栏
10-19 794
一、HTML DOM setInterval()、clearInterval() 方法      setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。      clearInterval() 方法可以取消该周期性的方法调用。           详细可参见：http://www.w3school.com.cn/htmldom/met_win_setint
setInterval全面的介绍
08-02 1405
setInterval全面的介绍setInterval动作的作用是在播放动画的时，每隔一定时间就调用函数，方法或对象。可以使用本动作更新来自数据库的变量或更新时间显示。setInterval动作的语法格式如下：setInterval(function,interval[,arg1,arg2,......argn])setInterval(
JavaScript学习笔记之定时器
10-24
JavaScript中的定时器是编程中非常重要的一个概念，它允许开发者在特定时间点或者按照固定间隔执行某些代码。本文主要介绍了两种基本的定时器：`setTimeout` 和 `setInterval`。 ### setTimeout `setTimeout` 函数...
前端学习笔记，做一个简单的网站-定时器，学习代码
最新发布
06-20
在JavaScript中，你可以使用`setInterval`函数来设置一个定时任务，每隔一定时间执行一次指定的函数。例如，你可能创建一个变量来存储时间，然后每秒更新这个值并显示在页面上。同时，`clearInterval`函数用于停止...
JavaScript笔记
09-28
|--与用户的交互； |--执行计算等。 1.单击事件：定义在按钮的开始标签中 语法：onclick="js语句" 弹出警告：alert(‘字符串’) 强调：1.js区分大小写 2.字符串单双引号不区分 [removed]标签：页面...
js实现发送验证码后的倒计时功能
10-24
本文解决方案的基本思路是点击就将按钮设为disabled,然后根据cookie判断是否设置过期时间,将手机利用ajax提交到后台的发短信接口，就可以了
JS中setInterval()和clearInterval()定时器使用详解及获取验证码倒计时实例
阿尔法小师妹
08-27 1765
1.使用详解 setInterval()与clearInterval()是直属于windows对象的js函数。 setInterval()以间隔指定的毫秒数不停的执行指定的代码。使用方法：setInterval(code，millisec)，两个参数都是必须的，第一 个参数为要调用的函数或要执行的代码串。第二个参数为周期性执行或调用 code 之间的时间间隔，以毫秒计。 cle...
定时器实现一定时间后重新发送验证码
Smallmouse96的博客
12-02 477
定时器实现60秒后重新发送验证码。 也可用作几秒后自动跳转页面。 实现思路如下： 创建两个 button，默认第一个 button 显示，第二个隐藏，当点击第一个时隐藏第一个显示第二个。这样可以解决第一个按钮连续点击后的 bug。 声明变量并赋值，点击事件中对声明的变量做自减，做判断，如果变量大于 1 则执行定时器，否则所有属性回复默认值，并关闭定时器。示例代码： <!DOCTYPE html> <html lang="zh"> <head> <met
发送验证码计时器
何欢的博客
03-17 315
定时器 var wait=60; function time(o) { if (wait == 0) { o.attr("disabled",false); o.html("获取验证码"); wait = 60; } else { o.attr("disabled", true); o.html("重新发送(" + wait + ")"); wait--; setTimeou...
免费获取验证码实现倒数60秒
weixin_34409741的博客
04-25 570
<!DOCTYPE html> <html> <head> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript"> var countdown=60; fu...
获取手机验证码js计时器
bei_fang_du_lang的专栏
12-21 1331
var timeOut; var countdown=60; function settime() { if (countdown == 0) { $('#chkcode').removeAttr("disabled"); userinfoform.chkcode.value="获取验证码"; countdown = 60;
JS写周期性定时器（时间倒计时、获取验证码倒计时）
weixin_43400431的博客
07-18 785
周期性定时器让网页自动运行，例如某bao网页的秒杀价倒计时。 下面要介绍的是时间倒计时和获取验证码的倒计时： （两个功能我写到一个网页里了，其中部分代码都有详细的注解，在这里我就不再赘述） 在这里要提点的是： disabled属性只能适用于button标签 直接上代码！ HTML部分： 没有做样式修饰，因为主要是展现功能呀（不搞那么多花里胡哨的，哈哈哈哈哈） <h1 id="time"></h1> <button id="btn">获取验证码</b
JavaScript_Day_10(验证码、定时器、倒计时)
m0_64954239的博客
12-17 970
对象两种创建方式： var cat = new Object() ; cat.name = '猫'; cat.age = 2 ; cat.say = function () { console.log('喵'); } var cat = { // 键名 ：键值 name : '猫', age : 2 ,
setInterval与clearInterval
qq_42418169的博客
08-09 454
setInterval与clearIntervalsetInterval定义和用法语法返回值实例 setInterval 定义和用法 setInterval()方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。setInterval()方法会不停地调用函数，直到clearInterval() 被调用或窗口被关闭。由setInterval()返回的ID值可用作clearInterval()方法的参数。 语法 setInterval(code,millisec[,"lang"]) 参数 描述
掌握JavaScript定时器：setInterval与setTimeout实战应用
在JavaScript编程中，定时执行函数setInterval和setTimeout是两个常用的工具，它们允许开发者在特定时间间隔或在指定延迟后执行一段代码。本文将详细介绍这两个函数的定义、用法以及相关示例。 首先，setInterval()...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值