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. python 列表 总结

    在python里创建列表和字典非常简单,这里总结一下它们的常用方法 1.创建列表 myArry = ["one", "two", "three&quo ...

  2. 一道有意思的笔试题引发的对于new操作符的思考

    楼主比较喜欢看一些很短但很有意思的题目,无意间又瞥到了一题,大家不妨可以一试.(原题链接猛戳这里) function Fn1() { this.name = 'peter'; return { nam ...

  3. 吉特仓库管理系统-.NET打印问题总结

    在仓储系统的是使用过程中避免不了的是打印单据,仓库系统中包含很多单据:入库单,出库单,盘点单,调拨单,签收单等等,而且还附带着很多的条码标签的打印.本文在此记录一下一个简单的打印问题处理方式.处理问题 ...

  4. HashMap遍历的两种方式

    第一种: Map map = new HashMap(); Iterator iter = map.entrySet().iterator(); while (iter.hasNext()) {    ...

  5. Android Studio 工具插件

    1.Android Studio 翻译插件,可以将英文翻译为中文. https://github.com/Skykai521/ECTranslation 2.Android Studio之Androi ...

  6. 【OpenJudge 191】【POJ 1189】钉子和小球

    http://noi.openjudge.cn/ch0405/191/ http://poj.org/problem?id=1189 一开始忘了\(2^{50}\)没超long long差点写高精度Q ...

  7. Mysql 命令大全

    1.连接Mysql 格式: mysql -h主机地址 -u用户名 -p用户密码1.连接到本机上的MYSQL.首先打开DOS窗口,然后进入目录mysql\bin,再键入命令mysql -u root - ...

  8. c# 程序设计教程笔记

    值类型:[简单类型[整数类型(sbyte,byte,short,ushort,int uint,long....),字符类型),布尔类型,实数类型],结构类型, 枚举类型]. 引用类型:[类,委托,数 ...

  9. 使用Pip安装distribute、nose、virtualenv

    1 安装distribute sudo pip install distribute 2 安装nose sudo pip install nose 3 安装virtualenv sudo pip in ...

  10. WinForm------GridControl添加底部合计框

    1.在GridView属性中找到"OptionsView" => "ShowFooter" = true 2.打开编辑器,如图 . 3.获取统计数据(注意 ...