js实现60s倒计时效果

适用于获取验证码等其他场景,下面代码直接粘贴句可以使用

// 60s获取验证码的js与html
var timer = null;
var count = 60;
$(‘.box>button‘).click(function() {
var codeText = $(‘.code‘).text();
if (codeText == ‘获取验证码‘) {
timer = setInterval(function(){
count--;
$(‘.code‘).text(count+‘后获取验证码‘);
if (count <=0) {
clearInterval(timer);
$(‘.code‘).text(‘获取验证码‘);
}
},1000);
}
});
html:
<!-- 60s倒计时 -->
<div class=‘box‘>
<button class=‘code‘>获取验证码</button>
</div>

  

原文地址:https://www.cnblogs.com/lvxisha/p/10651590.html

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

js实现60s倒计时效果的相关文章

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实现60s倒计时(亲测有效),及span标签如何使用和禁用onclick事件

效果如下图:点击按钮出现60秒倒计时,60s内按钮不可用,倒计时到了时间方可再次点击获取. 另外还有一个知识点,只有input 及button这样的表单元素有disbale属性,如何设置是否可用属性的方法一般用$("#id").attr('disbaled','true')及$("#id").prop('disbaled','false'),对span img这样的没有disbale的属性,这种方法就不起作用了,此时可用$("#id").setA

js实现验证码倒计时效果

<input type="button" id="btn" value="获取验证码" onclick="getrand(this);"/> 一.已上是点击获取验证码的点击区. 二.以下是js代码 var countdown = 60; function getrand(obj) { if(countdown == 60){ $.post("/Home/Index/randNum", funct

js之网页倒计时效果

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <script type="text/javascript"> window.onload=function(){ //倒计时函数 function djs(){ var fur_time=new Date(2017,5

Js写的一个倒计时效果实例

我们经常会看到某些网站在注册的时候喜欢搞个按钮倒计时的效果,就是多少秒之后注册这个按钮才可以点击,其目的就是强迫你去看他的注册注意事项,这是一个很实用的效果:另外当我们进行在线考试的时候也必定会碰到答题倒计时的效果,这种倒计时效果是如何实现的呢?下面我们就用Js来实现一个倒计时效果,具体代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf

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

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

js实现倒计时效果

<!DOCTYPE html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>倒计时效果</title><link rel="stylesheet" href="css/demo.css" /></head> <body&g

[jQuery编程挑战]006 生成一个倒计时效果

<!DOCTYPE html> <html lang="zh"> <head> <meta charset="utf-8"/> <title>生成一个倒计时效果</title> <style type="text/css"> body{ margin:0; padding:0; background: orange; width: 100%; height: 10

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

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