• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Proszę o rozwiązanie problemu w HTML

Object Storage Arubacloud
0 głosów
145 wizyt
pytanie zadane 1 listopada 2023 w HTML i CSS przez olo123 Nowicjusz (120 p.)

Witam stworzyłem kod html który pokazuje listę świąt w Korei Północnej. Najbliższe święto jest zaznaczone na zielono, lecz gdy wypadają święta Dzień Matki i Święto konstytucji Koreańskiej Republiki Ludowo-Demokratycznej zaznaczają się obydwa święta, chociaż teoretycznie Dzień Matki powinien być zaznaczony gdyż wypada wcześniej i gdy to piszę to jest bliżej nas. 
 

Tutaj kod:

<!DOCTYPE html>
<html>
<head>
    <title>Święta w Korei Północnej</title>
    <script>
        // Funkcja do obliczania pozostałych dni do najbliższego święta
        function obliczPozostaleDni(data) {
            var dzis = new Date();
            var strefaKoreanska = 9; // Różnica czasowa w godzinach
            var dataSwieta = new Date(data);

            // Dostosuj datę na podstawie różnicy czasowej
            dataSwieta.setHours(dataSwieta.getHours() - strefaKoreanska);

            if (dataSwieta < dzis) {
                dataSwieta.setFullYear(dataSwieta.getFullYear() + 1); // Przesuń na kolejny rok
            }

            var roznica = dataSwieta - dzis;
            var dni = Math.floor(roznica / (1000 * 60 * 60 * 24));
            return dni;
        }

        // Funkcja do ustawiania koloru tekstu dla najbliższego święta
        function ustawKolorTekstu(dataSwieta) {
            var dzis = new Date();
            var strefaKoreanska = 9; // Różnica czasowa w godzinach
            var dataSwieta = new Date(dataSwieta);

            // Dostosuj datę na podstawie różnicy czasowej
            dataSwieta.setHours(dataSwieta.getHours() - strefaKoreanska);

            if (dataSwieta > dzis) {
                return "green";
            }
            return "black";
        }

        // Funkcja wyświetlająca święta i pozostałe dni
        function wyswietlSwieta() {
            var aktualnaData = new Date();
            var rok = aktualnaData.getFullYear(); // Pobierz aktualny rok

            var swieta = [
                { data: rok + "-01-01", nazwa: "Nowy Rok" },
                { data: rok + "-03-08", nazwa: "Dzień Kobiet" },
                { data: rok + "-04-15", nazwa: "Dzień Słońca (Rocznica urodzin Kim Ir Sena)" },
                { data: rok + "-04-25", nazwa: "Rocznica ustanowienia Koreańskiej Armii Ludowej" },
                { data: rok + "-05-01", nazwa: "Święto Robotnicze" },
                { data: rok + "-07-27", nazwa: "Dzień Zwycięstwa Wyzwolenia Ojczyzny" },
                { data: rok + "-08-25", nazwa: "Dzień Songun" },
                { data: rok + "-09-09", nazwa: "Rocznica ustanowienia Koreańskiej Republiki Ludowo-Demokratycznej" },
                { data: rok + "-10-10", nazwa: "Rocznica założenia Partii Pracy Korei" },
                { data: rok + "-11-16", nazwa: "Dzień Matki" },
                { data: rok + "-12-27", nazwa: "Święto konstytucji Koreańskiej Republiki Ludowo-Demokratycznej" }
            ];

            var dzis = new Date();
            var lista = document.getElementById("listaSwiat");
            lista.innerHTML = "";

            for (var i = 0; i < swieta.length; i++) {
                var dataSwieta = new Date(swieta[i].data);
                var dniDoSwieta = obliczPozostaleDni(dataSwieta);
                var kolorTekstu = ustawKolorTekstu(dataSwieta);

                var wpis = document.createElement("li");
                var dniTekst = dniDoSwieta === 1 ? "dzień" : "dni";
                var dzienText;

                if (dniDoSwieta === 0) {
                    dzienText = "dziś";
                } else if (dniDoSwieta > 0) {
                    dzienText = "za " + dniDoSwieta + " " + dniTekst;
                } else {
                    var jutro = new Date(dataSwieta);
                    jutro.setDate(jutro.getDate() + 1);
                    dniDoSwieta = obliczPozostaleDni(jutro);
                    dniTekst = dniDoSwieta === 1 ? "dzień" : "dni";
                    dzienText = "za " + dniDoSwieta + " " + dniTekst;
                }

                wpis.innerHTML = swieta[i].data.substr(5) + " - " + swieta[i].nazwa + " (" + dzienText + ")";
                wpis.style.color = kolorTekstu;

                lista.appendChild(wpis);
            }
        }
    </script>
</head>
<body onload="wyswietlSwieta()">
    <h1>Święta w Korei Północnej</h1>
    <ul id="listaSwiat"></ul>
</body>
</html>


Proszę o rozwiązanie problemu aby te dwa święta nie były zaznaczone jednocześnie a tylko to które jest bliżej nas.

komentarz 1 listopada 2023 przez overcq Pasjonat (21,860 p.)
Funkcją “ustawKolorTekstu” arbitralnie ustawiasz kolor zielony dla wszystkich świąt, które będą jeszcze w tym roku (linia 33). Może wystarczy przed pętlą wypisującą święta dodać jeszcze jedną, która będzie wyszukiwać dla wszystkich świąt spełniających warunek “dataSwieta > dzis” to mające najmniejszą odległość “dataSwieta - dzis”. I później w pętli wypisującej sprawdzać, czy to to święto, by ustawić kolor zielony.
komentarz 1 listopada 2023 przez VBService Ekspert (254,880 p.)
edycja 1 listopada 2023 przez VBService

@olo123, BTW dataSwieta już jest typu Date, linia 59

var dataSwieta = new Date(swieta[i].data);
var dniDoSwieta = obliczPozostaleDni(dataSwieta);
var kolorTekstu = ustawKolorTekstu(dataSwieta);

proponuje zapis dla ustawKolorTekstu

function ustawKolorTekstu(dataSwieta) {
  const dzis = new Date();
  const strefaKoreanska = 9; // Różnica czasowa w godzinach
 
  // Dostosuj datę na podstawie różnicy czasowej
  dataSwieta.setHours(dataSwieta.getHours() - strefaKoreanska);
 
  return dataSwieta >= dzis ? "green" : "black";
}

 

1 odpowiedź

0 głosów
odpowiedź 1 listopada 2023 przez VBService Ekspert (254,880 p.)
edycja 1 listopada 2023 przez VBService

Proponuje użyć zmiennej tzw. flagi

Proponowane zmiany

function ustawKolorTekstu(dataSwieta) {
  const dzis = new Date();
  const strefaKoreanska = 9; // Różnica czasowa w godzinach

  // Dostosuj datę na podstawie różnicy czasowej
  dataSwieta.setHours(dataSwieta.getHours() - strefaKoreanska);

  return dataSwieta >= dzis ? true : false;
}
function wyswietlSwieta() {
  const dzis = new Date();
  const rok = dzis.getFullYear(); // Pobierz aktualny rok

  const swieta = [
    { data: rok + "-01-01", nazwa: "Nowy Rok" },
    { data: rok + "-03-08", nazwa: "Dzień Kobiet" },
    { data: rok + "-04-15", nazwa: "Dzień Słońca (Rocznica urodzin Kim Ir Sena)" },
    { data: rok + "-04-25", nazwa: "Rocznica ustanowienia Koreańskiej Armii Ludowej" },
    { data: rok + "-05-01", nazwa: "Święto Robotnicze" },
    { data: rok + "-07-27", nazwa: "Dzień Zwycięstwa Wyzwolenia Ojczyzny" },
    { data: rok + "-08-25", nazwa: "Dzień Songun" },
    { data: rok + "-09-09", nazwa: "Rocznica ustanowienia Koreańskiej Republiki Ludowo-Demokratycznej" },
    { data: rok + "-10-10", nazwa: "Rocznica założenia Partii Pracy Korei" },
    { data: rok + "-11-16", nazwa: "Dzień Matki" },
    { data: rok + "-12-27", nazwa: "Święto konstytucji Koreańskiej Republiki Ludowo-Demokratycznej" }
  ];

  const lista = document.getElementById("listaSwiat");
  lista.innerHTML = "";

  let pierwszaNajblizszaZnaleziona = false;

  for (let i=0; i<swieta.length; i++) {
    const dataSwieta = new Date(swieta[i].data);
    const dniDoSwieta = obliczPozostaleDni(dataSwieta);

    const wpis = document.createElement("li");
    const dniTekst = dniDoSwieta === 1 ? "dzień" : "dni";
    let dzienText;

    if (dniDoSwieta === 0) {
      dzienText = "dziś";
    } else if (dniDoSwieta > 0) {
      dzienText = "za " + dniDoSwieta + " " + dniTekst;
    }

    wpis.innerHTML = swieta[i].data.substr(5) + " - " + swieta[i].nazwa + " (" + dzienText + ")";
    if (!pierwszaNajblizszaZnaleziona && ustawKolorTekstu(dataSwieta)) {
      wpis.style.color = 'green';
      pierwszaNajblizszaZnaleziona = true;
    }                

    lista.appendChild(wpis);
  }
}

 

1
komentarz 1 listopada 2023 przez olo123 Nowicjusz (120 p.)
Bardzo dziękuję za pomoc!

Podobne pytania

0 głosów
1 odpowiedź 1,242 wizyt
pytanie zadane 29 lipca 2017 w HTML i CSS przez kamis Początkujący (400 p.)
0 głosów
2 odpowiedzi 307 wizyt
pytanie zadane 4 kwietnia 2018 w Grafika i multimedia przez niezalogowany
0 głosów
1 odpowiedź 202 wizyt
pytanie zadane 29 września 2016 w HTML i CSS przez simon95 Nowicjusz (150 p.)

92,757 zapytań

141,679 odpowiedzi

320,441 komentarzy

62,101 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...