Am un set de mai multe divuri generate dinamic. Îmi trebuie un script care să le arate pe rând, câte 20-30 de secunde, fără posibilitatea de a reveni la un div anterior. Nu există nici o altă condiţionare, doar să le arate pe rând.
19 comments to “[Offtopic]Am nevoie de un javascript care să arate/ascundă câteva divuri”
foloseste setTimeout si document.getElementById
function showNext()
{
document.getElementById(„idDiv1”).style.display=’none’;
setTimeout(showNext, 20000);
}
document.load = function() { setTimeout(showNext, 20000)};
Daca folosesti un js framework, gen jQuery, lucrurile se simplifica….
Mersi. În linii mari bricolasem şi eu partea asta, fiindcă am găsit mai multe scripturi de show/hide div. Dar cum îl fac să itereze printre divuri? Ar trebui cumva să dau la toate display.none şi apoi un for i=1 to i=N, i=i+1… Logica o ştiu dar nu cunosc sintaxa.
Pot să folosesc şi Jquery.
var divIDs = [„div1ID”,”div2ID”];
var currIdx = -1;
function showNext()
{
if(currIdx >= 0)
document.getElementById(divIDs[currIdx]).style.display=’none’;
currIdx++;
if(currIdx >= divIDs.length -1) //end of collection, start over
currIdx = 0;
document.getElementById(divIDs[currIdx]).style.display=’block’;
setTimeout(showNext, 20000);
}
document.load = function() { setTimeout(showNext, 20000)};
//ar trebui sa mearga, nu am testat cod-ul.
//Algoritm-ul cam asta ar fi: div-urile initial ascunse. In primul pas, nu ai ce ascunde. Afisezi div-ul de la poz 0.
//La urmatorul pas, ascunzi div-ul de la poz 0 si-l afisezi pe cel de la poz 1.
// La ultimul pas, acunzi ultimul div din colectia, si il afisezi pe cel de la poz 0.
Am ajuns la varianta:
var i = 1;
function showNext()
{
if(i >= 1)
document.getElementById(‘div’+i).style.display = ‘none’;
i++;
document.getElementById(‘div’+i).style.display=’block’;
setTimeout(showNext, 20000);
}
window.onload = function() { setTimeout(showNext, 20000)};
Merge, dar iniţial mi le arată pe toate, în loc să-mi arate doar primul div. După aceea merge OK. Dacă pun la divuri display:none, nu mai mi le arată deloc şi nici nu merge scriptul.
1. pentru teste, pune intervalul mai mic de 20 sec, sa nu astepti sa vezi daca merge sau nu.
2. cand scrii div-urile din PHP, pune-l pe primul cu style=”display:block”, iar pe urmatoarele cu style=”display:none”. Ar trebui sa mearga fara sa-ti mai bati capu cu debug.
Dacă îl pun pe primul cu display:block, rămâne vizibil tot timpul, nu se ascunde. Dacă le pun pe toate display:none, prima dată nu-mi afişează nimic, după aceea încep să curgă corect. Există vreo modalitate să „scriu” pe ecran countdownul până la următorul refresh?
Am reuşit să combin două scripturi şi să fac şi countdown. Cum fac acum să reiniţializez scriptul de countdown de fiecare dată când schimb divul?
var i = 0;
function showNext()
{
if(i >= 1)
document.getElementById(‘div’+i).style.display = ‘none’;
i++;
document.getElementById(‘div’+i).style.display=’block’;
setTimeout(showNext, 20000);
javascript_countdown.init(20, ‘javascript_countdown_time’);
}
window.onload = function() {
setTimeout(showNext, 20000)
};
var javascript_countdown = function () {
var time_left = 10; //number of seconds for countdown
var output_element_id = ‘javascript_countdown_time’;
var keep_counting = 1;
var no_time_left_message = ‘No time left for JavaScript countdown!’;
function countdown() {
if(time_left < 2) {
keep_counting = 0;
}
time_left = time_left – 1;
}
function add_leading_zero(n) {
if(n.toString().length < 2) {
return '0' + n;
} else {
return n;
}
}
function format_output() {
var hours, minutes, seconds;
seconds = time_left % 60;
minutes = Math.floor(time_left / 60) % 60;
hours = Math.floor(time_left / 3600);
seconds = add_leading_zero( seconds );
minutes = add_leading_zero( minutes );
hours = add_leading_zero( hours );
return hours + ':' + minutes + ':' + seconds;
}
function show_time_left() {
document.getElementById(output_element_id).innerHTML = format_output();//time_left;
}
function no_time_left() {
document.getElementById(output_element_id).innerHTML = no_time_left_message;
}
return {
count: function () {
countdown();
show_time_left();
},
timer: function () {
javascript_countdown.count();
if(keep_counting) {
setTimeout("javascript_countdown.timer();", 1000);
} else {
no_time_left();
}
},
//Kristian Messer requested recalculation of time that is left
setTimeLeft: function (t) {
time_left = t;
if(keep_counting == 0) {
javascript_countdown.timer();
}
},
init: function (t, element_id) {
time_left = t;
output_element_id = element_id;
javascript_countdown.timer();
}
};
}();
//time to countdown in seconds, and element ID
poti sa-mi dai adresa paginii cu care te joci? Cred c-ar fi mai usor sa ma uit si sa-mi dau cu parerea
la faza cu countdown, mai faci un setTimeout la 1 secunda care modifica nr dintr-un div(20-elapsed). La schimbare, pui elapsed pe 0.
sciptul tau de countdown e super complicat…
var totalTime = 20; //aici pune interval-ul, din codul de mai sus e 20 sec
var elapsedTimes = 0;
function countDown()
{
document.getElementById(„javascript_countdown_time”).innerHTML = (totalTime – elapsedTime) + ” s”;
elapsedTimes++;
}
document.load = function() { setTimeout(countDown, 1000); };
//nu uita sa resetezi elapsedTime la 0 pe schimbarea div-ului
Problema la versiunea prescurtată este că nu face numătrătoarea inversă şi pe mine asta mă interesează să-i arăt.
inversa o face, cristian.
pasii sunt:
20-0
20-1
20-2
20-3
…
Asta am înţeles din cod că ar trebui să facă, dar în realitate nu merge, rămâne doar afişat „Au mai rămas 20 de secunde”, nu se actualizează. E posibil să fie ceva de la browser?
🙂 shit. am un bug. am uitat sa pun un setTimeout in countDown, si rula o sg data:
function countDown()
{
document.getElementById(“javascript_countdown_time”).innerHTML = (totalTime – elapsedTime) + ” s”;
elapsedTimes++;
setTimeout(countDown, 1000);
}
Bingo.
Mai am 3 chestii de reparat.
1) Nu ştiu cum să o reiniţiez la schimbarea divurilor ca să reseteze counterul.
2) Nu ştiu cum să fac să arate primul div. Acum merge o dată „în gol”, după care arată primul div.
3) Să-l opresc când se termină divurile.
PS Nu este o chestie online, este o aplicaţie intranet, veche antică şi de demult – aplicaţia este scrisă în 2003 :)).
1) elapsedTimes = 0; document.getElementById(“javascript_countdown_time”).innerHTML = totalTime ” s”; //asta e ptr un eventual delay, de < 1s. daca ti se pare OK primul rand, e bine.
2) aici tre debug, foloseste mozilla si firebug. Te va ajuta mult 🙂
3) pune in showNext, la prima linie:
if(!document.getElementById(‘div’+i))
return; //end of divs.
btw, daca nu iti iese 2), fa un paste cu JS-ul si HTML-ul cu div-urile.
Am trimis mail.
1 şi 2 nu am rezolvat, 3 merge.
jQuery version. Trebuie decomentate cele 2 linii ca sa NU cicleze de la inceput.
jsfiddle.net/nxXSP
Mersi, rezolvasem cu ajutorul lui Raul, elegantă şi varianta asta, am salvat-o.