jQuery实现发送验证码并60秒倒计时功能

本文给大家分享一段js代码关于实现验证码功能并在60秒后倒计时功能。废话不多说了，具体代码如下所示：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" id="viewport" name="viewport">
<title></title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
var countdown=60;
function settime(obj) {
if (countdown == 0) {
obj.removeAttribute("disabled");
obj.value="免费获取验证码";
countdown = 60;
return;
} else {
obj.setAttribute("disabled", true);
obj.value="重新发送(" + countdown + ")";
countdown--;
}
setTimeout(function() {
settime(obj) }
,1000)
}
</script>
<body>
<input type="button" id="btn" value="免费获取验证码" onclick="settime(this)" />
</body>
</html>

以上所述是小编给大家介绍的jQuery实现发送验证码并60秒倒计时功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • jQuery简单倒计时效果完整示例

    jQuery简单倒计时效果完整示例

    本文实例讲述了jQuery简单倒计时效果.分享给大家供大家参考,具体如下: 前天做了一个活动项目,其中有一块需要做倒计时的效果,由于需求比较简单,所以也就没用网上各种倒计时的插件.今天抽空整理出来,分享给大家. html 代码如下: <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"/> <title>倒计时效果</titl

  • jquery实现的判断倒计时是否结束代码

    本章节介绍一段代码实例,此代码能够判断当前日期是否已经倒计时结束,此代码中并没有倒计时效果,只是判断是否倒计时完成,比如购物网站优惠期限等,虽然实际应用中,很少会出现类似的代码,不过希望能够给浏览者带来一定的启示作用. 代码如下: function done(){ var str=$('#end').text(); var out=str.match(/\d+/g); console.log(out); var h=parseInt(out[0]),m=parseInt(out[1]),s=pa

  • 基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭)

    相关阅读: 基于JS实现发送短信验证码后的倒计时功能(无视页面刷新,页面关闭不进行倒计时功能) 今天测试提了一个bug,发送短信倒计时功能,要求关闭页面也要进行倒计时.这想到了,当年我参与的周杰伦演唱会的先付先抢功能.与之类似,只不过,那个项目的时间都是服务器时间,本人目前有点偷懒,就用客户端的时间了. 一下是完整的代码,只不过在客户端的效率不是很好. <!doctype html> <html lang="en"> <head> <meta

  • jQuery实现的倒计时效果实例小结

    本文实例总结了jQuery实现的倒计时效果.分享给大家供大家参考,具体如下: <!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

  • jQuery模拟爆炸倒计时功能实例代码

     HTML部分  <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>炸弹倒计时</title> <style type="text/css"> .content { width: 200px; margin:0 auto; } .content .img1 { /*添加炸弹动

  • jQuery实现简单倒计时功能的方法

    jQuery实现简单倒计时功能的方法

    本文实例讲述了jQuery实现简单倒计时功能的方法.分享给大家供大家参考,具体如下: 1.效果图如下: 2.html代码: <div class="timeFix"> <div class="daojishi" id="09/04/2016 00:00:00"> <span class="timeh"></span> <span class="timem"

  • jQuery短信验证倒计时功能实现方法详解

    本文实例讲述了jQuery短信验证倒计时功能实现方法.分享给大家供大家参考,具体如下: <!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" > &l

  • 基于jQuery倒计时插件实现团购秒杀效果

    倒计时一般是用来表示未来某一时刻距现在时刻还剩多少时间.倒计时在WEB上应用非常广泛,如考试系统倒计时,团购网站中的优惠活动倒计时等等.今天,我们来使用jQuery倒计时超级实现团购秒杀效果,感兴趣的朋友一起学习吧! 1.1 帮助文档关键字 倒计时 秒杀 timer 1.2. 使用场景 这样的倒计时在购物网站中会经常使用到,比如秒杀,限时抢购,确认收货倒计时. 这个功能并不难实现,就是利用js的定时执行,搜了一下网上的代码,五花八门,都是一个方法,没有做到封装,方便使用,所以写了一个插件,方便项

  • jQuery实现发送验证码并60秒倒计时功能

    本文给大家分享一段js代码关于实现验证码功能并在60秒后倒计时功能.废话不多说了,具体代码如下所示: <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta content="width=device-width,initial-scale=1.0,ma

  • Vue验证码60秒倒计时功能简单实例代码

    template <template> <div class='login'> <div class="loginHeader"> <input type="tel" class="loginBtn border-bottom" placeholder="请输入手机号" /> <input type="tel" class="codeBtn&q

  • AngularJS 验证码60秒倒计时功能的实现

    最近在做AngularJS 项目,这是写的一个60秒倒计时,  angularjs 与jq不同, 不是使用dom节点操作,而是数据操作,写倒计时,最好是使用$timeout与$interval ,不要使用settimeout与setinterval .$timeout与$interval 可使绑定数据直接更新. html <a href="javascript:" rel="external nofollow" ng-click="sendphone

  • 简单实现vue验证码60秒倒计时功能

    本文实例为大家分享了vue验证码倒计时60秒的具体代码,供大家参考,具体内容如下 html <span v-show="show" @click="getCode">获取验证码</span> <span v-show="!show" class="count">{{count}} s</span> js data(){ return { show: true, count: ''

  • Jquery插件实现点击获取验证码后60秒内禁止重新获取

    Jquery插件实现点击获取验证码后60秒内禁止重新获取

    通过jquery.cookie.js插件可以快速实现"点击获取验证码后60秒内禁止重新获取(防刷新)"的功能 效果图: 先到官网(http://plugins.jquery.com/cookie/)下载cookie插件,放到相应文件夹,代码如下: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv=&qu

  • js代码实现点击按钮出现60秒倒计时

    js代码实现点击按钮出现60秒倒计时

    比如,一些网站上的手机短信认证的功能,有类似实现点击按钮后,倒计时60秒才能再次点击发送的效果. 此例子用Javascript实现点击按钮后,倒计时60秒才能再次点击发送验证码的功能. 例子1:Javascript 实现 点击按钮 倒计时60秒方可再次点击发送的效果 <input type="button" id="btn" value="免费获取验证码" /> <script type="text/javascrip

  • 点击按钮出现60秒倒计时的简单js代码(推荐)

    点击按钮出现60秒倒计时的简单js代码(推荐) <!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> <meta h

  • jQuery实现发送验证码控制按钮禁用功能

    jQuery实现发送验证码控制按钮禁用功能

    需求效果:点击发送验证码之后,按钮禁用,5秒之后取消禁用. 效果图如下: 点击发送之后禁用按钮 5秒之后取消禁用,重新发送 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sca

  • Swift免费短信验证码实现及动态倒计时功能

    Swift免费短信验证码实现及动态倒计时功能

    今天给大家带来一个简单的免费短信验证码实现demo,采用mob的短信验证码SDK,到目前为止还是免费的,只需要简单的注册-->添加个人应用-->获取appkey集apSecret 即可实现. 具体怎么申请,添加个人应用这里就不累赘了,相信能搜索到本文的必然有能力完成上面的操作. 1.下载mob的免费短信验证SDK,解压后复制SMS_SDK到你的工程,因为此SDK采用OC编写的,在与Swift结合时,需要添加桥接文件,具体操作如下: 右键你的Swift工程,新建一个OC文件,名字随便起,这时会弹

  • vue中手机号,邮箱正则验证以及60s发送验证码的实例

    今天写了一个简单的验证,本来前面用的组件,但是感觉写的组件在此项目不是很好用,由于用到的地方比较少,所以直接写在了页面中. <div> <p class="fl"> <input name="phone" type="number" placeholder="手机号" v-model="phone"/> <button type="button"

随机推荐