主要实现短信验证时按钮倒计时问题 :
按钮倒计时代码 :
<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" οnclick="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上 按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就不会自动记忆表单状态了。
点击时 :
刷新后 :
现在就可以一切正常了 。
有什么疑问,可以留言私信!