jQuery addClass example

Change class name on click in jQuery

HTML

<div class="Contador">
<div style="text-align: right;" trbidi="on"></div>
<div style="text-align: center;" trbidi="on"></div>
<div id="Contenedort1">
<div style="text-align: center;">Wait a few seconds <span id="countdown"> 10 </span> <i class="fa fa-spinner fa-spin" style="font-size: 45px;"></i> <a id="reload" href="#"></a></div>
</div>


</div>

<script type="text/javascript">
//add Font Awesome
      var cb = function() {
        var l = document.createElement('link'); l.rel = 'stylesheet';
        l.href = '//maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css';
        var h = document.getElementsByTagName('head')[0]; h.parentNode.insertBefore(l, h);
      };
      var raf = requestAnimationFrame || mozRequestAnimationFrame ||
          webkitRequestAnimationFrame || msRequestAnimationFrame;
      if (raf) raf(cb);
      else window.addEventListener('load', cb);
</script>

CSS

a#reload {display: none;}
#Contenedort1{    background: #344275;
    padding: 14px;
    font-size: 35px;
    font-family: arial;
    color: white;
    font-weight: bold;}

#button.Boton-Ir a {
    color: #000;
    font-size: 20px;
    display: block;
}
#button.Boton-Ir {
    width: 100px;
    padding: 4px;
    height: 50px;
    font-size: 15px;
    color: #000;
    margin: 9px auto;
    position: relative;
}

JavaScript

$(function() {
    var seconds;
    var temp;

    function removem1() {
        var xkl = getQueryVariable("url");
        if (xkl) {
        	var nkl = xkl.replace("&m=1", "");
        	document.getElementById("reload").innerHTML = nkl;
        }
    }
    removem1();
    document.getElementById('reload').href = window.location.href;

    function getQueryVariable(variable) {
        var query = window.location.search.substring(1);
        var vars = query.split("?&&");
        for (var i = 0; i < vars.length; i++) {
            var pair = vars[i].split("=_");
            if (pair[0] == variable) {
                return pair[1];
            }
        }
        return (false);
    }

    function countdown() {
        console.log("countdown");
        seconds = document.getElementById('countdown').innerHTML;
        seconds = parseInt(seconds, 10);

        if (seconds == 0) {
            temp = document.getElementById('countdown');

            var linkGo = document.getElementById("reload").innerHTML;

            $('#Contenedort1').text('Link listo!');

            $('.Contador').find('#Contenedort1').after('<button class="Boton-Ir"><a href="' + linkGo + '">Link</a></button>');
        }
        seconds--;
        temp = document.getElementById('countdown');
        if (temp) {
        	temp.innerHTML = seconds;
        	timeoutMyOswego = setTimeout(countdown, 1000);
        }
    }
    setTimeout(function() {
        countdown();
    }, 1000);
});