Kann ich ausblenden über einen Html-link mit javascript?

Es ist eine einfache übung, in der ich wollen, einen link zu verstecken, die ich in meinen Html-Datei.
Aber machen es zu erscheinen, nachdem ein timer abgelaufen ist, in meiner Funktion.

Dies ist der javascript-bit
(unten ist der html-bit)

var i = 10;
var time;
var countdown = document.getElementById("countdown");
var link = document.getElementById("link");

function MyFunction3() {
    document.getElementById("imageoef").style.visibility="visible";
    link.style.visibility="hidden";

    i--;
    countdown.innerHTML= i;
    time = setTimeout ("MyFunction3();",1000);

    if (i < 1) {
        countdown.innerHTML="";
        document.getElementById("imageoef").style.visibility="hidden";
        link.style.visibility="visible";
    }
}

HTML

<img src="images/loading.gif" alt="Loading..." id="imageoef" style="visibility:hidden" />
<form method="post">
    <input onclick="MyFunction3();" type="button" value="start download" />
</form>

<div id="countdown">
    <a id="link" href="http://freelanceswitch.com/freelance-freedom/freelance-freedom-2/" >Your download is ready!</a>
</div>

wo ist das element mit der id imageoef?
sollte gefixt werden, wenn es peer reviewed
Ich habe nicht zählen, weil es funktioniert schon, keine Notwendigkeit, um die Aufmerksamkeit auf das bit. Es ist ein Bild in html, die versteckt auf den ersten, aber wird angezeigt, wenn die Taste betätigt wird. Und verschwindet, wenn der timer abgelaufen ist. Ich kann einfach nicht scheinen, um in der Lage sein, das gleiche zu tun mit dem link.

InformationsquelleAutor user1951350 | 2013-01-05

HTML:

<input type="button" onclick="hideLink()" value="Start" />
<p id="timer"></p>
<a id="link" href="">This link is hidden for 10 seconds.</a>

JavaScript:

var timeLeft = 10;
var count;
window.hideLink = function hideLink()
{
  document.getElementById("link").style.visibility = "hidden";
  count = setInterval (decrementTimer, 1000);
  setTimeout (showLink,1000 * timeLeft);
};

function decrementTimer()
{
  timeLeft = timeLeft - 1;
  document.getElementById("timer").innerHTML = timeLeft + " seconds";
  if(timeLeft <= 0)
  {
    window.clearInterval(count);
    document.getElementById("timer").style.visibility = "hidden";
  }
}

function showLink()
{
  document.getElementById("link").style.visibility = "visible";
}

http://jsfiddle.net/rPnNr/4/

Danke für die Antwort, aber es ist nicht ganz das, was ich Suche. Wenn ich die Taste drücken, wird ein timer auf off gesetzt ist. Wenn der timer null erreicht hat, möchte ich den link zu erscheinen.
so setzen Sie den code oben in einer Funktion, die zu Mittag mit einer oncleck Veranstaltung
Ich code Hinzugefügt, um es zu starten, mit einem button klicken.
Es ist vielleicht nicht sofort offensichtlich, aber die Frage ist eigentlich, über einen countdown-timer angezeigt, der von 10 auf 0, dann stellen Sie den link wieder am Ende.
Geändert es zu zeigen, der countdown-timer.

InformationsquelleAutor Alex W

Wenn Sie Platz haben, das javascript in den header-Abschnitt der code kann nicht funktionieren. Denn Sie speichern die countdown and link Wert des Elements auf der Seite laden. Zu dieser Zeit, wenn Ihre Elemente noch nicht geladen, bis die Seite Ihren countdown and link vars geht auf null. besser, was ist, Zugang zu Ihrem elemet nach Ihren button klicken.

var i = 10;
var time;
var countdown = document.getElementById("countdown");
var link = document.getElementById("link");

function MyFunction3() {
    countdown = document.getElementById("countdown");
    link = document.getElementById("link");

    document.getElementById("imageoef").style.visibility="visible";
    link.style.visibility="hidden";

    i--;
    countdown.innerHTML= i;
    time = setTimeout ("MyFunction3();",1000);

    if (i < 1) {
        countdown.innerHTML="";
        document.getElementById("imageoef").style.visibility="hidden";
        link.style.visibility="visible";
    }
}

InformationsquelleAutor New Developer

0

Der code nicht funktioniert, weil es setzt die countdown div ' s innerHTML", aber der link war drin, div, so wird gelöscht und Sie können nicht dann Sie wieder, indem Sie nur Ihre Sichtbarkeit. Man könnte es beheben indem man den link außerhalb des div im HTML ist.
```
<img src="images/loading.gif" alt="Loading..." id="imageoef" style="visibility:hidden"
/>
<form method="post">
  <input id="myInput" type="button" value="start download" />
</form>
<div id="countdown"> 
</div><a id="link" href="http://freelanceswitch.com/freelance-freedom/freelance-freedom-2/">Your download is ready!</a>
```
Während ich an es ich verändert dein script ein bisschen... (jsfiddle)
```
var i = 10,
  time;
function E(id) {return document.getElementById(id) }
E('myInput').onclick = function () {
  E('imageoef').style.visibility = 'visible';
  E('link').style.visibility = 'hidden';
  time = setInterval(function () {
    i--;
    E('countdown').innerHTML = i;
    if (i < 1) {
      clearInterval(time);
      E('countdown').innerHTML = '';
      E('imageoef').style.visibility = 'hidden';
      E('link').style.visibility = 'visible';
    }
  }, 1000);
}
```
Eigentlich die anderen änderungen sind alle nicht wesentlich, aber einige Erklärungen sowieso:
- Sie idealerweise möchten, 2 Funktionen, nicht nur 1 - das erste auslösen der countdown und die zweite für jedes mal, wenn der Zähler abnimmt
- setInterval ist mehr als nützlich setTimeout hier, wie es wiederholt sich automatisch, und Sie brauchen nicht zu halten-Einstellung, aber Sie müssen dann zu verwenden clearInterval um den timer zu stoppen. In deinem original-code, den Sie Taten nichts, um den timer zu stoppen, so würde es nur tragen, auf unbestimmte Zeit (aber mit den Effekten versteckt).
- Ich bevorzugt, um onclick in javascript, anstatt eine onclick Attribut des html-Tags. Aber deine ursprüngliche Methode funktioniert.
(Hier ist dein original-code nur mit den notwendigen änderungen, damit es funktioniert.)

InformationsquelleAutor Stuart

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.