Change Div Background-color based on time of the day
原文
2020-03-01 13:17:49
6
3
javascript/
if-statement/
background-color/
getelementbyid/
document.write
Question
I am using the following script, but I would like to apply it only to the first section of my site and not to the body. (the following code it's working but it applies underneath my #top section).
<script type="text/javascript">
var now = new Date();
var hours = now.getHours();
//Keep in code - Written by Computerhope.com
//Place this script in your HTML heading section
document.write('It\'s now: ', hours, '<br><br>');
document.bgColor="#CC9900";
//18-19 night
if (hours > 17 && hours < 20){
document.write ('<body style="background-color: orange">');
}
//20-21 night
else if (hours > 19 && hours < 22){
document.write ('<body style="background-color: orangered">');
}
//22-4 night
else if (hours > 21 || hours < 5){
document.write ('<body style="background-color: #C0C0C0;">');
}
//9-17 day
else if (hours > 8 && hours < 18){
document.write ('<body style="background-color: #616D7E">');
}
//7-8 day
else if (hours > 6 && hours < 9){
document.write ('<body style="background-color: skyblue">');
}
//5-6 day
else if (hours > 4 && hours < 7){
document.write ('<body style="background-color: steelblue">');
}
else {
document.write ('<body style="background-color: white">');
}
</script>
The HTML part:
<section class="full-height section-scroll" id="top">
<div class="os-animation" data-os-animation="fadeInUp" data-os-animation-delay="0s">
<section class="intro-top">
<h1>This is my H1</h1>
</section>
</section>
And the CSS:
#top {
height: 100vh;
-webkit-transition: background-color 700ms linear;
-moz-transition: background-color 700ms linear;
-ms-transition: background-color 700ms linear;
-o-transition: background-color 700ms linear;
transition: background-color 700ms linear;
background-color: rgba(253, 208, 7, 1);
justify-content: center;
}
#top.scrolled {
background-color: transparent
}
I have tried to change document.write ('<body style="background-color: orange">'); with document.getElementById("top").style.backgroundColor = "orange"; but still it doesn't work.
3 answers
solution1
1 2020-03-01 13:32:51
Instead of document.write you can declare a variable ( color ), set the color based on the time and set the body's color the result.
var now = new Date(); now.setHours(23); var hours = now.getHours(); let color; //Keep in code - Written by Computerhope.com //Place this script in your HTML heading section document.write('It\\'s now: ', hours, '<br><br />'); document.bgColor="#CC9900"; //18-19 night if (hours > 17 && hours < 20){ color = "orange"; } //20-21 night else if (hours > 19 && hours < 22){ color = "orangered"; } //22-4 night else if (hours > 21 || hours < 5){ color = "#C0C0C0"; } //9-17 day else if (hours > 8 && hours < 18){ color = "#616D7E"; } //7-8 day else if (hours > 6 && hours < 9){ color = "skyblue"; } //5-6 day else if (hours > 4 && hours < 7){ color = "steelblue"; } else { color = "white"; } document.body.style.color = color
Or you can use a css variable
var now = new Date(); now.setHours(18); var hours = now.getHours(); let color; //Keep in code - Written by Computerhope.com //Place this script in your HTML heading section document.write('It\\'s now: ', hours, '<br><br />'); document.bgColor="#CC9900"; //18-19 night if (hours > 17 && hours < 20){ color = "orange"; } //20-21 night else if (hours > 19 && hours < 22){ color = "orangered"; } //22-4 night else if (hours > 21 || hours < 5){ color = "#C0C0C0"; } //9-17 day else if (hours > 8 && hours < 18){ color = "#616D7E"; } //7-8 day else if (hours > 6 && hours < 9){ color = "skyblue"; } //5-6 day else if (hours > 4 && hours < 7){ color = "steelblue"; } else { color = "white"; } document.body.style.setProperty('--color', color);
body { color: var(--color); }
solution2
1 ACCPTED 2020-03-01 13:36:43
I can't comment on the post so i will just make it as an answer.
Are you putting the <script></script> on the top of the body / head? If so, move it to the bottom of your body / after the <div id="top"> . Putting the script on head / top of the body won't work because the <script> is being executed before <div id="top"> is rendered.
Your code works fine for me, try this:
<html>
<head>
<style>
#top {
height: 100vh;
-webkit-transition: background-color 700ms linear;
-moz-transition: background-color 700ms linear;
-ms-transition: background-color 700ms linear;
-o-transition: background-color 700ms linear;
transition: background-color 700ms linear;
background-color: rgba(253, 208, 7, 1);
justify-content: center;
}
#top.scrolled {
background-color: transparent
}
</style>
</head>
<body>
<section class="full-height section-scroll" id="top">
<div class="os-animation" data-os-animation="fadeInUp" data-os-animation-delay="0s">
<section class="intro-top">
<h1>This is my H1</h1>
</section>
</section>
<script type="text/javascript">
var now = new Date();
var hours = now.getHours();
//Keep in code - Written by Computerhope.com
//Place this script in your HTML heading section
document.write('It\'s now: ', hours, '<br><br>');
document.bgColor = "#CC9900";
//hours = 4; Just for testing
//18-19 night
if (hours > 17 && hours < 20) {
document.getElementById("top").style.backgroundColor = "orange"
}
//20-21 night
else if (hours > 19 && hours < 22) {
document.getElementById("top").style.backgroundColor = "red"
}
//22-4 night
else if (hours > 21 || hours < 5) {
document.getElementById("top").style.backgroundColor = "#C0C0C0";
}
//9-17 day
else if (hours > 8 && hours < 18) {
document.getElementById("top").style.backgroundColor = "#616D7E";
}
//7-8 day
else if (hours > 6 && hours < 9) {
document.getElementById("top").style.backgroundColor = "skyblue";
}
//5-6 day
else if (hours > 4 && hours < 7) {
document.getElementById("top").style.backgroundColor = "steelblue";
} else {
document.getElementById("top").style.backgroundColor = "white";
}
</script>
</body>
</html>
solution3
0 2020-03-01 13:33:17
try something like this in your CSS:
.red {background : red}
.orangered {background : orangered}
and this in your JavaScript:
if(hours 19 && hours < 22) {
document.getElementById("top").className = 'orangered';
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Change div color on parents background-color
Change background-color of div by width (percentage)
I want to change the background-color from a div in javascript time related
Change Which Table Row Background Color Based on Time of Day
Change div color by finding input background-color
Change Background-Color of Child Div When Parent Div is Hovered
Div background-color change upon drop-down
CSS & JS change div background-color on button hover?
Using setTimeout to temporarily change div background-color
how to change div background-color with fadeIn/Out?
Related Tags