为超链接加上disabled后的故事_javascript技巧

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

复制代码 代码如下:

<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);
}

通过一步步的改进,一个芝麻功能终于完成了。例子虽小,但却给了我很多思考。

时间: 2024-12-20 00:18:21

为超链接加上disabled后的故事_javascript技巧的相关文章

超链接怎么正确调用javascript函数_javascript技巧

点击超链接调用 JavaScript 函数,一般人都用: 复制代码 代码如下: <a href="javascript:function();"> 但这有个缺点,就是点击链接后,页面上的GIF动画将静止. 试看如下代码: 复制代码 代码如下: <script type="text/javascript"> <!-- function Foo() {     //do something } //--> </script>

JavaScript中为元素加上name属性的方法_javascript技巧

今天遇到个小问题, 在构建 DOM 时, IE 中不能通过 element.setAttribute('name', _variable); 和 element.name = _variable; 这样的形式来为元素加上 name 属性, 无论是 IE6 还是 IE7. (IE8 是可以的, 但 IE8rc1 不行) 后来我查看了 MSDN, 得到信息如下: 复制代码 代码如下: Internet Explorer 8 and later can set the NAME attribute a

BootStrap 超链接变按钮的实现方法_javascript技巧

<a href="#"> xuhaitao </a> 上面代码效果如下: btn btn-default :变成一个按钮样子 btn-lg : 大号的按钮 btn-block : 按钮填充整个宽度 JS按钮(bootstrap)超链接 html代码: button是bootstrap样式,请先加入bootstrap.min.css和jquery-1.11.1.min.js <a href="#" id="DownLoadAud

js 实现css风格选择器(压缩后2KB)_javascript技巧

近日在做一些OA前端界面,为了更好管理页面代码想写个js选择器,写着写着发现很费力,索性在网上找找看,功夫不负有心人, 找到一个mini css选择器,且性能不凡:以下代码是压缩后的,仅2KB. 复制代码 代码如下: var $=(function(){var b=/(?:[\w\-\\.#]+)+(?:\[\w+?=([\'"])?(?:\\\1|.)+?\1\])?|\*|>/ig,g=/^(?:[\w\-_]+)?\.([\w\-_]+)/,f=/^(?:[\w\-_]+)?#([\

JavaScript实现给按钮加上双重动作的方法_javascript技巧

本文实例讲述了JavaScript实现给按钮加上双重动作的方法.分享给大家供大家参考.具体如下: 这里使用JavaScript给网页上按钮加入同时加入两个动作,一个是在文本框显示文字,另一个则是转向到某个网址,以往的按钮跳转都是单一的,这一个又在跳转时加入了将文字赋值给文本框的动作,搞懂了原理,就可以灵活运用了. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-button-two-action-codes/ 具体代码如下: <title>

JS实现文档加载完成后执行代码_javascript技巧

在执行某些操作的时候,需要当文档完全加载完成之后再去执行,否则可能出现意向不到的情况,先看一段代码实例: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <title></title> <style type="text/css"> div{ width:200px; height:200px; } </style&g

给文字加上着重号的JS代码_javascript技巧

复制代码 代码如下: var s = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ01234567890';function f(s, width){  return s.replace(  new RegExp('[\\s\\S]{1,'+(width || 4)+'}', 'g'),  function(m){    return '^' + new Array(m.length).join(' ');  });} console.log(s);console.log(f(s, 4

超链接的禁用属性Disabled使用示例_javascript技巧

可以设置超链接的Disabled属性的true 和 false来确定超链接是不是能点击 例如: <a herf='http://www.baidu.com' onclick='return click(this);' disabled='ture'>bai du</a> 上面的意思是不想让bai du的超链生效,但在click不做任何约束和判断的话,但点击bai du的时候自然就会跳转到百度页面,这就是html中超链接禁用属性的bug 可以添加下面js约束来判断超链接是否可以使用 

求一个加上100后是一个完全平方数,再加上168又是一个完全平方数的整数

查看全套"c语言习题集" 题目:一个整数,它加上100后是一个完全平方数,再加上168又是一个完全平方数,请问该数是多少? 1.程序分析:在10万以内判断,先将该数加上100后再开方,再将该数加上268后再开方,如果开方后的结果满足如下条件,即是结果.请看具体分析: 2.程序源代码: #include "math.h"#include "stdio.h"#include "conio.h"main(){ long int i,