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. [原创翻译]Protocol Buffer Basics: C#

    Protocol Buffer 基础知识:c#    原文地址:https://developers.google.com/protocol-buffers/docs/csharptutorial   ...

  2. 基于redis和docker的guestbook留言簿案例

    在正式介绍之前,大家有必要先理解Kubernetes几个核心概念及其承担的功能.以下为Kubernetes的架构设计图: 1. Pods在Kubernetes系统中,调度的最小颗粒不是单纯的容器,而是 ...

  3. linux基础知识与技能1

    1.隐藏文件与非隐藏文件Linux中:linux中隐藏文件特点是文件名以.开头,跟文件属性无关.在linux中查看隐藏文件用ls -a命令(普通显示ls)2.相对路径与绝对路径什么是路径:路径是用来标 ...

  4. c# 备份数据库恢复数据库

    /// <summary> /// 对数据库的备份和恢复操作,Sql语句实现 /// </summary> /// <param name="cmdText&q ...

  5. mui popover 自定义 弹出位置 显示 隐藏

    mui popover 一.要显示.隐藏弹出菜单插件,mui推荐使用锚点方式. 1.页面顶部导航栏.底部工具栏固定位置 <header class="mui-bar mui-bar-n ...

  6. [C#] 使用NPOI将Datatable保存到Excel

    using (table) { IWorkbook workbook = new HSSFWorkbook(); ISheet sheet = workbook.CreateSheet(); IRow ...

  7. less学习笔记

    less is more , than css less使用到的编译工具: koala less使用的软件: sublime text(推荐使用) 在less 中注释使用的是//     ( /**/ ...

  8. CLI:如何使用Go开发命令行

    CLI或者"command line interface"是用户在命令行下交互的程序.由于通过将程序编译到一个静态文件中来减少依赖,一次Go特别适合开发CLI程序.如果你编写过安装 ...

  9. centos7下 安装mysql

    wget http://dev.mysql.com/get/mysql-community-release-el7-5.noarch.rpm rpm -ivh mysql-community-rele ...

  10. 搭建haproxy

    1:下载haproxy wget http://haproxy.1wt.eu/download/1.3/src/haproxy-1.3.20.tar.gz2:解压,编译,安装 tar zxf hapr ...