1. 代码如下：

<html>

<head>

<meta charset="utf-8">

<title></title>

<script src="jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">

/*-------------------------------------------*/

var InterValObj; //timer变量，控制时间

var count = ; //间隔函数，1秒执行

var curCount;//当前剩余秒数

var code = ""; //验证码

var codeLength = ;//验证码长度

function sendMessage() {

    curCount = count;

    var phone=$("#phone").val();//手机号码

    if(phone != ""){

        //产生验证码

        for (var i = ; i < codeLength; i++) {

            code += parseInt(Math.random() * ).toString();

        }

        //设置button效果，开始计时

        $("#btnSendCode").attr("disabled", "true");

        $("#btnSendCode").val("请在" + curCount + "秒内输入验证码");

        InterValObj = window.setInterval(SetRemainTime, ); //启动计时器，1秒执行一次

    //向后台发送处理数据

        $.ajax({

            type: "POST", //用POST方式传输

            dataType: "text", //数据格式:JSON

            url: 'Login.ashx', //目标地址

            data: "phone=" + phone + "&code=" + code,

            error: function (XMLHttpRequest, textStatus, errorThrown) { },

            success: function (msg){ }

        });

    }else{

        alert("手机号码不能为空！");

    }

}

//timer处理函数

function SetRemainTime() {

    if (curCount == ) {

        window.clearInterval(InterValObj);//停止计时器

        $("#btnSendCode").removeAttr("disabled");//启用按钮

        $("#btnSendCode").val("重新发送验证码");

        code = ""; //清除验证码。如果不清除，过时间后，输入收到的验证码依然有效

    }

    else {

        curCount--;

        $("#btnSendCode").val("请在" + curCount + "秒内输入验证码");

    }

}

</script>

</head>

<body>

<form>

    <div>

        <font color="red">*</font>手机号码：

    </div>

    <div>

        <input type="text" id="phone" name="phone"/>

    </div>

    <div>

        <font color="red">*</font>验证码：

    </div>

    <div>

        <input type="text" id="checkCode" name="checkCode" size=""/>

        <input id="btnSendCode" type="button" value="发送验证码" onclick="sendMessage()" />

    </div>

    <div>

        <input type="submit" value="登陆"/>

    </div>

</form>

</body>

</html>

前端 js 发送验证码的更多相关文章

  1. js 发送验证码倒计时

    首先写一个按钮: <input type="button" id="btn" value="免费获取验证码" onclick=&quo ...

  2. JS发送验证码；并设置cookie

    Tool.send_code = function(obj) { var isCheck = true, form = $('#editInfo_Form'); var mobile = form.f ...

  3. js发送验证码（倒计时）

    需求:在用户点击获取验证码后60s内不能再次获取 代码 //倒计时60秒 var countdown=60; //显示获取验证码倒计时的文本标签 var _generate_code =$(" ...

  4. 【积累】发送验证码按钮倒计时js

    注册的时候要发送验证码,就上网研究了一下,写了一个简单点的... jsp页面: <input type="button" id="testbtn" val ...

  5. js&jq 发送验证码倒计时

    <input  type="text"   name=''  id="btn"> //发送验证码倒计时var wait=30; function t ...

  6. 腾讯云短信服务+Node.js给手机发送验证码

    最近公司需要些一个登陆验证和修改密码验证,需要用到验证码,我用Node.js写了一个给手机发验证码的代码,下面实现的功能有:生产验证码,(计时器)验证码失效时间,给手机发送短信. 首先看官方文档,在给 ...

  7. js实现发送验证码倒计时按钮

    在写注册页面时,有时候需要发送注册邮件来获取验证码,但是为了防止多次重复发送邮件, 必须让按钮隔一段时间后才能再次使用. 代码如下: <html> <head> <met ...

  8. 原生js实现发送验证码

    var form = { myfun:function(){ var el = form.config().el; var button = form.config().button; var tim ...

  9. js实现发送验证码倒计时效果

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. 微信快速开发框架（八）-- V2.3--增加语音识别及网页获取用户信息，代码已更新至Github

    不知不觉,版本以每周更新一次的脚步进行着,接下来应该是重构我的代码及框架的结构,有朋友反应代码有点乱,确实如此,当时写的时候只是按照订阅号来写的,后来才慢慢增加到支持API接口.目前还在开发第三方微信 ...

  2. 利用CSS计数函数counter()实现计数

    要实现li列表计数比较简单,直接设置list-style-type即可,但是要实现非li列表计数该怎么办呢,counter()可以轻松实现 body{counter-reset:section 0 s ...

  3. redshift 調節螢幕色溫 保護眼睛

    // install redshift sudo apt-get install redshift // 調節 5000K 色溫 redshift -O 5000 // reset 色溫 redshi ...

  4. Freemarker判断是否为空

    1.判断对象是否为空 freemarker中显示某对象使用${name}. 但如果name为null,freemarker就会报错.如果需要判断对象是否为空: <#if name??> - ...

  5. Angular自定义指令（directive）

    angular自定义指令,意我们可以通过angula自己定义指令,来实现我们的特殊要求,为所欲为,一支穿云箭,千军万马来相见 多少年的老规矩了,先看代码: <!DOCTYPE html> ...

  6. Cannot initialize Cluster. Please check your configuration for mapreduce.framework.name and the co

    log4j:WARN No appenders could be found for logger (org.apache.hadoop.metrics2.lib.MutableMetricsFact ...

  7. bzoj 1066 蜥蜴

    最大流. 建图:首先将每根柱子拆成两个点. 每根柱子的入点向出点连一条容量为柱子高度的边. 每根柱子的出点向可以到达的柱子的入点连一条容量为正无穷的边. 源点向每根初始有蜥蜴的柱子的入点连一条容量为一 ...

  8. MYSQL之基本操作

    数据库操作 一.查看所有的数据库 show databases; 二.创建数据库 create database userinfo; 说明: 创建了一个名为userinfo的数据库 三.使用数据库 u ...

  9. Java 集合类详解

    集合类说明及区别 Collection ├List │├LinkedList │├ArrayList │└Vector │ └Stack └Set Map ├Hashtable ├HashMap └W ...

  10. poj1006Biorhythms(同余定理)

    转自:http://blog.csdn.net/dongfengkuayue/article/details/6461298 本文转自head for better博客,版权归其所有,代码系本人自己编 ...