验证码重新发送倒计时

1、效果

2、代码

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>验证码重新发送倒计时</title><style>.text{  border: 1px solid #cccccc;border-radius: 10px;height: 42px;line-height: 40px;outline: none;padding: 0 15px;}.button{    border-radius: 10px;height: 42px;line-height: 40px;padding: 0 10px;outline: none;width: 100px;background: #4C8BF5;border: 0;color: #FFFFFF;font-size: 15px;right: 0;top: 0;}</style></head><body><input type="text" class="text" placeholder="请输入验证码"><input type="button" class="button" onclick="settime(this)" value="发送验证码"></body><script type="text/javascript"> var countdown=6; function settime(obj) { if (countdown == 0) {obj.style.backgroundColor='#4C8BF5';obj.removeAttribute("disabled");    obj.value="获取验证码"; countdown = 10; return;} else { obj.style.backgroundColor='#575757';//$(obj).css("background","#575757");obj.setAttribute("disabled", true); obj.value="重新发送(" + countdown + ")"; countdown--; } setTimeout(function() { settime(obj) } ,1000);}</script>
</html>

验证码重新发送倒计时相关推荐

JS实现注册登录发送短信验证码动态显示60S倒计时完整案例
通常在web项目中都会遇到账户注册或者忘记密码时需要发送短信验证码的功能,虽然说这种功能很常见,但是实际开发过程中很多人还会遇到不少坑.笔者经过整理把最近项目中的用到的这个发送短信验证码动态显示60S ...
android 好用的自定义倒计时工具（验证码发送倒计时等等）
可用于短信发送倒计时,请求倒计时等各个地方,使用方便,与组件解耦. import android.os.CountDownTimer; import android.view.View; /*** 倒 ...
免费获取验证码60秒倒计时
免费获取验证码60秒倒计时 <!DOCTYPE html> <html> <head> <script src="http://libs.baidu ...
微信小程序之验证码短信倒计时
最近做的一个项目里有一个收验证码的倒计时需求,mark出来~希望对小伙伴们有帮助 wxml <view class="checkPhone-box"><view ...
vue页面实现短信验证码60秒倒计时
废话不多说,直接上代码. template <div class='single-wrapper fs14'><div class='single-mb'>短信验证</d ...
XX健康:移动端开发-体检预约验证码30秒倒计时短信验证码获取与验证DatePicker日历展示提交预约复杂流程阿里短信工具类
1. 体检预约流程用户可以通过如下操作流程进行体检预约: 在移动端首页点击体检预约,页面跳转到套餐列表页面在套餐列表页面点击要预约的套餐,页面跳转到套餐详情页面在套餐详情页面点击立即预约,页面跳 ...
uni验证码60秒倒计时
uni验证码60秒倒计时其实要实现这个功能原理非常简单,就是setInterval+setTimeout+clearInterval结合使用,首先在data里定义一个变量second,初始值为60, ...
简单实现vue验证码60秒倒计时功能
简单实现vue验证码60秒倒计时功能 <span v-if="codeShow" @click="getPhoneCode">点击获取验证码< ...
通过云片网实现短信以及验证码的发送
最近做的这个项目是一个类似于众筹的网站,众所周知,现在主流的网站都会涉及到注册验证码的发送以及验证,购买商品以及送礼这些都可能会有短信的提醒,那么这些短信都是怎么实现的呢?这个项目中需要实现验证码以及 ...
python发送短信验证码_python发送短信验证码
业务: 手机端点击发送验证码,请求发送到python端,由python调用第三方平台(我们使用的是榛子云短信http://smsow.zhenzikj.com)的短信接口,生成验证码并发送. 代码: ...

验证码重新发送倒计时

验证码重新发送倒计时相关推荐

最新文章

热门文章