本文首先分析手机发送验证码的原理,再对javascript发送短信验证码予以实现,具体思路如下:

实现点击“发送验证码”按钮后,按钮依次显示为“59秒后重试”、“58秒后重试”…直至倒计时至0秒时再恢复显示为“发送验证码”。在倒计时期间按钮为禁用状态 .

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

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

效果图:

实现代码:

Document

window.οnlοad=function(){

var send=document.getElementById('send'),

times=60,

timer=null;

send.οnclick=function(){

// 计时开始

var that = this;

this.disabled=true;

timer = setInterval(function(){

times --;

that.value = times + "秒后重试";

if(times <= 0){

that.disabled =false;

that.value = "发送验证码";

clearInterval(timer);

times = 60;

}

//console.log(times);

},1000);

}

}

注意点:

设置按钮是否为禁用时,send.disabled=true; send.disabled=false;true和false不能加引号!true和false不能加引号!true和false不能加引号!否则值永远为真。

也可用send.setAttribute('disabled','disabled');或send.removeAttribute('disabled');

以上就是为大家分享的javascript发送短信验证码全部代码,希望对大家的学习有所帮助。

html一键短信代码,javascript发送短信验证码实现代码相关推荐

  1. 使用华为短信包,发送短信Result=61问题解决

    使用华为短信包,发送短信出现了Result=61的返回. 网上说是有效时间失效 注释: /** * 创建一个发送短信消息,传入消息的各字段的值,并对各参数值进行判断,不符合要求则抛出异常 * 按要求把 ...

  2. 普歌-腾讯云短信+使用node发送短信(3种方法API、SDK)、封装工具、搭建web服务、写接口、调用接口发送短信、时效性判断、验证验证码的正确性(下)

    普歌-结合腾讯云短信服务+node搭建一个简单的发送短信web小项目 涉及技术: 腾讯云服务 后端服务:node+express 前端搭建:html+js 前言:本来这篇博客应该很早就发了,中间有一些 ...

  3. N7100/GALAXY Note2 解决短信发件人实际发送短信时间

    三星 N7100/GALAXY Note2 解决短信发件人实际发送短信时间... 解决短信发件人实际发送短信时间显示为当前时间的bug 如果别人给你发了一条短信,而你手机当前是关机状态,那么当你开机后 ...

  4. java调用短信接口实现发送短信

    java调用短信接口实现发送短信 1.下载接口文件 2.打开java文件夹 2.1获取jar包依赖 2.2获取代码模板 3.创建项目 3.1打开eclipse软件,创建一个动态的web项目 3.2导入 ...

  5. Java调用阿里云短信接口,发送短信

    Java调用阿里云短信接口,发送短信 1.短信服务这个很简单,只需要知道accessKeyId(AK).accessKeySecret(SK).短信签名.短信模板即可. 2.域名和产品名称是固定的,使 ...

  6. TP5调用阿里云短信接口实现发送短信功能

    TP5调用阿里云短信接口实现发送短信功能 工作需要,对接阿里云的短信服务,借此记录一下(网站 www.lelee.top) 主要分为两个部分,一是下载官方的Demo事例,这个不需要多说,自己去下载就行 ...

  7. PHP代码中的情话,[php发送短信验证码代码]php发送短信验证码

    业务: 手机端点击发送验证码,请求发送到php端,由php调用第三方平台(我们使用的是榛子云短信http://smsow.zhenzikj.com)的短信接口,生成验证码并发送. 在"我的应 ...

  8. java发送短信模板_java发送短信

    java发送短信一般步骤 一.在中国网建中注册用户:本程序是通过中国网建提供的SMS短信平台实现的,该平台新用户注册可以拥有免费5条普通短信和3条彩信,足够进行尝试和体验了.中国网建注册地址:http ...

  9. python发送短信接口_python发送短信和发送邮件

    先注册好 发短信脚本内容 #接口类型:互亿无线触发短信接口,支持发送验证码短信.订单通知短信等. #账户注册:请通过该地址开通账户http://sms.ihuyi.com/register.html ...

最新文章

  1. Redis笔记之常用命令
  2. Linux中包的管理与程序安装
  3. java为什么不使用odbc_java jdbc和odbc的区别是什么?jdbc和odbc的关系是怎样的?
  4. 7 款 Python 可视化工具对比
  5. iOS 四种延时的方法
  6. JAVASCRIPT加密解密终级指南
  7. 手游脚本_雷电模拟器
  8. PDA库存盘点,有效提高电子制造企业库存盘点效率
  9. Hive 的 distribute by
  10. 计算机毕业设计Java银行贷款管理系统(系统+程序+mysql数据库+Lw文档)
  11. 将 字母 转换数字(1-26)
  12. nginx error.log中的 favicon.ico 错误
  13. Nagios之配置介绍
  14. Java中方法调用参数传递的方式是传值,尽管传的是引用的值而不是对象的值。(Does Java pass by reference or pass by value?)
  15. proteus教程——74hc165
  16. 解决项目上的红叉和红色感叹号的方法。
  17. Locust的学习笔记(一、环境搭建以及初识locust)
  18. c语言检测状态是否变化,C语言数组状态研究
  19. qt-qss之QScrollArea使用
  20. delphi.memory.分配及释放---New/Dispose, GetMem/FreeMem及其它函数的区别与相同

热门文章

  1. 一张图对比腾讯、阿里、百度的薪资职级
  2. USB接口Ntag 213/215/216系列读卡器发卡器 Ntag标签读写器发卡器 NFC标签读卡器 ISO14443读卡器 TypeA标签发卡器
  3. Linux下的开源免费杀毒软件Clamav
  4. nl80211 和 wext
  5. EEGNET:开源的可视化分析脑网络工具
  6. 本篇讲述详解windows XP系统内核文件的文章主题
  7. 德国科隆大学计算机排名,德国科隆大学世界排名如何?
  8. 实达Start BP-870K 打印机驱动
  9. 推荐4款不足1M的冷门工具
  10. 成本费用空缺,所得税税负高,怎么合理避税?