Oprava časování – JavaScript, AJAX, jQuery – Fórum – Programujte.com

Ahoj všem, mám tento script a nevím si s tím rady zobrazuje se mi každý den jeden obrázek bohužel tuším že u 7 obrázku mi to skončí a jede znova první obrázek. potřeboval bych přenastavit aby se spustily všechny obrázky a stále dokola.

<script type="text/javascript"><!--
   var n = 21;
var imlocation = "/";
 function ImageArray (n) {
   this.length = n;
   for (var i =0; i < n; i++) {
     this[i] = ' '
   }
 }
image = new ImageArray(21);
image[0] = 'obrazek1.png';
image[1] = 'obrazek2.png';
image[2] = 'obrazek3.png';
image[3] = 'obrazek4.png';
image[4] = 'obrazek5.png';
image[5] = 'obrazek6.png';
image[6] = 'obrazek7.png';
image[7] = 'obrazek8.png';
image[8] = 'obrazek9.png';
image[9] = 'obrazek10.png';
image[10] = 'obrazek11.png';
image[11] = 'obrazek12.png';
image[12] = 'obrazek13.png';
image[13] = 'obrazek14.png';
image[14] = 'obrazek15.png';
image[15] = 'obrazek16.png';
image[16] = 'obrazek17.png';
image[17] = 'obrazek18.png';
image[18] = 'obrazek19.png';
image[19] = 'obrazek20.png';
image[20] = 'obrazek21.png';
image[21] = 'obrazek22.png';
var currentdate = new Date();
var imagenumber = currentdate.getDay();
document.write('<img src="' + imlocation + image[imagenumber] + '">');
//--></script>

Všem předem děkuji za pomoc

zrejme ti getDay() dava poradove cislo dna v tyzdni ... ci ?

Zasláno z mobilního telefonu.

#2 vladusko
ano kazdy den se zmení fotka bohužel jen do 7 obrazku

<script type="text/javascript"><!--
   var n = 21;
var imlocation = "/";
 function ImageArray (n) {
   this.length = n;
   for (var i =0; i < n; i++) {
     this[i] = ' '
   }
 }
image = new ImageArray(21);
image[0] = 'obrazek1.png';
image[1] = 'obrazek2.png';
image[2] = 'obrazek3.png';
image[3] = 'obrazek4.png';
image[4] = 'obrazek5.png';
image[5] = 'obrazek6.png';
image[6] = 'obrazek7.png';
image[7] = 'obrazek8.png';
image[8] = 'obrazek9.png';
image[9] = 'obrazek10.png';
image[10] = 'obrazek11.png';
image[11] = 'obrazek12.png';
image[12] = 'obrazek13.png';
image[13] = 'obrazek14.png';
image[14] = 'obrazek15.png';
image[15] = 'obrazek16.png';
image[16] = 'obrazek17.png';
image[17] = 'obrazek18.png';
image[18] = 'obrazek19.png';
image[19] = 'obrazek20.png';
image[20] = 'obrazek21.png';
image[21] = 'obrazek22.png';
var currentdate = new Date();
var imagenumber = currentdate.getDay();
document.write('<img src="' + imlocation + image[imagenumber] + '">');
//--></script>

#3 Jirka
vladusko se ti snazil naznacit, ze getDay() vraci  0-6  nedele=0 ... sobota=6, proto mas jen 7 obrazku

už jsem to pochopil a můžete mi poradit jak to opravit aby se mi zobrazovalo všech 22 obrázků (každý den jeden) a poté od znova?

bude stačit když umažu var imagenumber = currentdate.getDay();?

<script type="text/javascript"><!--
   var n = 21;
var imlocation = "/";
 function ImageArray (n) {
   this.length = n;
   for (var i =0; i < n; i++) {
     this[i] = ' '
   }
 }
image = new ImageArray(21);
image[0] = 'obrazek1.png';
image[1] = 'obrazek2.png';
image[2] = 'obrazek3.png';
image[3] = 'obrazek4.png';
image[4] = 'obrazek5.png';
image[5] = 'obrazek6.png';
image[6] = 'obrazek7.png';
image[7] = 'obrazek8.png';
image[8] = 'obrazek9.png';
image[9] = 'obrazek10.png';
image[10] = 'obrazek11.png';
image[11] = 'obrazek12.png';
image[12] = 'obrazek13.png';
image[13] = 'obrazek14.png';
image[14] = 'obrazek15.png';
image[15] = 'obrazek16.png';
image[16] = 'obrazek17.png';
image[17] = 'obrazek18.png';
image[18] = 'obrazek19.png';
image[19] = 'obrazek20.png';
image[20] = 'obrazek21.png';
image[21] = 'obrazek22.png';
var currentdate = new Date();
document.write('<img src="' + imlocation + image[imagenumber] + '">');
//--></script>

nic neumaz. namiesto getDay() pouzi getDate(). to ti vrati cislo z intervalu 1 - 31 teda poradove cislo dna v mesiaci

Zasláno z mobilního telefonu.

#7 vladusko
a co se stane když mám 21 obrázků, 22 dne se zobrazí opět obrázek číslo 1?

no to uz musis poriesit. najjednoduchsie pridat obrazky do 31. ale neviem k comu to sluzi tak len strielam

Zasláno z mobilního telefonu.

#8 Jirka
Pokud budeš mít 31 obrázků, jak píše vladusko, pak problém vyřešíš, pokud jich chceš jenom 21, pak je třeba k problému přistoupit úplně jinak.

Napadá mě mít soubor, v němž budeš mít uloženej aktuální index, který se má načíst, každý den v určitou dobu, třeba 5 minut po půlnoci, spustíš CRON, který daný soubor otevře, zjistí, jaký index se v něm nachází, pokud daný index bude menší než 20, tak k danému indexu přičte 1, pokud získaný index bude 20, tak se nastaví zpátky na nulu.

Index bys pak volal na základě toho, co z daného souboru získáš. Myslím si, že pomocí JS budeš tento problém řešit zbytečně obtížně.

BTW: Pole jsou číslovány od nuly, nicméně i nultý prvek je stále prvek, pokud máš teda pole o 21 elementech, na 21. indexu již nic nebude, budeš mít indexy pouze 0 - 20.

#9 vladusko
no mám 21 obrázků a každý den se zobrazí jeden obrázek na 24 hodin a stále dokola taková je představa

<script type="text/javascript"><!--
   var n = 8;
var imlocation = "/";
 function ImageArray (n) {
   this.length = n;
   for (var i =0; i < n; i++) {
     this[i] = ' '
   }
 }
image = new ImageArray(8);
image[0] = 'obrazek1.png';
image[1] = 'obrazek2.png';
image[2] = 'obrazek3.png';
image[3] = 'obrazek4.png';
image[4] = 'obrazek5.png';
image[5] = 'obrazek6.png';
image[6] = 'obrazek7.png';
image[7] = 'obrazek8.png';
image[8] = 'obrazek9.png';
var currentdate = new Date();
var imagenumber = currentdate.getDate();
document.write('<img src="' + imlocation + image[imagenumber] + '">');
//--></script>

Nastavil jsem to takto zobrazuje se obrázek9 takže zítra už budu vědět zda se to přehoupne na obrázek1

#12 Jirka
Ne, nepřehoupne. Vyprdni se na JS a podívej se na ten CRON, jak jsem psal.

Celej ten kód máš bohužel úplně špatně napsanej.

#13 ondrej39
no to bude tím že tomu vůbec nerozumím :(

vyskúšaj: 

var currentdate = new Date();
var imagenumber = Math.round(currentdate.getTime() / (1000*60*60*24))%9;

Dúfam, že som chybu neurobil, idem to ešte vyskúšať.

Sorry, pri písaní predošlého príspevku som klikol na zlé tlačítko "Odpovedať". Už som to z tade vyhodil.
Ten môj kód vyzerá, že funguje, nefunguje len presne o pol noci (jednu milisekundu). To sa dá napraviť jednoducho:
 

var currentdate = new Date();
var imagenumber = Math.round((currentdate.getTime()+1) / (1000*60*60*24))%9;

#16 lukas.balaz
 

EDIT: Nevermind, přehlídl jsem se, jsem blbej.

#17 ondrej39
Kde tam vidíš delenie nulou ??
Skúšal som ten kód, funguje docela dobre.

#18 lukas.balaz
Nikde, jsem se přehlídl.

#18 lukas.balaz
tak to testuji, je správně že se zobrazuje obrázek6?

Jinak moc děkuji :)

#18 lukas.balaz
Luke, jinak ten kód dobře asi nejede. Pokud vím, GetTime ti vrátí čas od roku 1970 v milisekundách, když k němu přičteš počet milisekund do zítřka ( 84 000 000 ), tak mně ukáže index 1 (pokud by dnes měl ukázat 8, zítra by měl ukázat 0), když přičtu dalších 84 mega, ukáže mi index 4.

 #21 ondrej39

var currentdate = new Date();

var imagenumber = Math.round((currentdate.getTime()+1) / (1000*60*60*24))%9;
console.log(imagenumber); //vypise 5, takze presne ako Jirka hovoril, mal by sa zobrazit 6. obrazok

var imagenumber = Math.round((currentdate.getTime()+1+(1000*60*60*24)) / (1000*60*60*24))%9;
console.log(imagenumber); //vypise 6 

var imagenumber = Math.round((currentdate.getTime()+1+(4*(1000*60*60*24))) / (1000*60*60*24))%9;
console.log(imagenumber); //vypise 0

Cez čo to testuješ ??

#22 lukas.balaz
Normálně ve vývojové konzoli Firefoxu.

#23 ondrej39
OK, tak daj presný kód, ktorým si to testoval, ako som dal ja.

#24 lukas.balaz
Tak jsem to otestoval ještě jednou, ale přidal jsem závorky, už to opravdu jede tak, jak jsi zamýšlel.

Dobrá práce. :)

#22 lukas.balaz

Záměr:

Mám 21 obrázků a každý den se zobrazí jeden obrázek na 24 hodin po uplynutí 21 dní se objeví znovu obrázek1 a tak stále dokola taková je představa.

viz můj špatný kód:

<script type="text/javascript"><!--
   var n = 21;
var imlocation = "/";
 function ImageArray (n) {
   this.length = n;
   for (var i =0; i < n; i++) {
     this[i] = ' '
   }
 }
image = new ImageArray(21);
image[0] = 'obrazek1.png';
image[1] = 'obrazek2.png';
image[2] = 'obrazek3.png';
image[3] = 'obrazek4.png';
image[4] = 'obrazek5.png';
image[5] = 'obrazek6.png';
image[6] = 'obrazek7.png';
image[7] = 'obrazek8.png';
image[8] = 'obrazek9.png';
image[9] = 'obrazek10.png';
image[10] = 'obrazek11.png';
image[11] = 'obrazek12.png';
image[12] = 'obrazek13.png';
image[13] = 'obrazek14.png';
image[14] = 'obrazek15.png';
image[15] = 'obrazek16.png';
image[16] = 'obrazek17.png';
image[17] = 'obrazek18.png';
image[18] = 'obrazek19.png';
image[19] = 'obrazek20.png';
image[20] = 'obrazek21.png';
image[21] = 'obrazek22.png';
var currentdate = new Date();
var imagenumber = currentdate.getDay();
document.write('<img src="' + imlocation + image[imagenumber] + '">');
//--></script>

 --------------------------------------------------------------------------------------------------------------------------------------

var currentdate = new Date();

var imagenumber = Math.round((currentdate.getTime()+1) / (1000*60*60*24))%9;
console.log(imagenumber); //vypise 5, takze presne ako Jirka hovoril, mal by sa zobrazit 6. obrazok

var imagenumber = Math.round((currentdate.getTime()+1+(1000*60*60*24)) / (1000*60*60*24))%9;
console.log(imagenumber); //vypise 6 

var imagenumber = Math.round((currentdate.getTime()+1+(4*(1000*60*60*24))) / (1000*60*60*24))%9;
console.log(imagenumber); //vypise 0

prosím tě který z těch kódů mám použít 1, 2, nebo třetí?

popřípadě přidělám ještě další obrázky a bude jich celkem 31 jak bude vypadat kód aby se stále točily po jednom dokola? 

Bude kód vypadat takto:

<script type="text/javascript"><!--
   var n = 30;
var imlocation = "/";
 function ImageArray (n) {
   this.length = n;
   for (var i =0; i < n; i++) {
     this[i] = ' '
   }
 }
image = new ImageArray(30);
image[0] = 'obrazek1.png';
image[1] = 'obrazek2.png';
image[2] = 'obrazek3.png';
image[3] = 'obrazek4.png';
image[4] = 'obrazek5.png';
image[5] = 'obrazek6.png';
image[6] = 'obrazek7.png';
image[7] = 'obrazek8.png';
image[8] = 'obrazek9.png';
image[9] = 'obrazek10.png';
image[10] = 'obrazek11.png';
image[11] = 'obrazek12.png';
image[12] = 'obrazek13.png';
image[13] = 'obrazek14.png';
image[14] = 'obrazek15.png';
image[15] = 'obrazek16.png';
image[16] = 'obrazek17.png';
image[17] = 'obrazek18.png';
image[18] = 'obrazek19.png';
image[19] = 'obrazek20.png';
image[20] = 'obrazek21.png';
image[21] = 'obrazek22.png';
image[22] = 'obrazek23.png';
image[23] = 'obrazek24.png';
image[24] = 'obrazek25.png';
image[25] = 'obrazek26.png';
image[26] = 'obrazek27.png';
image[27] = 'obrazek28.png';
image[28] = 'obrazek29.png';
image[29] = 'obrazek30.png';
image[30] = 'obrazek31.png';
var currentdate = new Date();
var imagenumber = currentdate.getDate();
document.write('<img src="' + imlocation + image[imagenumber] + '">');
//--></script>

#27 Jirka
Máš použiť:
 

var currentdate = new Date();
var imagescount = 9;
var imagenumber = Math.round((currentdate.getTime()+1) / (1000*60*60*24))%imagescount;

Do imagescount (dúfam že je to anglicky správne :D ) si len zapíš počet obrázkov.

A teda samozrejme počet obrázkov je počet, nie najvyšší index. Neviem, ako funguje ImageArray(), ale nemá tam byť v konštruktori tiež počet obrázkov ? To som si neni istý, ale teda do môjho kódu daj počet. Napr. pre tento kód:
 

image = new ImageArray(21); //si si istý, že tam nebude 22 ??
image[0] = 'obrazek1.png';
image[1] = 'obrazek2.png';
image[2] = 'obrazek3.png';
image[3] = 'obrazek4.png';
image[4] = 'obrazek5.png';
image[5] = 'obrazek6.png';
image[6] = 'obrazek7.png';
image[7] = 'obrazek8.png';
image[8] = 'obrazek9.png';
image[9] = 'obrazek10.png';
image[10] = 'obrazek11.png';
image[11] = 'obrazek12.png';
image[12] = 'obrazek13.png';
image[13] = 'obrazek14.png';
image[14] = 'obrazek15.png';
image[15] = 'obrazek16.png';
image[16] = 'obrazek17.png';
image[17] = 'obrazek18.png';
image[18] = 'obrazek19.png';
image[19] = 'obrazek20.png';
image[20] = 'obrazek21.png';
image[21] = 'obrazek22.png';

to bude 22.

Nepoužívaj tam:  

image = new ImageArray(21);

ale:
 

image = new Array(22);

Nemám šajnu, čo je ImageArray, ale toto máš obyčajné pole stringov, tam ti určtie obyčajný Array stačí. A teda nie 21 ale 22, pretože obrázkov bude dokopy 22 (0-21).

#30 lukas.balaz
teda mám v tom totální zmatek,

můžeš mi prosím napsat jak bude vypadat celý upravený kód pro 22 obrázků??

#31 Jirka

<!DOCTYPE html>
<html>
<head lang="cs">
    <meta charset="UTF-8">
    <title></title>
    <script><!--
    // cesta k jednotlivým obrázkům
    var obrazky = [
        "./img/obrazek1.jpg",
        "./img/obrazek2.jpg",
        "./img/obrazek3.jpg",
        "./img/obrazek4.jpg",
        "./img/obrazek5.jpg",
        "./img/obrazek6.jpg",
        "./img/obrazek7.jpg",
        "./img/obrazek8.jpg",
        "./img/obrazek9.jpg",
        "./img/obrazek10.jpg",
        "./img/obrazek11.jpg",
        "./img/obrazek12.jpg",
        "./img/obrazek13.jpg",
        "./img/obrazek14.jpg",
        "./img/obrazek15.jpg",
        "./img/obrazek16.jpg",
        "./img/obrazek17.jpg",
        "./img/obrazek18.jpg",
        "./img/obrazek19.jpg",
        "./img/obrazek20.jpg",
        "./img/obrazek21.jpg",
        "./img/obrazek22.jpg"
    ];

    var pocetObrazku = obrazky.length;

    var datum = new Date();
    var index = Math.round( datum.getTime() / 84000000 ) % pocetObrazku;

    function ZobrazObrazek() {
        document.getElementById("obrazek").src = obrazky[index];
    }

    --></script>
</head>
<body onload="ZobrazObrazek()">
<img id="obrazek" src="/" alt="Obrázek"/>
</body>
</html>

#32 ondrej39
zobrazí se obrazek13 je to tak správně?

A po doběhnutí na obrázek 22 se opět spustí obrázek1??

Dáte se to někde otestovat??

#33 Jirka
Ano, dnes se má zobrazit obrázek 13, alespoň mně to tak funguje. Pokud by sis chtěl udělat posun na nějaký jiný obrázek, například dnes bys chtěl mít obrázek 1, pak musíš provést posun na 14 -> 15 -> 16 -> 17 -> 18 -> 19 -> 20 -> 21 -> 22 -> 1, tedy o 10 dní, čehož lze docílit modifikací funkce na výpočet indexu třeba na následující tvar:

var posunoutODny = 0;
var index = Math.round( ( datum.getTime() + posunoutODny * 84000000 ) / 84000000 ) % pocetObrazku;

Proměnnou posunoutODny jsem vytvořil, aby bylo lépe z kódu pochopitelné, co dané číslo vyjadřuje.

Touto modifikací si rovněž můžeš vyzkoušet posouvání po jednom dni a uvidíš, že po určitém počtu se opět zobrazí první obrázek.

Za kód děkuj šikovnému uživateli lukas.balaz. :)

oooo Klaním se Pánové a moc moc děkuji   

#35 ondrej39
Ahoj, vše funguje jak má, krom času obrázek se přehodí ve 20 hodin a já bych potřeboval aby se přehodil ve 24 hodin, jak to upravit??

#37 Jirka
Za datum.GetTime ve výpočtu indexu přičti 4 hodiny v milisekundách (4 x 60 x 60 x 1000). To by ti mělo frčet :-).

#38 ondrej39 

na konci mám to to:

    var pocetObrazku = obrazky.length;

    var datum = new Date();
    var index = Math.round( datum.getTime() / 84000000 ) % pocetObrazku;

    function ZobrazObrazek() {
        document.getElementById("obrazek").src = obrazky[index];
    }

    --></script>
</head>
<body onload="ZobrazObrazek()">
<img id="obrazek" src="/" alt="Obrázek"/>
</body>
</html>

Jsem hrozná lama ale vůbec netuším kam mám dát tento řádek (4 x 60 x 60 x 1000)?

#39 Jirka 

Dá se to zapsat i takto:

    var pocetObrazku = obrazky.length;

    var datum = new Date();
    var index = Math.round( datum.getTime() / 86400000 ) % pocetObrazku;

    function ZobrazObrazek() {
        document.getElementById("obrazek").src = obrazky[index];
    }

    --></script>
</head>
<body onload="ZobrazObrazek()">
<img id="obrazek" src="/" alt="obrazek"/>
</body>
</html>

nebo to se ve 24 hodin nepřehodí?

ms * s * min * hod * dny * roky
1000 * 60 * 60 * 24 * ...
86400000 * ...
Nevim, kde jste vzali na zacatku v tom kodu 84.... :) Asi preklep.

#41 peter
Tento kód načítá nový obrázek při každém znovu načtení stránek,

já potřebuji aby se zobrazil obrázek celý den ten samí a ve 24:00 hod se přehodil na další. 

    var pocetObrazku = obrazky.length;

    var datum = new Date();
    var index = Math.round( datum.getTime() /1000 * 60 * 60 * 24 * 86400000 ) % pocetObrazku;

    function ZobrazObrazek() {
        document.getElementById("obrazek").src = obrazky[index];
    }

    --></script>
</head>
<body onload="ZobrazObrazek()">
<img id="obrazek" src="/" alt="Karta dne"/>
</body>
</html>

:)))

#15 lukas balaz ti napsal

var currentdate = new Date(); var imagenumber = Math.round(currentdate.getTime() / (1000*60*60*24))%9;

Coz, kdyz si vynasobis kalkuckou da 86400000 (tech 1000*60*60*24). Tak vysvetluji, jak na to prisel. Ze je to nasobeni milisekundy * sekundy * minuty * hodiny, pocet milisekund pro jeden den.
 - par prispevku na to se tam objevuje jeste to nasobeni
- ondrej v #32 tam ma chybne 84000000
- v prispevku #40 jsi to spravil ty na 86400000
- ve #42 jsi to zmrvil uplne :)  datum.getTime() /1000 * 60 * 60 * 24 * 86400000 - deleni ma prednost
 

Tak jen, abys mel takovou predstavu, co se deje...
- new Date().getTime() - je casove razitko, cislo pocet ms od roku 1970, silene velke cislo [A]
- toto cislo [A] podelis poctem milisekund pro jeden den [B] (coz je to nasobeni 1000*60*60*24) a dostanes prekvapive cislo dne. coz je 0 - 365.25 + vsechny dny od roku 1970
- kdyz toto cislo zaokrouhlis a pak podelis celociselne poctem obrazku, tak dostanes 0 az pocet obrazku
Cili, ta lukasova myslenka na zacatku je spravna a ten kod v prispevku #40 by ti mohl teoreticky fungovat.

+ 4 hodiny docilis jak? kdyz vis, ze 24h se pocita jako 1000*60*60*24 [B]
A = new Date().getTime();
B = 1000*60*60*24;
C = 1000*60*60*4;
D = obrazky.length;
A / B + C (bud plus nebo minus, kdyz to mas posunute o 4h)
(A / B + C) % D

% je modulo, zbytek po deleni na cela cisla, mozna znas ze zakladky z matiky
% = floor( ( x/y - floor(x/y) ) * y ) // x = 10, y = 7, zbytek po celociselnem deleni by mel vyjit 3
% = floor( ( 10/7 - floor(10/7) ) ) * 7 // floor orezava desetiny, cili z 123.456 udela 123.000
% = floor( (1.43 - 1) * 7 ) = floor( 0.43 * 7 = floor( 3.01 ) = 3
Cili, kdyz jakekoliv cislo vydelis pres modulo deleni, tak vysledkem bude 0 - D (pro priklad (A / B + C) % D)

http://www.jakpsatweb.cz/javascript/objekt-date.html
Ale tak v celku bys to mohl udelat i pomoci getDate(), mozna a getHour()
A = new Date().getDate();
D = obrazky.length;
alert([A, D, A/D, A%D]);
Jen pomoci milisekund ti to bude vybirat cele pole rovnomerne.
Co tim myslim? Rekneme, ze pocet obrazku je 10, unor ma 28 dni, brezen 31
getTime: unor 0-9, 0-9, 0-7, brezen 8-9, 0-9, 0-9...
getDate: unor 0-9, 0-9, 0-7, brezen 0-9, 0-9... // novy mesic bude zacinat nulou

Navic, je tu takova drobnost. JS bezi na pc uzivatele. Kdyz si zmenim cas v pc, tak i js jej bude mit zmenene.
A jeste je tu druha takova vec. Pokud je stranka otevrena, obrazek se sam nezmeni, dokud neni udelany refresh. musel by jsi obnovit stranku nebo pouzit casovac a kontrolovat treba po 5 min, jestli nenastala zmena casu.

#43 peter
Děkuji :)