智软工作室主要是为宁波公司提供宁波网站建设,宁波网站制作,宁波做网站公司,宁波外贸网站建设公司,宁波网站优化等项目,以优质的服务,优惠的价格,深的客户信赖。相信有你的加入我们的明天会更有动力!期待与你合作!
  • 宁波智软设计工作室,打造宁波网站制作工作室顶级品牌
  • 智软拥有专业的设计团队
  • 多年网站建设团队为你服务
  • 智软期待与你合作
  • 我们的技能
  • 我们掌握的技能有:dreamweaver,flash,photoshop
  • 宁波高端网站建设服务公司
    2014已经悄然到来,在新的一年我们恭贺所有客户事业蒸蒸日上,同事庆祝智软设计工作室成立5周年,在5周年为众多客户提供了保质量的网站设计与网站制作。 我们在新的一年质量与服务将会更加进一步为更多的客户带来高端的网站设计与服务!期待与你合作
  • 企业网站制作建设原因与服务介绍

    智软设计工作室多年为宁波企业网站制作建设服务一直以来我们以最优惠价格,最优质的质量,最突出的设计!得到了客户的一致认可,我们的服务包括:宁波网站设计,宁波网站建设,宁波网站制作,宁波网站优化,宁波英文网站制作我们会以优质的服务,最低的价格来报答客户!

  • 点击链接网站优化推广介绍

    点击连接网站优化推广-对企业的网站优化和网站推广--对企业的重要性-点击进行详细了解

  • 2014开幕,宁波网站设计服务全面优惠.

    2014开幕,宁波智软设计为宁波企业提供更加优秀的设计和实惠的价格

  • 链接到网站案例展示平台
    智软设计工作为宁波客户网站设计案例展示平台-案例均为定期更新,让新老客户更好的看到我们做的案例,点击查看我们做的网站案例吧!
  • 我们宁波网络公司提供网站一站式解决方案
    智软(宁波网络公司)帮你轻松解决网络问题,网站一站式解决方案
你当前的位置:智软工作室 > 营销与网络 >

javascript发送短信验证码代码

2015-11-17 10:47

本文首先分析手机发送验证码的原理,再对javascript发送短信验证码予以实现,具体思路如下:
实现点击“发送验证码”按钮后,按钮依次显示为“59秒后重试”、“58秒后重试”…直至倒计时至0秒时再恢复显示为“发送验证码”。在倒计时期间按钮为禁用状态 .

第一步、获取按钮、绑定事件、设置定时器变量和计时变量

第二步、添加定时器,每隔1秒钟计时减 1,直至当计时小于等于 0 时清除定时器,按钮恢复为“发送验证码”,否则显示为“X秒后重试”

效果图:

javascript发送短信验证码代码

实现代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
/*-------------------------------------------*/
var InterValObj; //timer变量,控制时间
var count = 120; //间隔函数,1秒执行
var curCount;//当前剩余秒数
var code = ""; //验证码
var codeLength = 6;//验证码长度
function sendMessage() {
 curCount = count;
 var phone=$("#phone").val();//手机号码
 if(phone != ""){
  //产生验证码
  for (var i = 0; i < codeLength; i++) {
   code += parseInt(Math.random() * 9).toString();
  }
  //设置button效果,开始计时
  $("#btnSendCode").attr("disabled", "true");
  $("#btnSendCode").val("请在" + curCount + "秒内输入验证码");
  InterValObj = window.setInterval(SetRemainTime, 1000); //启动计时器,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 == 0) {               
  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="6"/>
  <input id="btnSendCode" type="button" value="发送验证码" onclick="sendMessage()" />
 </div>
</form>
</body>
</html>

 

更多

【责任编辑:小戴工程师】

上一篇:jQuery动画.animate()方法简单实例 下一篇:php网站出现MySQL频繁无法连接解决办法

最新文章

2015-11-17 10:47

相关文章

2015-11-17 10:47
网站制作咨询:
QQ:277728291
电话:18668277799
邮箱:277728291@qq.com
期待你来电咨询
回顶部
Copyright 2010 智软工作室 版权所有    智软为宁波公司提供最优惠的网络服务【宁波网站建设,宁波网站制作公司,宁波做网站公司,宁波外贸网站建设公司】我们竭诚为你服务!