用户点击获取验证码之后我们会发送一条信息到用户手机,然后就会出现一个倒计时按钮,很像支付宝手机付款效果了,下面我给大家分享两个js效果
2016-04-08 15:46
447 查看
js代码
jquery
js代码
代码如下 | 复制代码 |
<div class="input"> <input type="button" id="btn" class="btn_mfyzm" value="免费获取验证码" /> <script type="text/javascript"> var wait=5; document.getElementById("btn").disabled = false; function time(o) { if (wait == 0) { o.removeAttribute("disabled"); o.value="免费获取验证码"; wait = 5; } else { o.setAttribute("disabled", true); o.value="重新发送(" + wait + ")"; wait--; setTimeout(function() { time(o) }, 1000) } } document.getElementById("btn").onclick=function(){time(this);} </script> </div> |
代码如下 | 复制代码 |
<li><span class="txt_name">验证码:</span><span class="code" onclick="getVerify();" id="timeb1" style="cursor:pointer"& gt;免费获取验证码</span><input class="input_code" autocomplete="off" onblur="if(this.value=='') this.value='';" onfocus="if(this.value=='') this.value='';" value="" type="text" name="verifyCode" id="verifyCode" ></li> |
代码如下 | 复制代码 |
function f_timeout(){ $('#timeb1').html('<span id="timeb2">60</span>秒后重新获取'); $('#timeb1').click(function(){}); timer = self.setInterval(addsec,1000); } function addsec(){ var t = $('#timeb2').html(); //alert(t); if(t > 0){ $('#timeb2').html(t-1); //alert(t); }else{ window.clearInterval(timer); $('#timeb1').html('<span id="timeb2"></span>重新获取验证码'); $('#timeb1').click(function(){getVerify();}); } } |
相关文章推荐
- MyEclipse 编写 JSP 代码时很卡的解决办法
- jsonUtil 工具类
- fastjson 私有属性的坑
- 从函数调用的角度,探讨JavaScript中this的用法
- JavaScript代码优化
- js的字符串charAt()方法
- 解归档+json解析
- Ext Js【Hello World】 ——4.1 beta 1
- js生成验证码并验证
- 网页信息抓取进阶 支持Js生成数据 Jsoup的不足之处
- javascript 格式化数字
- js实现跑马灯效果
- json常用
- javaScript中的this关键字解析
- JavaScript数据绑定实现一个简单的 MVVM 库
- SharePoint之JavaScript客户端对象模型
- Eclipse去除js(JavaScript)错误
- Extjs 如何得到grid中某一列的值
- Javascript中escape(), encodeURI()和encodeURIComponent()之精析与比较
- js实现琴弦效果(兼容IE7)