验证码60s倒计时前端效果
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>手机短信验证码</title>
<script src="jquery-2.1.4.js"></script>
</head>
<body>
<div>
<div style="vertical-align: middle">
<input id="mobile" type="tel" name="mobile" placeholder="手机号码"/>
<span style="text-align: center;">
<button id="sendmsg">获取验证码</button>
</span>
</div>
</div>
</body>
</html>
<script >
var InterValObj; //timer变量,控制时间
var count = 5; //间隔函数,1秒执行
var curCount;//当前剩余秒数
var code = ""; //验证码
var codeLength = 6;//验证码长度
$(function () {
$('#sendmsg').click(function () {
$.ajax({
type: "post",
// 手机短信验证码发送程序
url: "sendCaptcha.php",
data: "admin=" +"&mobile="+$("#mobile").val() ,
success: function (result) {//通过返回值判断发送状态
// console.log(result);
if(result==0){
curCount = count;
//设置button效果,开始计时
$("#sendmsg").css("background-color", "LightSkyBlue");
$("#sendmsg").attr("disabled", "true");
$("#sendmsg").html("获取" + curCount + "秒");
InterValObj = window.setInterval(SetRemainTime, 1000); //启动计时器,1秒执行一次
// alert("验证码发送成功,请查收!");
}
if(result==1){
alert("手机号不匹配!");
}
},
error:function(result){
console.log('error');
},
dataType: 'json'
})
})
})
function SetRemainTime() {
if (curCount == 0) {
window.clearInterval(InterValObj);//停止计时器
$("#sendmsg").removeAttr("disabled");//启用按钮
$("#sendmsg").css("background-color", "");
$("#sendmsg").html("重发验证码");
code = ""; //清除验证码。如果不清除,过时间后,输入收到的验证码依然有效
}
else {
curCount--;
$("#sendmsg").html("获取" + curCount + "秒");
}
}
</script>
验证码60s倒计时前端效果的更多相关文章
- 6.短信验证码60s倒计时
短信验证码60s倒计时 html: <input type="button" class="btn btn-primary" value="免 ...
- 发送验证码60s倒计时实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- js实现60s倒计时效果
适用于获取验证码等其他场景,下面代码直接粘贴句可以使用 // 60s获取验证码的js与html var timer = null; var count = 60; $('.box>button' ...
- jquery 60s倒计时
前端开发中经常用到的发送按钮倒计时,每次都是重写,挺麻烦的,记录一下,以后直接来复制代码 <!DOCTYPE html> <html> <head> <met ...
- React实战之60s倒计时按钮(发送短信验证按钮)
React实战之60s倒计时按钮——短信验证按钮 导入:(antd组件——Form表单) import { Button, Form, Input } from 'antd'; const FormI ...
- 常用的几个CSS前端效果
做页面需要一定的CSS基本功,虽然现在有很多成熟的框架如bootstrap等,我们轻松的就就可以做出一些页面效果.但是掌握每一个常见效果的写法还是很重要的,下面整理出一些常见的CSS前端效果,让你更轻 ...
- React 60S倒计时
React 60S倒计时 1.设置状态: 2.函数主体: 3.应用: 4..效果图:
- js验证码有效时间倒计时
js验证码有效时间倒计时 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type& ...
- 微信小程序验证码获取倒计时
wxml <button disabled='{{disabled}}' bindtap="goGetCode">{{code}}</button> js ...
随机推荐
- Django rest framwork-CMDB API实战
一.序列化 serializers.py from rest_framework import serializers from web_manage import models class Asse ...
- json字符串与json对象转换
从网上找的几种常用的转换方法,测试结果如下: 1.json字符串——>json对象 /* test 1 */ var str = '{"a":1,"b": ...
- 【译】第八篇 SQL Server代理使用外部程序
本篇文章是SQL Server代理系列的第八篇,详细内容请参考原文 在这一系列的上一篇,学习了如何用SQL Server代理作业活动监视器监控作业活动和查看作业历史记录.在实时监控和管理SQL Ser ...
- D. Makoto and a Blackboard(积性函数+DP)
题目链接:http://codeforces.com/contest/1097/problem/D 题目大意:给你n和k,每一次可以选取n的因子代替n,然后问你k次操作之后,每个因子的期望. 具体思路 ...
- UNIX环境高级编程 第8章 进程控制
本章是UNIX系统中进程控制原语,包括进程创建.执行新程序.进程终止,另外还会对进程的属性加以说明,包括进程ID.实际/有效用户ID. 进程标识 每个进程某一时刻在系统中都是独一无二的,它们之间是用一 ...
- Python的日志记录-logging模块的使用
一.日志 1.1什么是日志 日志是跟踪软件运行时所发生的事件的一种方法,软件开发者在代码中调用日志函数,表明发生了特定的事件,事件由描述性消息描述,同时还包含事件的重要性,重要性也称为级别或严重性. ...
- SpringMVC 返回JSON数据的配置
spring-mvc-config.xml(文件名称请视具体情况而定)配置文件: <!-- 启动Springmvc注解驱动 --> <mvc:annotation-driven> ...
- QUnit 实践一
项目准备启用Qunit, 先来尝试一下. 不说废话,上代码: <!DOCTYPE HTML> <html> <head> <meta http-equiv=& ...
- 决策树和adaboost
前面:好老的东西啊,啊啊啊啊啊啊啊啊啊 来源于统计学习方法: 信息增益: 其中 信息增益率: 基尼指数: 取gini最小的 先剪枝——在构造过程中,当某个节点满足剪枝条件,则直接停止此分支的构造. 后 ...
- 洛谷P2149 Elaxia的路线
传送门啦 分析: 我最开始想的是跑两遍最短路,然后记录一下最短路走了哪些边(如果有两条最短路就选经过边多的),打上标记.两边之后找两次都标记的边有多少就行了. 但...我并没有实现出来. 最后让我们看 ...