2013-05-13 11 views
7

używam następujący skrypt w nagłówku, aby odświeżyć stronęJavaScript odświeżania + odliczanie tekst

<script type="text/JavaScript"> 
<!-- 
function timedRefresh(timeoutPeriod) { 
    setTimeout("location.reload(true);",timeoutPeriod); 
} 
// --> 
</script> 

a w tagu ciała

<body onload="JavaScript:timedRefresh(5000);"> 

Moje pytanie brzmi jak mogę dodać prezentowania tekstu odliczanie, aby odświeżyć stronę

x sekund, aby odświeżyć

+0

Co próbowaliście? Wyszukaj w Internecie "odliczanie javascript", jest tak wiele przykładów ... – Bergi

Odpowiedz

17

Czy ta su to twoje potrzeby?

(function countdown(remaining) { 
    if(remaining <= 0) 
     location.reload(true); 
    document.getElementById('countdown').innerHTML = remaining; 
    setTimeout(function(){ countdown(remaining - 1); }, 1000); 
})(5); // 5 seconds 

JSFiddle

+0

to wydaje się działać w skrzypcach, ale kiedy dodałem go do mojej strony, to nawet nie pokazuje tekstu ani nie odświeża, –

+0

http://uelhub.com/fingerprinting/tutaj jest –

+0

Próbowałem głowy i ciała –

1

Trzeba uruchomić limit czasu każda sekunda, zaktualizuj DOM i tylko przeładować kiedy trzeba:

<script type="text/JavaScript"> 
<!-- 
var i = 5000; 
function timedRefresh(timeoutPeriod) { 
    i = timeoutPeriod; 
    updateDom(); 
} 
// --> 

function updateDom(){ 
    body.innerHTML = i; 
    i--; 
    if (i==0){ 
     location.reload(true); 
    } 
    else{ 
     setTimeout(updateDom, 1000); 
    } 
} 
// --> 
</script> 
6

Working fiddle

function timedRefresh(timeoutPeriod) { 
    var timer = setInterval(function() { 
    if (timeoutPeriod > 0) { 
     timeoutPeriod -= 1; 
     document.body.innerHTML = timeoutPeriod + ".." + "<br />"; 
     // or 
     document.getElementById("countdown").innerHTML = timeoutPeriod + ".." + "<br />"; 
    } else { 
     clearInterval(timer); 
      window.location.href = window.location.href; 
     }; 
    }, 1000); 
}; 
timedRefresh(10); 

I tak naprawdę nie rozumiem, dlaczego w tym celu używałbyś setTimeout.

+0

dzięki, ale może pokazać je na jednej linii tylko: P –

+0

prawie działa, ale ukrywa zawartość strony, podczas gdy zacznie odliczać, mają http wygląd://uelhub.com/fingerprinting/ –

+0

Wydaje mi się, że jest to lepsze rozwiązanie niż wielokrotne przeładowywanie. –

5

Wiem, że to pytanie zostało już odebrane jakiś czas temu, ale szukałem podobnego kodu, ale z dłuższym odstępem (minut). To nie pojawiały się w wynikach wyszukiwania tak zrobiłem to co wymyśliłem i pomyślałem, że podzielę:

Working fiddle

Javascript

function checklength(i) { 
    'use strict'; 
    if (i < 10) { 
     i = "0" + i; 
    } 
    return i; 
} 

var minutes, seconds, count, counter, timer; 
count = 601; //seconds 
counter = setInterval(timer, 1000); 

function timer() { 
    'use strict'; 
    count = count - 1; 
    minutes = checklength(Math.floor(count/60)); 
    seconds = checklength(count - minutes * 60); 
    if (count < 0) { 
     clearInterval(counter); 
     return; 
    } 
    document.getElementById("timer").innerHTML = 'Next refresh in ' + minutes + ':' + seconds + ' '; 
    if (count === 0) { 
     location.reload(); 
    } 
} 

HTML

<span id="timer"></span>