本文首先分析手机发送验证码的原理,再对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. [非技术参考]C#基础:使用Thread创建线程(1)
  2. 2018/02/06
  3. 大数据平台安全标准设计
  4. SpringBoot+Mybatis多模块(module)项目搭建教程
  5. c语言链表查找的代码与题目,链表的C语言实现之单链表的查找运算_c语言
  6. splay/fhq-treap 问卷调查反馈—— [JSOI2008]火星人prefix(splay),Strange Queries(fhq-treap)
  7. 最后2天,BDTC 2019 早鸟票即将售罄,超强阵容及议题抢先曝光!
  8. 训练集,验证集,测试集比例
  9. 选择排序(C++/Java实现)
  10. 适合编写C语言代码的编程软件有哪些?大学生赶紧行动起来!
  11. 百度文库,道客巴巴等文库免积分下载
  12. MySQL数据分析-(13)表操作补充:索引
  13. 公主救骑士---地下城游戏_leetcode
  14. python中可迭代对象是什么意思_python中可迭代对象是什么
  15. 2021chrome浏览器视频加速(网盘)
  16. 一些电商英文缩写的解释
  17. 暑假实习 + 提前批 +校园招聘(更新中)
  18. 【毕业设计】基于Stm32的便携体测仪(心率 体温) - 单片机 嵌入式 物联网
  19. 以数据赋能业务,qlik为企业搭建透明绩效管理平台
  20. 摩拜上海涨价,已成全国最贵单车,一月运维花4亿全年亏45亿

热门文章

  1. LOJ 2547 「JSOI2018」防御网络——思路+环DP
  2. python中使用递归实现斐波那契数列
  3. 巡检路线排班问题matlab,基于数学建模的巡检线路排班设计
  4. 输电线路巡检报告模板
  5. 使用svn删除Xcode工程中的文件
  6. Java实训项目--小型书店管理系统(ssm框架)
  7. c语言获取天气信息示例(通过心知天气api获取)
  8. symbian 2nd中从屏蔽接入点选择以及创建新的接入点
  9. SMI BATCAM2.0 超声波相机(声学成像仪)介绍
  10. 想要风投被你的融资 PPT 打动吗?别忘了你其实就是在想方设法卖出自己公司的部分股权...