js实现验证码倒计时效果

<input type="button" id="btn" value="获取验证码" onclick="getrand(this);"/>

一、已上是点击获取验证码的点击区。

二、以下是js代码

var countdown = 60;

function getrand(obj) {

if(countdown == 60){

$.post("/Home/Index/randNum",

function (data) {

document.getElementById(‘sjs‘).value = data;

} )

}

//以上$.post是为了从后台得到一个随机数进行验证,可以忽略,不影响倒计时60s效果,而且还完美的只从后台生成了一个随机数。

if (countdown == 0) {

obj.removeAttribute("disabled");

obj.value = "获取验证码";

countdown = 60;

return;

} else

{ obj.setAttribute("disabled", true);

obj.value = "重新发送(" + countdown + ")";

countdown--;

}

setTimeout(

function() { getrand(obj); },

1000)

}

时间: 2024-07-30 18:55:26

js实现验证码倒计时效果的相关文章

jQuery实现的手机发送验证码倒计时效果代码分享

这是一款基于jquery实现的手机发送验证码倒计时效果代码,可实现实时显示秒数倒计时的功能,还可实现对手机号码格式验证的功能,是一款常用的网站注册发送手机验证码特效代码. 效果描述:注册一个网站,当需要发送验证码到手机上的时候,我们经常碰到这样的效果:首先检测手机是否符合1开头,11位数字的格式:若不符合,则提示错误信息并返回false:否则提交给后台,后台确定接收后返回一个值,发送按钮变为灰色并倒计时. 运行效果: 年利率高达14.4% 上海投融理财,20万起投,年化收益14.4% 房产抵押,

Andorid实现点击获取验证码倒计时效果

这篇文章主要介绍了Andorid实现点击获取验证码倒计时效果,这种效果大家经常遇到,想知道如何实现的,请阅读本文 我们在开发中经常用到倒计时的功能,比如发送验证码后,倒计时60s再进行验证码的获取,为了方便以后使用,这里做个记录,讲讲倒计时器的实现. 1.先进行倒计时工具类的封装 1 public class CountDownTimerUtils extends CountDownTimer { 2 private TextView mTextView; 3 4 /** 5 * @param

js获取验证码 秒表效果(原创)

<script src="http://code.jquery.com/jquery-latest.js"></script> <input type="button" onclick="setclock($(this),10);" value="获取验证码"> <script> function setclock(dom,value,text) { value=argument

安卓发送验证码倒计时效果和自动获取验证码并填充到输入框

在注册,实名认证.修改手机号码的,我们都会用发送验证码的功能,在这里经常就会涉及到2个效果, 第一个:发送验证码倒计时效果: 第二个:自动获取接收到的短信,并且填充验证码. 先来说倒计时效果: 其实很简单,就是一个计时器.每秒刷新一次,倒计时完了.就可以重新点击获取了. <pre name="code" class="java">btn_getYzm.setEnabled(false); btn_getYzm.setBackgroundResource(

js/jq实现获取手机验证码倒计时效果

众所周知在前段的工作中注册信息或获取当前手机号信息等需求,我们基本上都要涉及到手机号验证码,在网络上搜索的案例杂乱无章,用的时候全是坑,真心不想用了,然后自己写了一个获取手机验证码的倒计时效果.有需求的伙伴们可以看看怎么实现的. 如何获取手机验证码? 小月不知道大家是利用什么平台去获取验证码的,但是告诉大家我是在哪个平台获取的. LeanCloud :https://leancloud.cn/ 文档:https://leancloud.cn/docs/sms_guide-js.html 在这个平

js 发送验证码倒计时

<input  type="text"   name=''  id="btn"> //发送验证码倒计时var wait=30; function time(o) { if (wait == 0) { o.removeAttribute("disabled"); o.value="免费获取验证码"; wait = 30; }else{ o.setAttribute("disabled", true

React中发送验证码 倒计时效果组件编写

(1)可以通过使用"react-timer-mixin"插件实现倒计时效果,原理同下面的思路一样此处不在详细解说 (2)自己用原生定时器方法实现 1 import React,{Component} from 'react'; 2 import {Button } from 'antd-mobile'; 3 import PropTypes from 'prop-types'; 4 class SendVerifyCode extends Component{ 5 constructo

js实现60s倒计时效果用于获取短信验证码使用

有时候我们需要通过点击按钮向用户发送短信,需要一个计时效果. <button id="msg" type="button" style="width:120px; height:30px" >获取短信验证</button> <script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> <

js 短信验证码倒计时效果

<div class="input-group" id="login_do"> <input type="num" class="form-control inputD" id="telCode" placeholder="短信验证码"/> <span class="input-group-addon input-span-black"