这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
我们在注册账号,或者是参加活动时,都会向手机发送收短信验证码,短信验证码到底是如何实现的,本文为大家揭晓,并为大家分项 1javascript 发送短信验证码实现代码,感兴趣的小伙伴们可以参考一下
本文首先分析手机发送验证码的原理,再对 javascript 发送短信验证码予以实现,具体思路如下: 实现点击 "发送验证码" 按钮后,按钮依次显示为 "59 秒后重试"、"58 秒后重试"… 直至倒计时至 0 秒时再恢复显示为 "发送验证码"。在倒计时期间按钮为禁用状态 .
第一步、获取按钮、绑定事件、设置定时器变量和计时变量
第二步、添加定时器,每隔 1 秒钟计时减 1,直至当计时小于等于 0 时清除定时器,按钮恢复为 "发送验证码",否则显示为 "X 秒后重试"
效果图:
实现代码:
- <!doctype html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- Document
- </title>
- <script type="text/javascript">
- window.onload = function() {
- var send = document.getElementById('send'),
- times = 60,
- timer = null;
- send.onclick = 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);
- }
- }
- </script>
- </head>
- <body>
- <input type="button" id="send" value="发送验证码">
- </body>
- </html>
注意点:
设置按钮是否为禁用时,send.disabled=true; send.disabled=false; true 和 false 不能加引号! true 和 false 不能加引号! true 和 false 不能加引号! 否则值永远为真。 也可用 send.setAttribute('disabled','disabled'); 或 send.removeAttribute('disabled');
来源: http://www.phperz.com/article/17/0410/268765.html