Forum PHP.pl > Jak wyciagnac z zegara pierwsza cyfre

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: Jak wyciagnac z zegara pierwsza cyfre

Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript

Mastersieciweb

2.01.2014, 14:53:43

Witam, mam tutaj zegarek który umieściłem za pomocą CSSa w trzech jajkach. Problem polega na tym że chce rozerwać z mojego zegara wszystkie cyfry tak abym mógł nimi za pomocą CSSa manipulować, w celu umieszczenia w jednym 'jajku' jednej cyfry a nie dwóch( bo godzina składa się z dwóch np 14) to chciałbym wyciągnąc jednyke osobno i czwórke, nie wiem czy za pomocą charAt to mam zrobić, a jeśli tak to w jaki sposób? z góry dziękuje

[HTML] pobierz, plaintext 
 
<html>
  <head>
  <title>gg</title>
  <link type="text/css" rel="stylesheet" href="rozdzial811.css"/>
  </head>
  <body>
  <body onLoad="zegarek()"> 
 
 
 
  <div id="kolo1"></div> 
  <div id="kolo2"></div>
  <div id="kolo3"></div>
  <div id="kolo4"></div>
  <div id="kolo5"></div>
  <div id="kolo6"></div>
  <div id="sekundy"></div>
  <div id="minuty"></div>
  <div id="godziny"></div> 
 
 
  <script>
 
  function zegarek(){
 
  var cos=new Date();
  var godzina=cos.getHours();
 
 
  var minuta=cos.getMinutes();
  var sekunda=cos.getSeconds();
  if (sekunda<10){
  sekunda= "0"+sekunda;}
  document.getElementById('godziny').innerHTML=godzina;
  document.getElementById('minuty').innerHTML=minuta;
  document.getElementById('sekundy').innerHTML=sekunda;
 
k=setTimeout("zegarek()",1000);
}
 
 
</script>
 </body>
</html>
[HTML] pobierz, plaintext

Kshyhoo

2.01.2014, 15:03:03

Zaaobacz, czy to Ci pomoże:

[JAVASCRIPT] pobierz, plaintext 
<script type="text/javascript">
<!-- <![CDATA[
  // preloader
  p1 = new Image().src="1.gif";
  p2 = new Image().src="2.gif";
  p3 = new Image().src="3.gif";
  p4 = new Image().src="4.gif";
  p5 = new Image().src="5.gif";
  p6 = new Image().src="6.gif";
  p7 = new Image().src="7.gif";
  p8 = new Image().src="8.gif";
  p9 = new Image().src="9.gif";
  p0 = new Image().src="0.gif";
  pd = new Image().src="d.gif";
 
function zegar() {
  data = new Date();
  godzina = data.getHours();
  minuta = data.getMinutes();
  sekunda = data.getSeconds();
  teraz = ""+((godzina<10)?"0":"")+godzina+
  ((minuta<10)?"d0":"d")+minuta+((sekunda<10)?"d0":"d")+sekunda;
  for (i=0;i<8;i++) {
    eval('document.getElementById("p'+i+'").src=p'+teraz.charAt(i));
  }
  setTimeout("zegar()",1000);
}
zegar();
 
// ]]> -->
</script>
[JAVASCRIPT] pobierz, plaintext

[HTML] pobierz, plaintext 
<div>
<img src="1.gif" id="p0" alt="" />
<img src="1.gif" id="p1" alt="" />
<img src="1.gif" id="p2" alt="" />
<img src="1.gif" id="p3" alt="" />
<img src="1.gif" id="p4" alt="" />
<img src="1.gif" id="p5" alt="" />
<img src="1.gif" id="p6" alt="" />
<img src="1.gif" id="p7" alt="" />
</div>
[HTML] pobierz, plaintext

Mastersieciweb

2.01.2014, 15:28:30

z tym, że tutaj Twoimi liczbami są obrazy a u mnie tekst. Tylko te jajka to zrobiłem z div'ow i za pomocą cssa sobie umieściłem liczby godziny w trzech jajkach, umieszcze jeszcze CSSa żebyś wiedział jak to u mnie wygląda i o co mi chodzi. chciałbym to rozbić na 6 jajek i w każdym jajku inna osobna liczba oto CSS:

[HTML] pobierz, plaintext 
#godziny{color:red; font-weight:bold;margin-left:312px;margin-top:215px;position:absolute;}
#minuty{color:blue; font-weight:bold;margin-left:363px;margin-top:215px;position:absolute;}
#sekundy{color:green; font-weight:bold;margin-left:413px;margin-top:215px;position:absolute;}
 
#kolo1{margin-left:300px;margin-top:200px; position:absolute;
background-color:pink;
width: 40px;
height: 50px;
border-radius: 50%;
}
#kolo2{margin-left:350px; margin-top:200px;position:absolute;
background-color:pink;
width: 40px;
height: 50px;
border-radius: 50%;
}
#kolo3{margin-left:400px; margin-top:200px;position:absolute;
background-color:pink;
width: 40px;
height: 50px;
border-radius: 50%;
}
[HTML] pobierz, plaintext

narazie wygląda to tak: http://i39.tinypic.com/n2inix.jpg

a chciałbym dorobić jeszcze trzy jaja co nie jest problemem z tym że nie wiem jak rozbić zegarek na 6 liczb, zeby każda była w innym jajku

vermis

2.01.2014, 16:38:27

Jeśli dobrze rozumiem to chcesz np. dla 20:14 otrzymać 2 i 0 oraz 1 i 4.
Po pierwsze nie do końca widzę sens tak rozbijać zegar.
Po drugie wystarczy użyć podstawowych działań matematycznych: modulo, czyli reszta z dzielenia (%10) oraz dzielenie (przez 10, bez reszty).

Mastersieciweb

2.01.2014, 18:14:39

tak jak mówisz ale nie wiem jak to zapisać, żebym do osobnego div'a miał przypisaną jedną literkę, którą później będe mógł modyfikować graficznie za pomocą css'a.
Bo kwestia jest taka że później mam zamiar przestawiać te cyferki w różne miejsca.. a nie wiem jak się odwołać do każdej z osobna, bo do całości to mam

Kshyhoo

2.01.2014, 18:23:44

Cytat(Mastersieciweb @ 2.01.2014, 18:14:39 )

Możesz wykorzystać mój kod, zamieniając IMG na DIV.

kujol

2.01.2014, 20:34:27

Lub pobierz całą godzinę do zmiennej i użyj tu substr() np.

[PHP] pobierz, plaintext 
$aktualnaGodzina = 15;
 
$cyfra1zGodziny = substr($aktualnaGodzina, 0);
 
$cyfra2zGodziny = substr($aktualnaGodzina, 1);
[PHP] pobierz, plaintext

To samo z minutami i sekundami
Jeśli możesz użyć php

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.