Hogyan tudnék egy "Real-Time" visszaszámlálót csinálni?
Szóval, ha írok egy js scriptet ami elkezd 15től 0ig visszaszámolni és addig csökkenti egy elemnek a szélességét, ez mind szép és jó, csak ott a hiba, hogy ez mindig lefut ha felmegy az oldalra.
Hogyan lehetne azt megcsinálni, hogy ha elkezdi az idő 13 másodpercnél van és fellép valaki akkor innen fojtatódik? + Azt meglehet csinálni hogy felhasználó nélkül is fut a kód? szóval 15től 0ug elmegy vár 5mp-et és újraindul?
válasza:<script>
var countdown = setInterval(
function(){
var date = new Date();
document.getElementById('countdown').innerHTML = (Math.max(15-date.getSeconds()%20,0));
},1000
);
</script>
<div id="countdown">
</div>
válasza:
válasza: válasza:Ez a timer onnan folytatódik, ahol járt amikor bezárták az oldalt.
A kliensen menti el a timer állapotát cookie-ban.
Ha biztonságosabban akarod megoldani, akkor a szerverre kell elmenteni a timer állapotát, és a felhasználó azonosítóját PHP-vel és Ajax-xal.
<!DOCTYPE html>
<html>
<head>
<script>
g_countdown = 0;
//exdays - When will the cookie expire. (in days)
function setCookie(cname,cvalue,exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires=" + d.toGMTString();
document.cookie = cname.toString() + "=" + cvalue.toString() + ";" + expires + ";path=/";
}
function getCookie(cname) {
var name = cname + "=";
var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.split(';');
for(var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
function checkCookie() {
var l_last_countdown_str = getCookie("last_countdown");
if (l_last_countdown_str != "") {
g_countdown =
parseInt(l_last_countdown_str);
}
var countdowntimer = setInterval(
function(){
if ((g_countdown >= 0) && (g_countdown <= 15)) {
// Counting from 0 to 15.
document.getElementById('countdown').innerHTML = g_countdown.toString();
} else {
// Wait 5 seconds
document.getElementById('countdown').innerHTML = "Wait...";
}
setCookie("last_countdown", g_countdown.toString(), 2); // The cookie will expire in 2 days.
g_countdown += 1;
if (g_countdown >= 21) {
// Restart timer
g_countdown = 0;
}
},1000
);
}
</script>
</head>
<body onload="checkCookie()">
<div id="countdown">
</div>
</body>
</html>
válasza:Nincs ehhez szükség a szerveroldalra, sütiben, vagy a local storage-ben el lehet menteni az állapotot, vagy a kezdés időpontját és lehet azzal dolgozni.
A setInterval függvény segítségével lehet periodikus végrehajtást indítani, amelyet clearInterval segítségével lehet megállítani. A setTimeout szintén hasznos lehet, hogy pontosan öt másodperc elteltével újraindítsd a számlálót.
Pontos megoldást nem szeretnék közreadni, egyrészt mert már elegendő mértékben megtették mások, másrészt pedig magad is jobban jársz, ha te is gondolkodsz egy kicsit rajta.
Kapcsolódó kérdések:
Minden jog fenntartva © 2024, www.gyakorikerdesek.hu
GYIK | Szabályzat | Jogi nyilatkozat | Adatvédelem | Cookie beállítások | WebMinute Kft. | Facebook | Kapcsolat: info(kukac)gyakorikerdesek.hu
Ha kifogással szeretne élni valamely tartalommal kapcsolatban, kérjük jelezze e-mailes elérhetőségünkön!