为超链接加上disabled后的故事


Posted in Javascript onDecember 10, 2010

场情:

一张页面中原来有一个超链接按钮,点击后可以获取到短信认证码。如

<a href="javascript:reciverSms()">获取短信认证码</a> 
<script type="text/javascript"> 
function reciverSms(){ 
var sms = getSmsCode(); 
} 
</script>

但是考虑到频繁点击获取认证码,对相关设备的压力,就做了一个点击5秒后才允许再点击的逻辑,于是又来了下一个版本
function reciverSms(obj){ 
var sms = getSmsCode(); 
obj.disabled = true; 
windows.setTimeout(function(){ 
obj.disabled = false; 
},5000); 
}

代码逻辑很简单,获取一次短信后,链接禁用5秒。可是没有想的事情又来了,原来超链接禁用了后虽然样子变成禁用了,但是还是可以点击的,原来是个陷阱,于是又来了第三个版本
function reciverSms(obj){ 
if(obj.disabled){ 
return; 
} 
var sms = getSmsCode(); 
obj.disabled = true; 
windows.setTimeout(function(){ 
obj.disabled = false; 
},5000); 
}

至此这个功能因该是算做好了,可是还有一件令我想不的事,之前说超连接disabled属性为true时,表现出来的样子是灰色不可用状态,但这里有个特例,如果这个超链接被设置了

color的css属性样式,在非ie浏览器上表现出来的样子就不是禁用了,终于看到ie的好了。于是第四个版本出现了。

function reciverSms(obj){ 
if(obj.disabled){ 
return; 
} 
var sms = getSmsCode(); 
obj.disabled = true; 
addClass(obj,"gray"); 
windows.setTimeout(function(){ 
obj.disabled = false; 
removeClass(obj,"gray"); 
},5000); 
}

通过一步步的改进,一个芝麻功能终于完成了。例子虽小,但却给了我很多思考。
Javascript 相关文章推荐
Jquery 数据选择插件Pickerbox使用介绍
Aug 24 Javascript
js跨域访问示例(客户端/服务端)
May 19 Javascript
获取中文字符串的实际长度代码
Jun 05 Javascript
jQuery向后台传入json格式数据的方法
Feb 13 Javascript
详解JavaScript函数对象
Nov 15 Javascript
js实现上一页下一页的效果【附代码】
Mar 10 Javascript
JSP基于Bootstrap分页显示实例解析
Jun 12 Javascript
weui框架实现上传、预览和删除图片功能代码
Aug 24 Javascript
AngularJS select设置默认值的实现方法
Aug 25 Javascript
详解VUE前端按钮权限控制
Apr 26 Javascript
layui在form表单页面通过Validform加入简单验证的方法
Sep 06 Javascript
JavaScript 反射和属性赋值实例解析
Oct 28 Javascript
input按钮的事件处理大全
Dec 10 #Javascript
JavaScript(JS) 压缩 / 混淆 / 格式化 批处理工具
Dec 10 #Javascript
js下关于onmouseout、事件冒泡的问题经验小结
Dec 09 #Javascript
客户端限制只能上传jpg格式图片的js代码
Dec 09 #Javascript
Javascript将string类型转换int类型
Dec 09 #Javascript
IE6下CSS图片缓存问题解决方法
Dec 09 #Javascript
web前端开发也需要日志
Dec 09 #Javascript
You might like
php生成EXCEL的东东
2006/10/09 PHP
实现WordPress主题侧边栏切换功能的PHP脚本详解
2015/12/14 PHP
解决laravel 表单提交-POST 异常的问题
2019/10/15 PHP
javascript下阻止表单重复提交、防刷新、防后退
2007/08/17 Javascript
HTA版JSMin(省略修饰语若干)基于javascript语言编写
2009/12/24 Javascript
让网页跳转到指定位置的jquery代码非书签
2013/09/06 Javascript
javascript中的throttle和debounce浅析
2014/06/06 Javascript
Javascript动态引用CSS文件的2种方法介绍
2014/06/06 Javascript
jQuery实现默认是闭合的FAQ展开效果菜单
2015/09/14 Javascript
jQuery解析json数据实例分析
2015/11/24 Javascript
WebGL利用FBO完成立方体贴图效果完整实例(附demo源码下载)
2016/01/26 Javascript
jquery ztree实现树的搜索功能
2016/02/25 Javascript
网页前端登录js按Enter回车键实现登陆的两种方法
2016/05/10 Javascript
深入理解requestAnimationFrame的动画循环
2016/09/20 Javascript
jacascript DOM节点——元素节点、属性节点、文本节点
2017/04/18 Javascript
nodejs构建本地web测试服务器 如何解决访问静态资源问题
2017/07/14 NodeJs
JS按钮闪烁功能的实现代码
2017/07/21 Javascript
基于Vue框架vux组件库实现上拉刷新功能
2017/11/28 Javascript
[36:09]Secret vs VG 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.24
2019/09/10 DOTA
在Python中使用mechanize模块模拟浏览器功能
2015/05/05 Python
Python网络爬虫实例讲解
2016/04/28 Python
Django中Forms的使用代码解析
2018/02/10 Python
Python Xml文件添加字节属性的方法
2018/03/31 Python
django echarts饼图数据动态加载的实例
2019/08/12 Python
python 进程的几种创建方式详解
2019/08/29 Python
pycharm 多行批量缩进和反向缩进快捷键介绍
2021/01/15 Python
AmazeUI 评论列表的实现示例
2020/08/13 HTML / CSS
给排水专业应届生求职信
2013/10/12 职场文书
百货商场楼层班组长竞聘书
2014/03/31 职场文书
公司门卫工作职责
2014/06/28 职场文书
车辆委托书范本
2014/10/05 职场文书
小学教师求职信范文
2015/03/20 职场文书
财务统计员岗位职责
2015/04/14 职场文书
辩护词格式
2015/05/22 职场文书
mybatis-plus模糊查询指定字段
2022/04/28 Java/Android
win10音频服务未响应怎么解决?win10音频服务未响应未修复的解决方法
2022/08/14 数码科技