JS实现点击发送验证码 xx秒后重新发送功能

 更新时间:2019年07月30日 10:43:22   作者:ymmt  
在一些注册类的网站,经常遇到这样的需求,点击发送验证码,xx秒后重新发送,这样的功能怎么实现呢,接下来通过本文给大家分享js点击发送验证码 xx秒后重新发送功能,需要的朋友参考下吧

用于一些注册类的场景,点击发送验证码,xx秒后重新发送。

利用 setTimeout 方法,xx秒后执行指定的方法,修改button的属性值,disabled为true时为灰色,不可点击。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--<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>
<label>
  <input type="text" name="textfield">
</label>
<input type="button" id="btn" value="获取验证码" onclick="settime(this)" /> 
</body>
</html>

总结

以上所述是小编给大家介绍的JS实现点击发送验证码 xx秒后重新发送功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

相关文章

  • 深入分析javascript中console命令

    深入分析javascript中console命令

    console对象是JavaScript的原生对象,它有点像Unix系统的标准输出stdout和标准错误stderr,可以输出各种信息用来调试程序,而且还提供了很多额外的方法,供开发者调用。它的常见用途有两个。显示网页代码运行时的错误信息。提供了一个命令行接口,用来与网页代码互动。
    2016-08-08
  • js字母大小写转换实现方法总结

    js字母大小写转换实现方法总结

    本文是对js中字母大小写转换的实现方法进行了总结介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2013-11-11
  • 详解javascript实现自定义事件

    详解javascript实现自定义事件

    这篇文章主要为大家介绍了javascript实现自定义事件的方法,自定义事件,顾名思义,就是自己定义事件类型,自己定义事件处理函数,javascript如何实现自定义事件,需要了解的朋友可以参考下
    2016-01-01
  • 如何解决js函数防抖、节流出现的问题

    如何解决js函数防抖、节流出现的问题

    这篇文章主要介绍了如何解决js函数防抖、节流出现的问题。SyntheticEvent对象是通过合并得到的。 这意味着在事件回调被调用后,SyntheticEvent 对象将被重用并且所有属性都将被取消。 因此,您无法以异步方式访问该事件。,需要的朋友可以参考下
    2019-06-06
  • 解析Javascript小括号“()”的多义性

    解析Javascript小括号“()”的多义性

    这篇文章主要介绍了Javascript小括号“()”的多义性。需要的朋友可以过来参考下,希望对大家有所帮助
    2013-12-12
  • 纯js实现div内图片自适应大小(已测试,兼容火狐)

    纯js实现div内图片自适应大小(已测试,兼容火狐)

    纯js实现在img图片大小未知,div大小未知的情况下,让图片自适应大小,需要的朋友可以参考下
    2014-06-06
  • Webpack打包详细流程及代码

    Webpack打包详细流程及代码

    这篇文章主要给大家介绍了关于Webpack打包详细流程及代码的相关资料,Webpack是一款非常流行的打包工具,它的主要作用是将项目中的各个模块打包成静态资源,以便于在浏览器中加载和运行,需要的朋友可以参考下
    2024-01-01
  • 关于javascript获取内联样式与嵌入式样式的实例

    关于javascript获取内联样式与嵌入式样式的实例

    这篇文章主要介绍了关于javascript获取内联样式与嵌入式样式的实例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • javaScript事件学习小结(四)event的公共成员(属性和方法)

    javaScript事件学习小结(四)event的公共成员(属性和方法)

    这篇文章主要介绍了javaScript事件学习小结(四)event的公共成员(属性和方法)的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-06-06
  • 解决Layui中templet中a的onclick参数传递的问题

    解决Layui中templet中a的onclick参数传递的问题

    今天小编就为大家分享一篇解决Layui中templet中a的onclick参数传递的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09

最新评论