首页 web前端 js教程 单击按钮发送验证码并出现倒计时实现方法

单击按钮发送验证码并出现倒计时实现方法

Jan 22, 2018 pm 01:13 PM
出现 发送 验证

有时候我们在发送验证码的时候,总会有倒计时功能,下面小编就为大家带来一篇单击按钮发送验证码,出现倒计时的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧,希望能帮助到大家。

实例如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<script src="jquery.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
 
var InterValObj; //timer变量,控制时间 
var count = 30; //间隔函数,1秒执行 
var curCount;//当前剩余秒数 
 
function sendMessage() { 
  curCount = count; 
  //设置button效果,开始计时 
   $("#btnSendCode").attr("disabled", "true"); 
   $("#btnSendCode").val(curCount + "秒后可重新发送"); 
   InterValObj = window.setInterval(SetRemainTime, 1000); //启动计时器,1秒执行一次 
    
  //请求后台发送验证码 TODO 
 
} 
 
//timer处理函数 
function SetRemainTime() { 
      if (curCount == 0) {         
        window.clearInterval(InterValObj);//停止计时器 
        $("#btnSendCode").removeAttr("disabled");//启用按钮 
        $("#btnSendCode").val("重新发送验证码"); 
      } 
      else { 
        curCount--; 
        $("#btnSendCode").val(curCount + "秒后可重新发送"); 
      } 
    } 
</script> 
</head> 
<body> 
    <input id="btnSendCode" type="button" value="发送验证码" onclick="sendMessage()" /></p> 
</body> 
</html>
登录后复制

大家学会了吗?赶紧动手尝试一下吧。

相关推荐:

js通过Date对象实现倒计时动画效果实例分享

手机注册发送验证码倒计时简单实现方法

jQuery实现发送短信倒计时功能

以上是单击按钮发送验证码并出现倒计时实现方法的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解锁Myrise中的所有内容
1 个月前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

如何在PDF中验证签名 如何在PDF中验证签名 Feb 18, 2024 pm 05:33 PM

我们通常接收到政府或其他机构发送的PDF文件,有些文件带有数字签名。验证签名后,我们会看到SignatureValid消息和一个绿色勾号。如果签名未验证,会显示有效性未知。验证签名很重要,下面看看如何在PDF中进行验证。如何在PDF中验证签名验证PDF格式的签名使其更可信,文档更容易被接受。您可以通过以下方式验证PDF文档中的签名。在AdobeReader中打开PDF右键单击签名,然后选择显示签名属性单击显示签名者证书按钮从“信任”选项卡将签名添加到“受信任的证书”列表中单击验证签名以完成验证让

微信好友辅助验证进行解封的详细方法 微信好友辅助验证进行解封的详细方法 Mar 25, 2024 pm 01:26 PM

1、打开微信进入后,点击搜索图标,输入微信团队,点击下方的服务进入。2、进入后,点击左下方的自助工具的选项。3、点击后,在上方的选项内,点击解封/申诉辅助验证的选项。

抖音上如何发给别人文件?上发给别人文件怎么删除? 抖音上如何发给别人文件?上发给别人文件怎么删除? Mar 22, 2024 am 08:30 AM

在抖音上,用户不仅可以分享自己的生活点滴和才艺,还可以和其他用户互动交流。在这个过程中,有时候我们需要向其他用户发送文件,比如图片、视频等。那么,在抖音上如何发给别人文件呢?一、抖音上如何发给别人文件?1.打开抖音,进入你想要发送文件的聊天界面。2.点击聊天界面中的“+”号,选择“文件”。3.在文件选项中,你可以选择发送图片、视频、音频等文件。选择你想要发送的文件后,点击“发送”。4.等待对方接受你的文件,一旦对方接受,文件就会传输成功。二、抖音上发给别人文件怎么删除?1.打开抖音,进入你发送文

WhatsApp技巧:发送高清照片和视频的方法 WhatsApp技巧:发送高清照片和视频的方法 Sep 10, 2023 am 10:13 AM

WhatsApp推出了一个新选项,允许用户通过消息传递平台以高分辨率发送照片和视频。继续阅读以了解它是如何完成的。WhatsApp发布了一个更新,允许iPhone和Android用户以高分辨率发送照片和视频,最终解决了该服务的低质量媒体共享限制。该选项称为“高清质量”,意味着用户可以以最小的压缩发送更清晰的照片和视频。例如,在iPhone上捕获的图像现在可以以3024x4032分辨率发送,而不是以前的最大920x1280分辨率,而视频可以以1280×718分辨率发送,而不是848×476分辨率。

如何使用正则表达式验证IFSC代码? 如何使用正则表达式验证IFSC代码? Aug 26, 2023 pm 10:17 PM

印度金融系统代码是缩写。参与电子资金转移系统的印度银行分支机构由一个特殊的11位字符代码进行标识。印度储备银行在互联网交易中使用此代码在银行之间转移资金。IFSC代码分为两个部分。银行由前四个字符进行标识,而分支机构由最后六个字符进行标识。NEFT(全国电子资金转移)、RTGS(实时毛额结算)和IMPS(即时支付服务)是一些需要IFSC代码的电子交易。Method使用正则表达式验证IFSC代码的一些常见方法有:检查长度是否正确。检查前四个字符。Checkthefifthcharacter.Che

PHP 8 新特性:增加了验证和签名 PHP 8 新特性:增加了验证和签名 Mar 27, 2024 am 08:21 AM

PHP8是PHP的最新版本,为程序员带来了更多的便利和功能。这个版本特别关注安全性和性能,其中一个值得注意的新特性是增加了验证和签名功能。在本文中,我们将深入了解这些新的功能及其用途。验证和签名是计算机科学中非常重要的安全概念。它们通常用于确保传输的数据是完整和真实的。在处理在线交易和敏感信息时,验证和签名变得尤为重要,因为如果有人能够篡改数据,可能会对

golang中如何验证输入是否为大写字母 golang中如何验证输入是否为大写字母 Jun 24, 2023 am 09:06 AM

Golang是一门高性能、现代化的编程语言,在日常开发中经常涉及到字符串的处理。其中,验证输入是否为大写字母是一个常见的需求。本文将介绍在Golang中如何验证输入是否为大写字母。方法一:使用unicode包Golang中的unicode包提供了一系列函数来判断字符的编码类型。对于大写字母,其对应的编码范围为65-90(十进制),因此我们可以使用unicod

golang中如何验证输入是否为全角字符 golang中如何验证输入是否为全角字符 Jun 25, 2023 pm 02:03 PM

在golang中,验证输入是否为全角字符需要用到Unicode编码和rune类型。Unicode编码是一种将字符集中的每个字符分配一个唯一的数字码位的字符编码标准,其中包含了全角字符和半角字符。而rune类型是golang中用于表示Unicode字符的类型。第一步,需要将输入转换为rune类型的切片。这可以通过使用golang的[]rune类型进行转换,例如

See all articles