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

Dzien Niedziela ma sie zmienic kolor tekstu czerowny i wywietlic na stornie liniki:79,80 ; 104-108

VPS Starter Arubacloud
0 głosów
216 wizyt
pytanie zadane 11 października 2020 w JavaScript przez chrystian Gaduła (4,780 p.)
edycja 11 października 2020 przez chrystian
<!Doctype html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Kartka </title>
    <link rel="stylesheet" href="style2.css">
    <meta charset="utf-8">
</head>
<body>
<div id = 'kartka'>
    <div id = 'data'>
    </div>
    <div id='dzien'>
    </div>
    <div id='tydzien'>
    </div>
    <div id='zostalo'>
    </div>
</div>
<script>
    var x = new Date();
    var miesiac = x.getMonth();
    var dzien = x.getDay();
    var liczb = x.getDate();
    if(liczb < 10)
        liczb = '0' + liczb;
    if(miesiac==3||miesiac==5||miesiac==4)
        document.getElementById("kartka").style.backgroundImage = "url('poryroku/wiosna.jpg')";
    if(miesiac==8||miesiac==7||miesiac==6)
        document.getElementById("kartka").style.backgroundImage = "url('poryroku/lato.jpg')";
    if(miesiac==9||miesiac==11||miesiac==10)
        document.getElementById("kartka").style.backgroundImage = "url('poryroku/jesien.jpg')";
    if(miesiac==0||miesiac==1||miesiac==2)
        document.getElementById("kartka").style.backgroundImage = "url('poryroku/zima.jpg')";
    switch(miesiac)
    {
        case 0:
            miesiac = 'Styczeń';
            break;
        case 1:
            miesiac = 'Luty';
            break;
        case 2:
            miesiac = 'Marzec';
            break;
        case 3:
            miesiac = 'Kwiecień';
            break;
        case 4:
            miesiac = 'Maj';
            break;
        case 5:
            miesiac = 'Czerwiec';
            break;
        case 6:
            miesiac = 'Lipiec';
            break;
        case 7:
            miesiac = 'Sierpień';
            break;
        case 8:
            miesiac = 'Wrzesień';
            break;
        case 9:
            miesiac = 'Październik';
            break;
        case 10:
            miesiac = 'Listopad';
            break;
        case 11:
            miesiac = 'Grudzień';
            break;
    }
    switch(dzien)
    {
        case 0:

            dzien = 'Niedziela';
            var result= dzien.fontcolor("red");

            break;
        case 1:
            dzien = 'Poniedziałek';
            break;
        case 2:
            dzien = 'Wtorek';
            break;
        case 3:
            dzien = 'Środa';
            break;
        case 4:
            dzien = 'Czwartek';
            break;
        case 5:
            dzien = 'Piątek';
            break;
        case 6:
            dzien = 'Sobota';
            break;
    }
    document.getElementById("data").innerHTML = miesiac + " " + x.getFullYear();
    document.getElementById("dzien").innerHTML = liczb;
    if(dzien==0)
    {
        document.getElementById("tydzien").innerHTML = result;
    }
    else {document.getElementById("tydzien").innerHTML = dzien;}
    var b = 2021;
    var imie = new Date(b,0,22);
    if(x == imie)
    {
        b++;
        imie = (b,0,22)
    }
    var a = Math.ceil((Date.parse(imie) - Date.parse(x))/1000/60/60/24);
    document.getElementById("zostalo").innerHTML = "Zostało " + a + " dni do imienin <b>Mateusza</b>";

</script>
</body>
</html>
komentarz 11 października 2020 przez ScriptyChris Mędrzec (190,190 p.)

Proszę poprawić opis problemu zgodnie z regulaminem.

2 odpowiedzi

+1 głos
odpowiedź 12 października 2020 przez VBService Ekspert (251,210 p.)
wybrane 12 października 2020 przez chrystian
 
Najlepsza

Zmienna dzień zawiera numer dnia tygodnia (0 - niedziela, 1 - poniedziałek itd.), zwrócony przez metodę getDay() obiektu Date(),

var dzien = x.getDay();

więc nie możesz przypisać wartości stylu do liczby,

var result = dzien.fontcolor("red");

ponieważ style, można przypisać tylko do elementu html. (pomijając fakt, że fontColor -> document.execCommand() )
Masz div-a o id = 'tydzien' , więc można użyć tego div-a.

przez bezpośrednie dodanie stylu:

// <div id='tydzien'></div>

const day = today.getDay();
const week_day_name = document.getElementById('tydzien');
if (day == 0) week_day_name.style.color = 'red';

lub przez dodanie klasy:

<style>
.sunday {
  color: red;
}
</style>

. . .

<script>
  . . .
  if (day == 0) week_day_name.classList.add('sunday');
</script>

Jeżeli mogę Tobie coś zasugerować, to np.:

    if(miesiac==3||miesiac==5||miesiac==4)
        document.getElementById("kartka").style.backgroundImage = "url('poryroku/wiosna.jpg')";
    if(miesiac==8||miesiac==7||miesiac==6)
        document.getElementById("kartka").style.backgroundImage = "url('poryroku/lato.jpg')";
    if(miesiac==9||miesiac==11||miesiac==10)
        document.getElementById("kartka").style.backgroundImage = "url('poryroku/jesien.jpg')";
    if(miesiac==0||miesiac==1||miesiac==2)
        document.getElementById("kartka").style.backgroundImage = "url('poryroku/zima.jpg')";

na

const month = today.getMonth();
let season;

switch (true) {
  case inRange(month,3,5):
    season = 'wiosna';
    break;
  case inRange(month,6,8):
    season = 'lato';
    break;
  case inRange(month,9,11):
    season = 'jesien';
    break;
  case inRange(month,0,2):
    season = 'zima';
    break;
}

const calendar_card = document.getElementById('kartka');
calendar_card.style.backgroundImage = `url('poryroku/${season}.jpg')`;

function inRange(value,lower,upper) {
  return value >= lower &&  value <= upper;
}

kolejna sugestia, zamiast tego przydługiego switch-a

switch(miesiac)
    {
        case 0:
            miesiac = 'Styczeń';
            break;
        case 1:
            miesiac = 'Luty';
            break;
        case 2:
            miesiac = 'Marzec';
            break;
        case 3:
            miesiac = 'Kwiecień';
            break;
        case 4:
            miesiac = 'Maj';
            break;
        case 5:
            miesiac = 'Czerwiec';
            break;
        case 6:
            miesiac = 'Lipiec';
            break;
        case 7:
            miesiac = 'Sierpień';
            break;
        case 8:
            miesiac = 'Wrzesień';
            break;
        case 9:
            miesiac = 'Październik';
            break;
        case 10:
            miesiac = 'Listopad';
            break;
        case 11:
            miesiac = 'Grudzień';
            break;
    }

na, tablice

const months = ['Styczeń','Luty','Marzec','Kwiecień','Maj','Czerwiec',
                'Lipiec','Sierpień','Wrzesień','Październik','Listopad','Grudzień'];
const month_name = months[month];

to samo dla dni

const day = today.getDay();
const week = ['Niedziela','Poniedziałek','Wtorek','Środa',
              'Czwartek','Piątek','Sobota'];
const day_name = week[day];

Pełny kod zawierający sugestie CodePen

komentarz 12 października 2020 przez ScriptyChris Mędrzec (190,190 p.)
edycja 12 października 2020 przez ScriptyChris

Fajne propozycje uproszczenia kodu.

Co do switcha po wartości true używającego funkcji inRange, to można pójść o krok dalej i stworzyć obiekt, którego kluczami będą np. zasięgi miesięcy pór roku, a wartościami ich nazwy. Wtedy switch można zamienić na odwołanie się do property obiektu poprzez wywołanie funkcji:

const month = today.getMonth();
const monthRangesMap = {
    '2-4': 'wiosna',
    '5-7': 'lato',
    '9-11': 'jesien',
    '12-1': 'zima',
};
const season = getSeasonFromMonth(month);

function getSeasonFromMonth(value) {
  const rangeKey = Object.keys(monthRangesMap).find(range => {
    const [min, max] = range.split('-');
    return value >= min && value <= max;
  });
  return monthRangesMap[rangeKey];
}

Na marginesie: metoda .getMonth zwraca liczbę reprezentującą miesiąc od 0 - 11 (co bywa mylące), więc (jeśli sam się nie pomyliłem w "obliczaniu" pór roku) powinieneś skorygować wartości min/max przekazywane do funkcji inRange w switchu. ;)

komentarz 12 października 2020 przez VBService Ekspert (251,210 p.)
edycja 12 października 2020 przez VBService

... (jeśli sam się nie pomyliłem w "obliczaniu" pór roku)  ...

zagubił się sierpień - 8 wink

const monthRangesMap = {
    '3-5': 'wiosna',
    '6-8': 'lato',
    '9-11': 'jesien',
    '0-2': 'zima',
};

Pokusiłbym sie o taki zapis, (bo niby dlaczego monthRangesMap  nie może być częścią funkcji getSeasonByMonthName() laugh )

const today = new Date();
const month = today.getMonth();
const season = getSeasonByMonthName(month);
// console.log(season);
 
function getSeasonByMonthName(value) {
  const monthRangesMap = {
    '3-5': 'wiosna',
    '6-8': 'lato',
    '9-11': 'jesien',
    '0-2': 'zima',
  };
  
  const rangeKey = Object.keys(monthRangesMap).find(range => {
    const [min, max] = range.split('-');
    return value >= min && value <= max;
  });
  
  return monthRangesMap[rangeKey];
}

 

komentarz 12 października 2020 przez ScriptyChris Mędrzec (190,190 p.)

bo niby dlaczego monthRangesMap  nie może być częścią funkcji

A jaki jest sens przy każdym wywołaniu funkcji na nowo tworzyć obiekt, który zawsze będzie mieć tę samą zawartość i nie będzie na nim wykonanych żadnych akcji z efektami ubocznymi (taki typowy obiekt read-only)?

Jeśli iść w tę stronę, to można użyć IIFE, żeby domknąć obiekt i zwrócić funkcję getSeasonByMonthName - wtedy monthRangesMap będzie niedostępne na zewnątrz, ale stworzy się tylko raz; albo stworzyć z tego klasę z polem monthRangesMap i metodą getSeasonByMonthName - tylko po co to robić, gdy działa się na obiekcie typu read-only?

1
komentarz 12 października 2020 przez VBService Ekspert (251,210 p.)

W tym kontekście funkcja jest wywoływana raz, po załadowaniu html-a - tak się domyślam. wink, ale masz rację, z punktu widzenia "dobrych praktyk pisania kodu", monthRangesMap powinna być tylko raz "przypisana" przez silnik js-a.

komentarz 12 października 2020 przez ScriptyChris Mędrzec (190,190 p.)
W sumie nie patrzyłem na liczbę wywołań tej funkcji, więc jeśli w tym przypadku jest wołana raz, to można zrobić tak jak napisałeś. Ale gdyby np. użyć jej do odczytu pór roku dla wybranych kilku miesięcy, to lepiej żeby ten czysto słownikowy obiekt (chyba tak się nazywają obiekty read-only) nie był tworzony za każdym wywołaniem.
komentarz 12 października 2020 przez chrystian Gaduła (4,780 p.)
dziekuje
1
komentarz 13 października 2020 przez VBService Ekspert (251,210 p.)
edycja 13 października 2020 przez VBService

Nie miałem okazji, jeszcze "tworzyć" tego typu IIFEProszę o ewentualną ocenę poprawności, nie chce tworzyć osobnego wpisu,

Jeśli iść w tę stronę, to można użyć IIFE, żeby domknąć obiekt i zwrócić funkcję getSeasonByMonthName ...

bo wydaję mi się, że jest to pewną formą kontynuacji tego wpisusmiley

const getSeasonByMonthName = (() => {
  const monthRangesMap = {
    '3-5':  'wiosna',
    '6-8':  'lato',
    '9-11': 'jesien',
    '0-2':  'zima',
  };
  
  return function(value) {
  	const rangeKey = Object.keys(monthRangesMap).find(range => {
      const [min, max] = range.split('-');
      return value >= min && value <= max;
 	});
    
    return monthRangesMap[rangeKey];
  };
})();

const today  = new Date();
const month  = today.getMonth();
const season = getSeasonByMonthName(month);
console.log(season);

 

1
komentarz 13 października 2020 przez ScriptyChris Mędrzec (190,190 p.)
Tak, o to mi chodziło. ;)
0 głosów
odpowiedź 12 października 2020 przez hoktaur Pasjonat (22,250 p.)

mimo regulaminu :) sry @ScriptyChris

masz:

	let tydzien = document.getElementById("tydzien");
	tydzien.style = (!dzien ? 'color: red': '');
	
    switch(dzien)
    {
        case 0:
            dzien = 'Niedziela';
            break;
        case 1:
            dzien = 'Poniedziałek';
            break;
        case 2:
            dzien = 'Wtorek';
            break;
        case 3:
            dzien = 'Środa';
            break;
        case 4:
            dzien = 'Czwartek';
            break;
        case 5:
            dzien = 'Piątek';
            break;
        case 6:
            dzien = 'Sobota';
            break;
    }
    document.getElementById("data").innerHTML = miesiac + " " + x.getFullYear();
    document.getElementById("dzien").innerHTML = liczb;
	tydzien.innerHTML = dzien;

co zrobiłem

1. przypisałem sobie id='tydzien' do zmiennej 'tydzien' aby nie przeszukiwać wiele razy DOM'a :)

2. niedziela ma 0 więc dodałem negację do dnia wtedy 0 jest 1 a 1, 2, 3, 4.... jest 0 więc nie potrzebujemy nic więcej w warunku :) i ustaliłem styl koloru jeszcze przed zmianą z liczby na dzień

3. potem do zmiennej 'tydzien' przypisałem nazwę dnia

4. rozważ czy dni tygodnia nie przypisać do tablicy

let nazwyDni = ['niedziela', 'poniedziałek', 'wtorek'...];

wtedy nie potrzebujesz warunku tylko

tydzien.innerHTML = nazwyDni[dzien];

 

Podobne pytania

0 głosów
1 odpowiedź 1,009 wizyt
0 głosów
0 odpowiedzi 221 wizyt
pytanie zadane 15 kwietnia 2022 w Inne języki przez Kororowy Nowicjusz (120 p.)
0 głosów
1 odpowiedź 692 wizyt

92,452 zapytań

141,262 odpowiedzi

319,079 komentarzy

61,854 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

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

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!

...