web-dev-qa-db-ja.com

ダウンロードボタンのリンクが表示される前に、10秒のカウントダウンタイマーを作成するにはどうすればよいですか？

ダウンロードページで、ページが読み込まれると10秒のタイマーが自動的に開始するようにしたいと思います。このページに、「10秒でダウンロードを開始できます...」などのテキストが表示されます。時間が経過すると、ダウンロードボタンが表示され、クリックしてダウンロードを開始できます。

これを行うにはどうすればよいですか？また、ページに含めるためにどのコードを使用しますか？

javascripttimerdownloadcountdown
7
Omar

参照： http://jsfiddle.net/rATW7/

下位互換性があり、それほど安全ではありませんが、とにかく10秒はそれほど心配する必要はありません。

10
Ry-

これを行うには、setInterval()を使用できます。

countdownElementに既存のテキストノードがあることを確認してください。これは任意の空白にすることができます。それを保証できない場合は、innerHTMLまたは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 。

7
alex

JQueryを使用しないYuriyによって提供されるFiddleの変更であり、秒数が十分に大きい場合は時間でも機能します。

<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>
3
Sherri

特にタブ（またはブラウザ）が非アクティブの場合（たとえば この投稿 を参照）、間隔が正確であることを誰も保証できません。したがって、カウンタではなく時差に依存することをお勧めします。

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);

作業フィドル

3
Yuriy Silvestrov

私はコードを使って返信を書いていましたが、alexの返信は私の迅速で汚い解決策よりも優れています。

Rapidshareや他の人がするようなことをしたい場合は、サーバー側でリンクを生成し、AJAXでそれを取得する必要があることを考慮に入れてください。そうしないと、ダウンロードをすぐに取得したい人は、次のことを行う必要があります。あなたのページのソースコードを見てください;-)

1
AlvaroGMJ

これは非常に簡単です、はい、あなたはそれを非常に簡単に作ることができます。ダウンロードリンクが表示される前に、カウントダウンタイマーを作成するためのコーディングを見つけることができるライブリンクは次のとおりです： http://www.makingdifferent.com/make-countdown-timer-download-button-link-appears/

乾杯!!

0
Nitin Maheta