使achor标签一段时间不可点击，然后再次使其可点击

Question

How can I make an anchor tag clickable after few seconds ? I made it non-clickable but now can't make it clickable again.

(Note: there will be no id used for the tag)

Heres my html and javascript:

function neww(id,time){
    var sec,min,hr;
    var i=(time*1);
    var neew=setInterval(function(){
        if(i>0){
            i--;
            if(i>=60){
                min=parseInt(i/60);
                sec=i%60;         
                if(min>=60){
                    hr=parseInt(min/60);
                    min=min%60;
                }else{
                    hr=0;
                }
            }else{
                min=0;
                hr=0;
                sec=i;
            }
            if(sec<10){
                sec="0"+sec;
            }
            if(min<10){
                min="0"+min;
            }
            if(hr<10){
                hr="0"+hr;
            }
            id.onclick=function(){return false}; // its working here
            id.style.color="red";
            id.style.backgroundColor="#ffffff";
            id.innerHTML=hr+':'+min+':'+sec;
        }
        if(i==0){
            id.innerHTML="Ready";
            id.style.color="#ffffff";
            id.style.backgroundColor="green";
            if(id.onclick==false){id.onclick=function(){return true};} // but its not working
            clearInterval(neew);
        }
    },1000);
}

Html:

<a href="http://www.google.com/" target="_blank" class="mynewclass" onclick="neww(this,5);">Ready</a>

-Thanks in advance.

SOLVED:

I just removed the 'onclick' attribute from the anchor, so the timer function gets no barrier until the timer completes. Thank you everybody for your effort which helped me to solve this.

Thiss for the link is alive but that doesn't interfere the timer function:

function neww(id,time){
    var link=id.getAttribute("onclick");
    id.removeAttribute("onclick");
    var sec,min,hr;
    var i=(time*1);
    var neew=setInterval(function(){
        if(i>0){
            i--;
            if(i>=60){
                min=parseInt(i/60);
                sec=i%60;         
                if(min>=60){
                    hr=parseInt(min/60);
                    min=min%60;
                }else{
                    hr=0;
                }
            }else{
                min=0;
                hr=0;
                sec=i;
            }
            if(sec<10){
                sec="0"+sec;
            }
            if(min<10){
                min="0"+min;
            }
            if(hr<10){
                hr="0"+hr;
            }
            id.style.color="red";
            id.style.backgroundColor="#ffffff";
            id.innerHTML=hr+':'+min+':'+sec;
        }
        if(i==0){
            id.innerHTML="Ready";
            id.style.color="#ffffff";
            id.style.backgroundColor="green";
            id.setAttribute("onclick",link);
            clearInterval(neew);
        }
    },1000);
}

And thiss for the link is dead while the timer is running:

function neww(id,time){
    var link=id.getAttribute("onclick");
    var linkk=id.getAttribute("href");    
    var sec,min,hr;
    var i=(time*1);//+60;
    var neew=setInterval(function(){
        if(i>0){
            i--;
            if(i>=60){
                min=parseInt(i/60);
                sec=i%60;         
                if(min>=60){
                    hr=parseInt(min/60);
                    min=min%60;
                }else{
                    hr=0;
                }
            }else{
                min=0;
                hr=0;
                sec=i;
            }
            if(sec<10){
                sec="0"+sec;
            }
            if(min<10){
                min="0"+min;
            }
            if(hr<10){
                hr="0"+hr;
            }
            id.removeAttribute("onclick");
            id.removeAttribute("href");
            id.style.color="red";
            id.style.backgroundColor="#ffffff";
            id.innerHTML=hr+':'+min+':'+sec;
        }
        if(i==0){
            id.innerHTML="Ready";
            id.style.color="#ffffff";
            id.style.backgroundColor="green";
            id.setAttribute("onclick",link);
            id.setAttribute("href",linkk);
            clearInterval(neew);
        }
    },1000);
}

Answer 1

Here I am giving you one idea. please modify, according to your need. Hope it help.

After three minutes, it will create the link.

HTML:

<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <a href="http://www.google.com/" target="_blank" class="mynewclass">Ready</a>
</body>
</html>

jQuery:

$(function(){
  var link = $('.mynewclass').attr('href');
  $('.mynewclass').removeAttr('href');

  setTimeout(function(){
    $('.mynewclass').attr('href', link);
  }, 3000);
});

Javascript: I am using the javascript getElementsByClassName method. if you are using older browser then i think it will not work. please check the browser support.

window.onload = function () {
        var elem = document.getElementsByClassName('mynewclass'),
            urlLink = elem[0].getAttribute('href'),
            emptyURL = elem[0].removeAttribute('href');

    setTimeout(function () {
        urlLink = elem[0].setAttribute('href', urlLink);
    }, 3000);
}

Here is the jsbin link - http://jsbin.com/dawit/2/

Answer 2

In Vanilla JavaScript:

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Delay Click</title>
</head>

<body>
    <a href="http://www.google.com/" target="_blank" class="mynewclass">Ready</a> |
    <a href="http://www.google.com/" target="_blank" class="mynewclass">Ready</a> |
    <a href="http://www.google.com/" target="_blank" class="mynewclass">Ready</a> |

<script>
    var enableLinks = false;

    setTimeout(function(){
        enableLinks = true;
    }, 5000); //add delay of 5 seconds = 5000 miliseconds

    function clickHandler(e){
        var el = e.target;
        if(!enableLinks){
            e.preventDefault();
        }else{
            //add rest of your logic here
            console.log("it's working");
        }   
    }

    var anchors = document.querySelectorAll(".mynewclass");
    for(var i=0; i< anchors.length; i++){
    if (anchors[i].addEventListener) {
      anchors[i].addEventListener('click', clickHandler, false); 
    } else if (anchors[i].attachEvent)  {
      anchors[i].attachEvent('onclick', clickHandler);
    }
}
</script>
</body>
</html>