短信验证倒计时以及在firefox中出现的问题

来源:互联网 发布:ftp服务器软件 编辑:程序博客网 时间:2024/04/30 00:38

主要实现短信验证时按钮倒计时问题 : 

按钮倒计时代码  :

<span style="font-family:Microsoft YaHei;font-size:14px;"><span style="font-family:Microsoft YaHei;">var wait=60;  function get_time_code(obj) {        if (wait == 0) {          obj.removeAttribute("disabled");                    obj.value="获取验证码";          wait = 60;      } else {          obj.setAttribute("disabled", true);          obj.value="重新发送(" + wait + ")";          wait--;         setTimeout(function() {              get_time_code(obj)          },          1000)     }  }  </span></span>

Ajax请求数据代码 : 
<span style="font-family:Microsoft YaHei;font-size:14px;"><span style="font-family:Microsoft YaHei;">function sendMobileCode (obj){    $.ajax({        url:"user.php?act=act_sms_regcode",        type:"post",        data: {'mobile':mobile},        dataType: "json",        success: function (data) {            if(data.succeed == 0 && data.code == 1){                document.getElementById('mobile_code').innerHTML = data.sendcode;                document.getElementById('mobile_code').style.color = 'green';                get_time_code(obj);   // 在有正确信息返回的时候  进行调用倒计时函数           }           if(data.succeed == 1 && data.error_code == 1){                document.getElementById('mobile_code').innerHTML = data.code;                document.getElementById('mobile_code').style.color = 'red';                            }else{                document.getElementById('mobile_code').innerHTML = data.code;                document.getElementById('mobile_code').style.color = 'red';                 get_time_code(obj);             }        },    });}</span></span>

HTML代码段 : 
<span style="font-family:Microsoft YaHei;font-size:14px;"><span style="font-family:Microsoft YaHei;"><input name="sms_reg_code" type="text" size="25" id="sms_reg_code"  class="newlsg_reg" style="width:150px;"/><span class="newlsg_regspan_"> *</span><input name="get_reg_code" type="button" id="btn"  class="newlsg_smscode" onclick="sendMobileCode(this)" value={$lang.get_reg_code} style="border:none;" /> </span></span>

 PHP代码 就省略了  自己写的时候本以为这样就可以了   因为已经可以用了  因为我一直用的是Chrome , 并没有什么问题 ,  后来在测试的时候我却发现 ,我使用firefox测试时 , 却惊奇的发现点击获取验证码按钮之后 ,顺利进入倒计时 , 在倒计时中途我是F5按钮刷新页面后问题就来了 。 我发现这时按钮变成不可点击状态了 。如下:


刷新之后会在原来的语句中出现一个disabled="" , 如果你是用Ctrl+F5 刷新后并不会出现这种问题 ,

在此给大家介绍一下F5 与  Ctrl+F5  的区别:

这里的刷新方式是指能通过哪些方式让一个网页重新加载,我从表现上大概分了三种:

1.最常用的,点击浏览器的刷新按钮,或者按下F5

2.CTRL+F5,功能是跳过缓存刷新

3.浏览器地址栏上回车,IE里把这种请求方式归为"导航"操作

F5和CTRL+F5的区别

1.F5触发的HTTP请求的请求头中通常包含了If-Modified-Since 或 If-None-Match字段,或者两者兼有.如果服务器认为被请求的文件没有发生变化,则返回304响应,

也就没有跳过缓存.

2.CTRL+F5触发的HTTP请求的请求头中没有上面的那两个头,却有Pragma: no-cache 或 Cache-Control: no-cache 字段,或者两者兼有.服务器看到no-cache这样的

值就会把最新的文件响应过去.也就跳过了缓存.

FireFox的刷新机制

由于FireFox的刷新机制与IE有较大区别。所以javascript代码 document.location.reload();通常在IE上工作正常,在Firefox下效果却并不理想,这是因为Firefox会记录上一次的页面元素的值,所以我们常常会看见刷新页面后,旧的值却好保留在页面上。

在Firefox上 按F5 来刷新,但 F5刷新 并不能清除缓存中被保留的页面元素的值。但我们可以用Ctrl+F5 来实现IE下F5的效果,先清除缓存,然后刷新页面

autocomplete 属性

autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。

注释:autocomplete 适用于 <form> 标签,以及以下类型的 <input> 标签:text, search, url, telephone, email, password, datepickers, range 以及 color。


  可以使用属性:autocomplete来进行清楚当前页面的元素属性 , 会实现当前页面的刷新.

autocomplete设置成"off"后退或刷新页面时,Firefox就不会自动记忆表单状态了。

点击时 :



刷新后 : 

现在就可以一切正常了 。 

有什么疑问,可以留言私信!

1 0
原创粉丝点击