Cas na web

M@rt1n

ako dam cas na web

Príspevok od používateľa **ppt** » 02 nov 2006, 22:04

Mas viacej moznosti:
1. len cisto staticky cas (hodnoty sa budu menit len pri refreshi) pomocou PHP
2. meniaci sa cas - pomocou javascriptu
3. meniaci sa cas - odkazom na inu stranku - pomocou flashu pozri: http://www.clocklink.com/

bart11

ertre napísal:ako dam cas na web

tu mas: hodiny s datumom, dnom
uprav si to uz podla seba

Kód: Vybrať všetko

<HTML> 
<HEAD> 
<META content="text/html; charset=windows-1250" http-equiv="Content-Type"> 
<STYLE type="text/css"> 
.hodinky { 
border-style: none; 
font-family: Arial; 
font-size: 10pt; 
font-weight: bold; 
font-color: black; 
background: white; 
} 
</STYLE> 

<SCRIPT charset="windows-1250" type="text/javascript"> 
<!-- 

function hodiny() { 
var datum=new Date(); 

var hodin=datum.getHours(); 
var minut=datum.getMinutes(); 
var sekund=datum.getSeconds(); 
var den=datum.getDay(); 
var mesiac=datum.getMonth(); 
var dnes=datum.getDate(); 
var rok=datum.getYear(); 
var DopoludnieOdpoludnie=" "; 

if (hodin<=18) 
DopoludnieOdpoludnie="odpoludnie"; 
if (hodin<=12) 
DopoludnieOdpoludnie="dopoludnie"; 
if (hodin<=6) 
DopoludnieOdpoludnie="ráno"; 
if (hodin>18) 
DopoludnieOdpoludnie="večer"; 
if (hodin>=13) 
hodin-=12; 
if (hodin==0) 
hodin=12; 
if (sekund<10) 
vterin="0"+sekund; 
if (minut<10) 
minut="0"+minut; 

if (den==0) 
den="nedeľa"; 
if (den==1) 
den="pondelok"; 
if (den==2) 
den="utorok"; 
if (den==3) 
den="streda"; 
if (den==4) 
den="štvrtok"; 
if (den==5) 
den="piatok"; 
if (den==6) 
den="sobota"; 

mesiac+=1; 

document.hodinovyformular.hodiny.value="Dnes je " + den 
+ " " + dnes + "/" + mesiac + "/" + rok + " " + hodin 
+ ":" + minut + ":" + sekund + " " + DopoludnieOdpoludnie; 

} 

//--> 
</SCRIPT> 
</HEAD> 

<BODY> 

<FORM name="hodinovyformular"> 
<INPUT class="hodinky" type="text" name="hodiny" size="60"> 
</FORM> 

<SCRIPT charset="windows-1250" type="text/javascript"> 
<!-- 
setInterval('hodiny()',1000); 
//--> 
</SCRIPT> 

</BODY> 
</HTML>

samozrejme sa to da aj jednoduchsie, ale ja som nasiel v kompe hned tento priklad..
EDIT: chyba (denr) je opravena

Nosferatu

<?
echo date("G:i"); //

hodina a minúta , viac na php.net
?>

if (den==0)
den="nedeľa";
if (den==1)
den="pondelok";
if (den==2)
den="utorok";
if (denr=3)
den="streda";
if (den==4)
den="štvrtok";
if (den==5)
den="piatok";
if (den==6)
den="sobota";

nieje v

if (denr=3)
den="streda";

chyba???

Nosferatu

je tam chyba, sekol sa..

bart11

jj, dik za upozornenie, bola tam chyba....

EDIT:
ano nosferatu, uz som opravil aj to chybajuce =. To je chyb co?

Nosferatu

si to opravil, ale zas tam máš chybu, máš tam priradenie, chýba ti tam jedno rovná sa

xyxo1

Kód: Vybrať všetko

<p id="time">
					<script language="javascript" type="text/javascript">
					 var cas = new Date()
					 var hodiny = cas.getHours()
					 var minuty = cas.getMinutes()
					 var sekundy = cas.getSeconds()
					 setInterval("cas()", 1000);
					
					 if (minuty < 10){
					 minuty = "0" + minuty				
					 }					 
					 document.write("<strong>" + "Čas: " + hodiny + ":" + minuty + ":" + sekundy + "</strong>")
					 </script>                     
                </p>

prisím kde tu mám chybu, neaktualizuje mi hodiny každú sekundu, iba pri refreshi stránky... asi mám zle setinterval...opravte ma pls

Michaelo

Odobne pouzivam tento script na mojom webe erahier.sk:

Script.js (alebo ako si ho nazves, ci kam to das, to je jedno)

Kód: Vybrať všetko

function Cas() {
  var PraveTeraz = new Date();
  var hod = PraveTeraz.getHours().toString();
  var min  = PraveTeraz.getMinutes().toString();
  var sec  = PraveTeraz.getSeconds().toString();
  if (min.length < 2)
    min = "0" + min;
  if (sec.length < 2)
    sec = "0" + sec;
  var cas = hod + ":" + min + ":" + sec;
  document.getElementById("Time").innerHTML = cas;
  setTimeout("Cas();", 1000);
}

Potom do body toto:

Kód: Vybrať všetko

echo "<body onload='Cas();'>";

alebo niekde do dokumentu toto:

Kód: Vybrať všetko

<script type="text/javascript">window.onload=function(){Cas();};</script>

A tam kde chces cas s datumom:

Kód: Vybrať všetko

echo "<strong>Dnes je: </strong>".date("d. m. Y")." - <span id='Time'></span>\n";

ak nechces datum ale len cas, tak iba toto:

Kód: Vybrať všetko

echo "<span id='Time'></span>\n";

S-player

Spoiler

bart11 napísal: tu mas: hodiny s datumom, dnom
uprav si to uz podla seba

Kód: Vybrať všetko

<HTML> 
<HEAD> 
<META content="text/html; charset=windows-1250" http-equiv="Content-Type"> 
<STYLE type="text/css"> 
.hodinky { 
border-style: none; 
font-family: Arial; 
font-size: 10pt; 
font-weight: bold; 
font-color: black; 
background: white; 
} 
</STYLE> 

<SCRIPT charset="windows-1250" type="text/javascript"> 
<!-- 

function hodiny() { 
var datum=new Date(); 

var hodin=datum.getHours(); 
var minut=datum.getMinutes(); 
var sekund=datum.getSeconds(); 
var den=datum.getDay(); 
var mesiac=datum.getMonth(); 
var dnes=datum.getDate(); 
var rok=datum.getYear(); 
var DopoludnieOdpoludnie=" "; 

if (hodin<=18) 
DopoludnieOdpoludnie="odpoludnie"; 
if (hodin<=12) 
DopoludnieOdpoludnie="dopoludnie"; 
if (hodin<=6) 
DopoludnieOdpoludnie="ráno"; 
if (hodin>18) 
DopoludnieOdpoludnie="večer"; 
if (hodin>=13) 
hodin-=12; 
if (hodin==0) 
hodin=12; 
if (sekund<10) 
vterin="0"+sekund; 
if (minut<10) 
minut="0"+minut; 

if (den==0) 
den="nedeľa"; 
if (den==1) 
den="pondelok"; 
if (den==2) 
den="utorok"; 
if (den==3) 
den="streda"; 
if (den==4) 
den="štvrtok"; 
if (den==5) 
den="piatok"; 
if (den==6) 
den="sobota"; 

mesiac+=1; 

document.hodinovyformular.hodiny.value="Dnes je " + den 
+ " " + dnes + "/" + mesiac + "/" + rok + " " + hodin 
+ ":" + minut + ":" + sekund + " " + DopoludnieOdpoludnie; 

} 

//--> 
</SCRIPT> 
</HEAD> 

<BODY> 

<FORM name="hodinovyformular"> 
<INPUT class="hodinky" type="text" name="hodiny" size="60"> 
</FORM> 

<SCRIPT charset="windows-1250" type="text/javascript"> 
<!-- 
setInterval('hodiny()',1000); 
//--> 
</SCRIPT> 

</BODY> 
</HTML>

samozrejme sa to da aj jednoduchsie, ale ja som nasiel v kompe hned tento priklad..
EDIT: chyba (denr) je opravena

A čo tak implementovať trochu jednoduchosti a pre dni použit napríklad niečo také:

Kód: Vybrať všetko

var days = ["nedela", "pondelok", "utorok", "streda", "štvrtok", "piatok", "sobota"],
       day = days[date.getDay()];

// atp...

Máš tam niekoľko ďalších chýb:
- Názov premennej "DopoludnieOdpoludnie" by mal byť "dopoludnieOdpoludnie", tiež by neuškodilo keby ten názov bol kratší + nechápem prečo premennú deklaruješ s " "
- Rok by si mal brať za pomoci date.getFullYear() funkcie
- Máš tam premennú "vterin" & "sekund"
- Priradzuješ mesiac za pomoci mesiac+=1; pritom sa to dá spraviť jednoduchšie s mesiac++ alebo rovno v deklarácii zrobím date.getMonth() + 1;

*Tie prvé podmienky pre "DopoludnieOdpoludnie"... sú tiež pekne odveci

yoggy

7 rokov čakal na tvoju odpoveď

S-player

Ani som si nevšimol ,že kedy bola založená táto téma avšak ja som ju neobnovil. Už kedď je tu tak nech sa dá ten bordel dokopy určite to ešte niekto využije.

xyxo1

xyxo1 napísal:

Kód: Vybrať všetko

<p id="time">
					<script language="javascript" type="text/javascript">
					 var cas = new Date()
					 var hodiny = cas.getHours()
					 var minuty = cas.getMinutes()
					 var sekundy = cas.getSeconds()
					 setInterval("cas()", 1000);
					
					 if (minuty < 10){
					 minuty = "0" + minuty				
					 }					 
					 document.write("<strong>" + "Čas: " + hodiny + ":" + minuty + ":" + sekundy + "</strong>")
					 </script>                     
                </p>

S-player čo tu mám ja zle
prisím kde tu mám chybu, neaktualizuje mi hodiny každú sekundu, iba pri refreshi stránky... asi mám zle setinterval...opravte ma pls

S-player

Máš tam kopec chýb... Tu to máš "brand new" už celé v interval, neviem ako ti to treba.

Kód: Vybrať všetko

<script language="javascript" type="text/javascript">
    setInterval(function(){
        var date = new Date(),
            h = date.getHours(),
            m = ("0" + date.getMinutes()).slice(-2),
            s = ("0" + date.getSeconds()).slice(-2);

        document.getElementById("currentTime").value = h + ":" + m + ":" + s;
    }, 1000);
</script>


<INPUT id="currentTime">

Michaelo

V klude mohol pouzit to co som mu dal ja, pouzivam ho na mojom webe a funguje.

Alebo niečo viac univerzálne, z mojej kuchyne.

Spoiler

Kód: Vybrať všetko

<script type="text/javascript">

  var clockstart;
  var clockInt;
  
  function getMyTime (unix) {
      var d = new Date();
      if (!unix) {
        var h = ('0' + d.getHours()).slice(-2);
        var m = ('0' + d.getMinutes()).slice(-2);
        var s = ('0' + d.getSeconds()).slice(-2);
      }
      return (unix) ? Math.round(+d/1000) : h + ':' + m + ':' + s;
  }
  
  function cp (a, b, c) {
    if (a.className)
    {
      var d = a.className.split('\xA0').join('\x20').split('\x20');
      for (var e = 0; e < d.length; e++) {
           if (d[e] == b && c ||
               d[e].toLowerCase() == b.toLowerCase() && !c) return true;
      }
    }
    return false;
  }
  
  function setTimeTo (el, allElms, unix) {
    var val = getMyTime (unix);
    var i; 
    var getElTmp = new Array(); 
    var getEl = new Array();
  
    if (el.indexOf('\x23') === 0) getEl.push(document.getElementById(el.substring(1, el.length)));
    else if (el.indexOf('\x2E') === 0) {
      getElTmp = document.getElementsByTagName('*');
      for (i = 0; i < getElTmp.length; i++) {
        if (cp (getElTmp[i], el.substring(1, el.length))) {
            getEl.push(getElTmp[i]);
            if (!allElms) break;
        }
      }
    }
    else {
      getElTmp = document.getElementsByTagName(el);
      for (i = 0; i < getElTmp.length; i++) {
          getEl.push(getElTmp[i]);
          if (!allElms) break;
      }
    }
                                                                                               
    if (getEl.length < 1) {
      clearInterval(clockInt);
      return false;
    }
    
    for (i = 0; i < getEl.length; i++) {
        if (getEl[i].nodeName.toLowerCase() == 'input' && getEl[i].type.toLowerCase() == 'text') getEl[i].value = val;
        else if (getEl[i]) getEl[i].innerHTML = val;
    }
    return true;
  }
  
  function runClocks (a, b, c) {
    if (!clockstart) {
      if (!a) {
        a = 'clockIntervalElement';
        var bd = document.getElementsByTagName('body')[0];
        bd.innerHTML = '<span id="' + a + '"></span><br/>' + bd.innerHTML; 
        a = '#' + a;
      }
      setTimeTo(a, b, c); 
      clockInt = setInterval (function () {setTimeTo(a, b, c);}, 1000);
      clockstart = true;
    }
  } 

</script>

Použitie:

Kód: Vybrať všetko

runClocks (string tagName/#id/.class, [boolean applyToAll], [boolean unixFormat]);

Prvý argument funkcie je povinný (akvšak nie je zadaný je na začiatok body pridaný element, v ktorom sa hodiny zobrazia). Cielenie na konkrétny element je možné zadať v troch variantách: 1. 'názovTagu' 2. '#identifikátor' 3. '.trieda'
Druhý argument je nepovinný. Ak má hodnotu true hodiny sa zobrazia vo všetkých elementoch, ktoré vyhovujú prvému argumentu. Ak nie je zadaný alebo je false, hodiny sa zobrazia iba v prvom nájdenom prvku, ktorý vyhovuje prvému argumentu.
Tretí argument je nepovinný. Ak má nastavenú hodnotu true, hodiny zobrazujú čas v Unix formáte.

Hodiny sa dajú spustiť na stránke iba jeden-krát.

Príklad použitia:

Kód: Vybrať všetko

<span id="mojeid"></span><br>
<span class="mojatrieda uplneinatrieda"></span><br>
<input type="text" value="" id="dalsieid" class="mojatrieda">

<script type="text/javascript">

  // zobrazí hodiny v elemente s priradeným ID mojeid
  runClocks ('#mojeid');
  
  // zobrazí hodiny v elemente s priradenou triedou mojatrieda
  runClocks ('.mojatrieda');
  
  // zobrazí hodiny vo všetkých nájdených elementoch s priradenou triedou mojatrieda
  runClocks ('.mojatrieda', true);
  
  // zobrazí hodiny v elemente s priradenou triedou uplneinatrieda
  runClocks ('.uplneinatrieda');
  
  // zobrazí hodiny vo všetkých nájdených elementoch s priradenou triedou uplneinatrieda
  runClocks ('.uplneinatrieda', true);
  
  // zobrazí hodiny v elemente s priradeným ID dalsieid / druhý argument logicky nemôže fungovať
  runClocks ('#dalsieid', true);
  
  // zobrazí hodiny v elemente s názvom span
  runClocks ('span');
  
  // zobrazí hodiny vo všetkých nájdených elementoch s názvom span
  runClocks ('span', true);
  
  // zobrazí hodiny v elemente s názvom input s typom text
  runClocks ('input');
  
  // zobrazí hodiny vo všetkých nájdených elementoch s názvom input s typom text
  runClocks ('input', true);
  
  // zobrazí hodiny v elemente s priradenou triedou uplneinatrieda vo formáte unix
  runClocks ('.uplneinatrieda', false, true);
  
  
  // Toto radšej nerobte, nie je to ošetrené :D
  // zmaže to obsah stránky a zobrazí iba hodiny.
  runClocks ('body');

</script>

awtt · Príspevok od používateľa **awtt** » 21 okt 2013, 9:26

Michaelo napísal:V klude mohol pouzit to co som mu dal ja, pouzivam ho na mojom webe a funguje.

To nemozes mysliet vazne ze polka datumu cez php a druha cez js...

S-player

weroro napísal:Alebo niečo viac univerzálne, z mojej kuchyne.

Spoiler

Kód: Vybrať všetko

<script type="text/javascript">

  var clockstart;
  var clockInt;
  
  function getMyTime (unix) {
      var d = new Date();
      if (!unix) {
        var h = ('0' + d.getHours()).slice(-2);
        var m = ('0' + d.getMinutes()).slice(-2);
        var s = ('0' + d.getSeconds()).slice(-2);
      }
      return (unix) ? Math.round(+d/1000) : h + ':' + m + ':' + s;
  }
  
  function cp (a, b, c) {
    if (a.className)
    {
      var d = a.className.split('\xA0').join('\x20').split('\x20');
      for (var e = 0; e < d.length; e++) {
           if (d[e] == b && c ||
               d[e].toLowerCase() == b.toLowerCase() && !c) return true;
      }
    }
    return false;
  }
  
  function setTimeTo (el, allElms, unix) {
    var val = getMyTime (unix);
    var i; 
    var getElTmp = new Array(); 
    var getEl = new Array();
  
    if (el.indexOf('\x23') === 0) getEl.push(document.getElementById(el.substring(1, el.length)));
    else if (el.indexOf('\x2E') === 0) {
      getElTmp = document.getElementsByTagName('*');
      for (i = 0; i < getElTmp.length; i++) {
        if (cp (getElTmp[i], el.substring(1, el.length))) {
            getEl.push(getElTmp[i]);
            if (!allElms) break;
        }
      }
    }
    else {
      getElTmp = document.getElementsByTagName(el);
      for (i = 0; i < getElTmp.length; i++) {
          getEl.push(getElTmp[i]);
          if (!allElms) break;
      }
    }
                                                                                               
    if (getEl.length < 1) {
      clearInterval(clockInt);
      return false;
    }
    
    for (i = 0; i < getEl.length; i++) {
        if (getEl[i].nodeName.toLowerCase() == 'input' && getEl[i].type.toLowerCase() == 'text') getEl[i].value = val;
        else if (getEl[i]) getEl[i].innerHTML = val;
    }
    return true;
  }
  
  function runClocks (a, b, c) {
    if (!clockstart) {
      if (!a) {
        a = 'clockIntervalElement';
        var bd = document.getElementsByTagName('body')[0];
        bd.innerHTML = '<span id="' + a + '"></span><br/>' + bd.innerHTML; 
        a = '#' + a;
      }
      setTimeTo(a, b, c); 
      clockInt = setInterval (function () {setTimeTo(a, b, c);}, 1000);
      clockstart = true;
    }
  } 

</script>

Použitie:

Kód: Vybrať všetko

runClocks (string tagName/#id/.class, [boolean applyToAll], [boolean unixFormat]);

Prvý argument funkcie je povinný (akvšak nie je zadaný je na začiatok body pridaný element, v ktorom sa hodiny zobrazia). Cielenie na konkrétny element je možné zadať v troch variantách: 1. 'názovTagu' 2. '#identifikátor' 3. '.trieda'
Druhý argument je nepovinný. Ak má hodnotu true hodiny sa zobrazia vo všetkých elementoch, ktoré vyhovujú prvému argumentu. Ak nie je zadaný alebo je false, hodiny sa zobrazia iba v prvom nájdenom prvku, ktorý vyhovuje prvému argumentu.
Tretí argument je nepovinný. Ak má nastavenú hodnotu true, hodiny zobrazujú čas v Unix formáte.

Hodiny sa dajú spustiť na stránke iba jeden-krát.

Príklad použitia:

Kód: Vybrať všetko

<span id="mojeid"></span><br>
<span class="mojatrieda uplneinatrieda"></span><br>
<input type="text" value="" id="dalsieid" class="mojatrieda">

<script type="text/javascript">

  // zobrazí hodiny v elemente s priradeným ID mojeid
  runClocks ('#mojeid');
  
  // zobrazí hodiny v elemente s priradenou triedou mojatrieda
  runClocks ('.mojatrieda');
  
  // zobrazí hodiny vo všetkých nájdených elementoch s priradenou triedou mojatrieda
  runClocks ('.mojatrieda', true);
  
  // zobrazí hodiny v elemente s priradenou triedou uplneinatrieda
  runClocks ('.uplneinatrieda');
  
  // zobrazí hodiny vo všetkých nájdených elementoch s priradenou triedou uplneinatrieda
  runClocks ('.uplneinatrieda', true);
  
  // zobrazí hodiny v elemente s priradeným ID dalsieid / druhý argument logicky nemôže fungovať
  runClocks ('#dalsieid', true);
  
  // zobrazí hodiny v elemente s názvom span
  runClocks ('span');
  
  // zobrazí hodiny vo všetkých nájdených elementoch s názvom span
  runClocks ('span', true);
  
  // zobrazí hodiny v elemente s názvom input s typom text
  runClocks ('input');
  
  // zobrazí hodiny vo všetkých nájdených elementoch s názvom input s typom text
  runClocks ('input', true);
  
  // zobrazí hodiny v elemente s priradenou triedou uplneinatrieda vo formáte unix
  runClocks ('.uplneinatrieda', false, true);
  
  
  // Toto radšej nerobte, nie je to ošetrené :D
  // zmaže to obsah stránky a zobrazí iba hodiny.
  runClocks ('body');

</script>

Len zopár poznámok:

Kód: Vybrať všetko

return (unix) ? Math.round(+d/1000) : h + ':' + m + ':' + s; // Zátvorky pre boolean "unix" tu niesu potrebné
return (unix) ? Math.round(+d/1000) : h + ':' + m + ':' + s; // Neviem aká podstatná tu je dĺžka ušetrených znakov avšak ja by som tu použil skôr d.getTime() resp. date.getTime(), len preto aby bolo hneď jasné o čo ide, nad +d treba kúsok porozmýšľať.
var val = getMyTime (unix); // Samozrejme nič to nemení na funkčnosti, ide čisto len o zvyk avšak funkcie v JS by nemali mať medzeru za názvom. Keď som si všimol túto časť a nejako nezaregistroval ostatné volania/def. funkcii čumel som nato ako ... čo to vlastne robí  :D

S-player: tvoje poznámky sú čisto vyrývačne. V prvých dvoch prípadoch ti môžem povedať na to že tam nemusí byť zátvorka že tam nemusia byť ani medzery. V poslednom prípade argumentuješ zvyklostiami a čitateľnosťou keď dal medzeru navyše, no v prvých ignoruješ že je zvykom dávať podmienku do zátvoriek (i keď je to jediná logická premenná)
V prípade s +d s tebou nesúhlasím v tom, že treba porozmýšlať. Je to v úplnych základoch, hneď v prvých kapitolách kde sa učia operátory: http://en.wikibooks.org/wiki/JavaScript/Operators

Cas na web

Cas na web

Re: Cas na web

Re: Cas na web

Re: Cas na web

Re: Cas na web

Re: Cas na web

Re: Cas na web

Re: Cas na web

Re: Cas na web

Re: Cas na web

Re: Cas na web

Re: Cas na web

Re: Cas na web

Re: Cas na web