Kako s Javascriptom i CSS-om postaviti izgled stranice koji će se mijenjati ovisno o dobu dana? Pogledajte primjer
Zanimljiva objava pojavila se na forumu developera Dev community o tome kako uz pomoć JavaScripta i CSS-a napraviti web stranicu koja se automatski mijenja ovisno o dobu dana. Tako tijekom dana možete imati svijetlu temu, a kada padne večer i tijekom noći vaša će stranica automatski imati tamnu temu.
Na taj način možete kreirati web stranicu koja automatski mijenja svoj izgled ovisno o dobu dana, stvarajući dinamičnije i privlačnije korisničko iskustvo.
Potrebno je najprije izraditi dvije CSS liste stilova, jedan za svijetlu temu i jedan za tamnu temu.
Ove tablice stilova će definirati boje i druge stilove koji će se koristiti na web stranici.
/* light.css */
body {
background-color: white;
color: black;
}
/* dark.css */
body {
background-color: black;
color: white;
}Potom je moguće iskoristiti JavaScript za otkrivanje trenutnog doba dana i primjenjivanje odgovarajuće tablicu stilova na element HTML stranice.
Evo primjera:
<!DOCTYPE html>
<html>
<head>
<title>Time-Based Theme Example</title>
<script>
// Get the current time
var date = new Date();
var hour = date.getHours();
// Apply the light or dark stylesheet based on the time of day
if (hour >= 6 && hour < 18) {
// If the time is between 6am and 6pm, use the light theme
var link = document.createElement("link");
link.setAttribute("rel", "stylesheet");
link.setAttribute("type", "text/css");
link.setAttribute("href", "light.css");
document.head.appendChild(link);
} else {
// Otherwise, use the dark theme
var link = document.createElement("link");
link.setAttribute("rel", "stylesheet");
link.setAttribute("type", "text/css");
link.setAttribute("href", "dark.css");
document.head.appendChild(link);
}
</script>
</head>
<body>
<h1>Time-Based Theme Example</h1>
<p>This page demonstrates how to use JavaScript, HTML, and CSS to set the theme of a website based on the time of day.</p>
</body>
</html>U gore navedenom primjeru koristi se objekt Date u JavaScriptu kako bi se dobilo trenutno vrijeme, a zatim se koristi naredbu if da se odredi je li vrijeme između 6 ujutro i 6 popodne. Ako jest, primjenjuje se CSS svijetle teme, a ako nije, primjenjuje se CSS stil tamne teme.