Wie kann ich eine 10-Sekunden-countdown timer-bevor Sie einen download-button-link angezeigt wird?

Auf eine download-Seite, ich möchte es so haben, dass wenn die Seite geladen wird, eine 10-Sekunden-timer beginnt automatisch. Auf der Seite möchte ich etwas text, um etwas zu sagen wie "Sie beginnen können Sie Ihre download in 10 Sekunden...", Dann, nachdem die Zeit abgelaufen ist, wird ein download-button angezeigt wird, für die Menschen zu klicken Sie auf und beginnen Sie Ihre download.

Wie mache ich das und welchen code muss ich verwenden, schließen Sie ihn in eine Seite?

Warum würden Sie dies tun?
Wallace: MegaUpload Art der Sache, nehme ich an.
Ich will zu überwachen und zu verhindern, dass hotlinking. Auch einige Dateien gehen zu groß, so dass ich möchte, dass die Leute warten, bevor Sie die Dateien herunterladen kann... damit es nicht Einfluss auf mein server.
Sicherlich hat diese Frage schon beantwortet, bevor Sie.
Es hätte sein können, aber ich sah überall und konnte nichts finden.

InformationsquelleAutor Omar | 2011-05-26

9

Finden Sie unter: http://jsfiddle.net/rATW7/

Es ist rückwärts-kompatibel und nicht so sicher, aber 10 Sekunden ist nicht viel sorgen zu machen sowieso.

nicht so sicher, auf welche Weise?
Jeder kann überprüfen, die Quelle und den download-link bekommen, ohne warten Sie 10 Sekunden.
Bist du wirklich 13 minitech? Bravo auf Ihre Programmierkenntnisse (+1) so jung sind, werden Sie weit gehen 🙂
Wenn Sie wirklich wollten, um sicher zu sein, würden Sie implementieren müssen, um server-seitige Validierung zu, und das ist nur der Aufwand für einen 10-Sekunden-warten-IMO. Auch ist es nicht intuitiv Menschen das surfen ohne JavaScript. Zum Glück, es wird tatsächlich nehmen Menschen, die über 10 Sekunden zu ändern und umgehen das Skript, so dass es nicht Sache sowieso.
Yup! Vielen Dank 🙂

InformationsquelleAutor Ry-

Können Sie setInterval() um dies zu tun.

Beachten Sie, dass stellen Sie sicher, dass die countdownElement hat einen vorhandenen text-Knoten, werden alle whitespace-Zeichen. Wenn Sie nicht garantieren können, dass, nutzen Sie einfach innerHTML oder innerText/textContent.

window.onload = function() {
    var countdownElement = document.getElementById('countdown'),
        downloadButton = document.getElementById('download'),
        seconds = 10,
        second = 0,
        interval;

    downloadButton.style.display = 'none';

    interval = setInterval(function() {
        countdownElement.firstChild.data = 'You can start your download in ' + (seconds - second) + ' seconds';
        if (second >= seconds) {
            downloadButton.style.display = 'block';
            clearInterval(interval);
        }

        second++;
    }, 1000);
}

jsFiddle.

Ich bin nicht allzu vertraut mit php also ich bin mir nicht sicher, was du meinst mit dem countdown-element.
Die Geige ist möglicherweise leichter zu verstehen. Es ist kein PHP in meiner Antwort.

InformationsquelleAutor alex

3

Niemand könne gewährleisten, dass Ihre Intervalle sind genauer, vor allem, wenn der Reiter (oder browser) ist inaktiv (siehe z.B. dieser Beitrag), so ist es besser, sich auf die Zeit Unterschied statt counter:
```
var sTime = new Date().getTime();
var countDown = 30;

function UpdateTime() {
    var cTime = new Date().getTime();
    var diff = cTime - sTime;
    var seconds = countDown - Math.floor(diff / 1000);
    //show seconds
}
UpdateTime();
var counter = setInterval(UpdateTime, 500);
```
Den arbeiten Geige

Ich lieferte eine Alternative Antwort, die eine änderung Ihrer Fiddle-Lösung, die verwendet kein JQuery und arbeiten mit Stunden.

InformationsquelleAutor Yuriy Silvestrov

Einer änderung der Geige zur Verfügung gestellt von Yuriy, die NICHT JQuery verwenden, und arbeitet mit den Stunden, wenn die Anzahl der Sekunden, die groß genug sind.

<div id="countdowntimertxt" class="countdowntimer">00:00:00</div>

    <script type="text/javascript">
    var sTime = new Date().getTime();
    var countDown = 3700; //Number of seconds to count down from.        

    function UpdateCountDownTime() {
        var cTime = new Date().getTime();
        var diff = cTime - sTime;
        var timeStr = '';
        var seconds = countDown - Math.floor(diff / 1000);
        if (seconds >= 0) {
            var hours = Math.floor(seconds / 3600);
            var minutes = Math.floor( (seconds-(hours*3600)) / 60);
            seconds -= (hours*3600) + (minutes*60);
            if( hours < 10 ){
                timeStr = "0" + hours;
            }else{
                timeStr = hours;
            }
            if( minutes < 10 ){
                timeStr = timeStr + ":0" + minutes;
            }else{
                timeStr = timeStr + ":" + minutes;
            }
            if( seconds < 10){
                timeStr = timeStr + ":0" + seconds;
            }else{
                timeStr = timeStr + ":" + seconds;
            }
            document.getElementById("countdowntimertxt").innerHTML = timeStr;
        }else{
            document.getElementById("countdowntimertxt").style.display="none";
            clearInterval(counter);
        }
    }
    UpdateCountDownTime();
    var counter = setInterval(UpdateCountDownTime, 500);
    </script>

InformationsquelleAutor Sherri

1

War ich schriftlich eine Antwort mit dem code, aber alex ' s Antwort ist besser als meine quick & dirty Lösung.

Berücksichtigen, dass, wenn Sie wollen, etwas zu tun, was Rapidshare und andere tun, Sie generieren den link auf der server-Seite, und rufen Sie es mit AJAX, ansonsten ist das einzige, was wer will, um den download sofort zu tun braucht, ist, dass der Quellcode der Seite 😉

InformationsquelleAutor AlvaroGMJ
0

Dies ist sehr einfach, ja du kannst es sehr leicht. Hier ist der live link,, wo finden Sie die codding für countdown-timer , bevor der download-link erscheint : http://www.makingdifferent.com/make-countdown-timer-download-button-link-appears/

Prost !!

InformationsquelleAutor Nitin Maheta

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.