Ajouter une image pour décompter le script

Question

Je veux ajouter une image à côté de « Cliquez ici pour télécharger » Signification lorsque le compte à rebours est terminé, il devrait ressembler à ceci: Cliquez ici pour télécharger et cette image doit être à côté http://svastara.info/.s/img/icon/download1.png

<script type="text/javascript"> 
<!-- 
var count=30; 
var obj; 
window.onload=function() { 
obj=document.getElementById('delayed'); 
obj.onclick=function() { 
if(count<=0) { 
return true; 
} 
else { 
if(count==30) { 
waitForIt(); 
return false; 
} 
else { 
return false; 
} 
} 
} 
} 
function waitForIt() { 
obj.firstChild.data='Link will be available after '+count+'secs'; 
if(count<=0) { 
clearTimeout(cd); 
obj.firstChild.data='Click here to Download'; 
obj.className='go'; 
return; 
} 
count--; 
cd=setTimeout('waitForIt()',1000); 
} 
//--> 
</script> 

---

<div> 
<a id="delayed" class="stop" href="http://www.epiclosers.com/">Download (30sec)</a> 
</div> 

Answer 1

du haut de ma tête, pourquoi ne pas inclure cette image cachée où vous le souhaitez:

<img id="downloadImg" src="http://svastara.info/.s/img/icon/download1.png" style="display:none"/> 

et révéler lorsque la minuterie est terminée, en définissant la propriété de style display-block ou inline: nombre

function waitForIt() { 
    obj.firstChild.data='Link will be available after '+count+'secs'; 
    if(count<=0) { 
     clearTimeout(cd); 
     obj.firstChild.data='Click here to Download'; 
     obj.className='go'; 
     document.getElementById("downloadImg").style.display = "block"; 
     return; 
    } 
    count--; 
    cd=setTimeout('waitForIt()',1000); 
} 

Answer 2

var CountdownTimer = function(id, count, imgurl) { this.construct(id, count, imgurl); } 
CountdownTimer.prototype = { 
    construct: function(id,count,imgurl) { 
     this.id = id; 
     this.object = document.getElementById(id); 
     this.count = count; 
     this.interval = null; 
     this.counted = false; 
     this.img = new Image(); // preload 
     this.img.src = imgurl; 
     this.img.border = "0"; 

     (function(obj) { 
      obj.object.onclick = function() { 
       return obj.onclick(); 
      }; 
     })(this); 
    }, 

    tick: function() { 
     this.count--; 
     this.render(); 

     if(this.count == 0){ 
      clearInterval(this.interval); 
      this.interval = null; 
      this.object.appendChild(this.img); 
     } 
    }, 

    onclick: function() { 
     if(!this.counted) { 
      this.counted = true; 
      this.render(); 
      (function(obj) { 
       obj.interval = setInterval(function() { 
        obj.tick(); 
       },1000); 
      })(this); 
      return false; 
     } else if(this.count == 0) 
      return true; 
     else 
      return false; 
    }, 

    render: function() { 
     if(this.count > 0) 
      this.object.innerHTML = "Download (" + this.count + " second" + (this.count == 1 ? "" : "s") + ")"; 
     else 
      this.object.innerHTML = "Download Now"; 
    } 

}; 

window.onload = function() { 
    var c = new CountdownTimer("delayed",3,"http://svastara.info/.s/img/icon/download1.png"); 
};