Pomoc z projektem - zegar+coś dodatkowego do niego

0

Siema.
Mam problem - mianowicie:
Napisałam program(tak, wiem, że prosty), który wyświetla zegar, aktualne godziny w kilku różnych miejscach. Chciałabym do tego dorzucić skrypt, który pozwoli na to, żeby wyświetlało się pole wyboru lokalizacji z wymienionych już - i na tej podstawie wyświetla mi się strefa czasowa. Drugim pomysłem jest to, aby się wyświetlały zmiany godzin, Np 120 minut to 2h, żeby się to wyświetlało.
To ma być projekt na podstawy programowania, zegar ogarnęłam, ale to niestety mało i próbuję coś dodać - a niestety wyżej wymienione rzeczy nie wychodzą mi.
Jest ktoś w stanie pomóc?
https://prnt.sc/xkclsm

sam zegar działa

<script type="text/javascript">


function zegarek(offs){
 offs=offs+lato_offset;
 var g,m,s,teraz=new Date();
 with(teraz){
  setTime(getTime()+(offs*3600000));
  g=getUTCHours(); m=getUTCMinutes(); s=getUTCSeconds()}
 
 var czas=" "+(g<10?"0":"")+g;
 czas+=(m<10?":0":":")+m;
 czas+=(s<10?":0":":")+s;
 return czas;
}

function zegarStart(){
 var lato=new Date(2000,7,1), teraz=new Date();
 lato_offset=(teraz.getTimezoneOffset()==lato.getTimezoneOffset())?1:0;
 ustawCzas();
 setInterval('ustawCzas()',1000);
}

function ustawCzas(){
 function Czas(id,offs){
  document.clock.elements[id].value=zegarek(offs);
 }
 Czas("warszawa", 1);
 Czas("nowyjork", -5);
 Czas("londyn", 0);
 Czas("pekin", 8);
 Czas("tokio", 9);
 
}

</script>
RÓŻNICE CZASOWE

<body onload="zegarStart()">

<form name="clock">
<table border="0" width="500">
<tr><td><input name="warszawa" size="10"> Warszawa</td>
 <tr><td><input name="nowyjork" size="10"> Nowy Jork</td>
     <td><input name="pekin" size="10"> Pekin</td></tr>
 <tr><td><input name="londyn" size="10"> Londyn</td>
     <td><input name="tokio" size="10"> Tokio</td></tr>

</table>
2

tak, wiem, że prosty

Ale wydaje się działać. :)

Chciałabym do tego dorzucić skrypt, który pozwoli na to, żeby wyświetlało się pole wyboru lokalizacji z wymienionych już - i na tej podstawie wyświetla mi się strefa czasowa.

Nie jestem ekspertem w programowaniu webowym, ale spróbuj wykorzystać elementy <select> i <option> oraz zdarzenie onChange. Na przykład:

<select onChange="alert('Wybrano opcję ' + this.value)">
  <option value="warsaw">Warszawa</option>
  <option value="tokyo">Tokio</option>
</select>

Drugim pomysłem jest to, aby się wyświetlały zmiany godzin, Np 120 minut to 2h, żeby się to wyświetlało.

Nie bardzo to rozumiem. Mogłabyś doprecyzować/inaczej sformułować?

1

with(teraz){

Nie używa się with w JS. Tzn. niby się da, ale nie jest to zalecane + nie działa w strict mode.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/with
i ogólnie nauka z 20 letnich tutoriali (wnioskuję po linijce new Date(2000,7,1),) nie jest dobrym pomysłem. Chociaż obiekt Date jak był porąbany kiedyś, tak i dalej jest.

Chciałabym do tego dorzucić skrypt, który pozwoli na to, żeby wyświetlało się pole wyboru lokalizacji z wymienionych już - i na tej podstawie wyświetla mi się strefa czasowa.

W sensie, że chcesz zrobić jeden zegarek zamiast kilku różnych? Na zasadzie - wybierasz miasto i się zmienia godzina?

0

@Ewel inka:

A mógłbyś mi powiedzieć jak zrobić, żeby faktycznie po wybraniu lokalizacji wyświetliła się konkretna strefa czasowa?

To nie takie proste przy obecnej architekturze kodu. Należałoby zmienić ją najpierw tak, by elementy <input> nie były podane "na sztywno" w kodzie HTML. Tabela po załadowaniu ciała strony (onload) powinna być pusta.

UPDATE: Uznałem, że ten poprzedni kod nie ma sensu (przepraszam wszystkich, którzy go czytali, że już go nie ma).

Ostateczny kod:

HTML – wsadziłem tylko każdy element <input> do elementu <div> + mój element <select>:

<body onload="zegarStart()">
  
  <select onChange="zmienPokazywanyZegar(this.value)">
    <option value="warszawa">Warszawa</option>
    <option value="nowyjork">Nowy Jork</option>
    <option value="pekin">Pekin</option>
    <option value="londyn">Londyn</option>
    <option value="tokio">Tokio</option>
  </select>
  
  <form name="clock">
    <table border="0" width="500">
      <tr>
        <td>
          <div class="zegar" name="warszawa" style="display:none;">
            <input size="10"> Warszawa
          </div>
        </td>
      </tr>
      <tr>
        <td>
          <div class="zegar" name="nowyjork" style="display:none;">
            <input size="10"> Nowy Jork
          </div>
        </td>
        <td>
          <div class="zegar" name="pekin" style="display:none;">
            <input size="10"> Pekin
          </div>
        </td>
      </tr>
      <tr>
        <td>
          <div class="zegar" name="londyn" style="display:none;">
            <input size="10"> Londyn
          </div>
        </td>
        <td>
          <div class="zegar" name="tokio" style="display:none;">
            <input size="10"> Tokio</div>
        </td>
      </tr>
    </table>
  </form>

</body>

JavaScript:

function Czas(id, offs) {
    const tds = document.getElementsByClassName("zegar");
    for (let i = 0; i < tds.length; ++i) {
      if (tds[i].getAttribute("name") === id) {
        tds[i].getElementsByTagName("INPUT")[0].value = zegarek(offs);
      }
    }
  }

function zmienPokazywanyZegar(id) {
  const wszystkieZegary = document.getElementsByClassName("zegar");
  for (let i = 0; i < wszystkieZegary.length; ++i) {
  	const zegar = wszystkieZegary[i];
    if (zegar.getAttribute("name") === id) {
    	zegar.style.display = "block";
    } else {
    	zegar.style.display = "none";
    }
  }
}

Po wybraniu kolejnych zegarów można zobaczyć, że są względem siebie przesunięte kilka pikseli. Prawdopodobnie z uwagi na domyślne style tabeli lub formularza. Jak chcesz, możesz zmienić tabelę czy formularz na coś innego (ale to będzie wymagało też zmiany JavaScriptu).

PS Aha, jeszcze co do zmiany HTML – przeniosłem atrybuty name do elementów <div>. W ten sposób łatwiej mi było wybierać elementy ze strony.

1 użytkowników online, w tym zalogowanych: 0, gości: 1