Time condition not executing byself, need to reload whole page

Question

I got two conditions in my code. If this condition becomes true (based on currentTime) I would like to change opacity on div element from '0' to '1'.

Second condition works same but it does opposite.

My problem:

Lets say that it supposed to work as Day / Night phase.

So when I would like to set opacity for day '0' and night '1' I need to reload whole page. Why is that not reloading by itself even though I have there setInterval?

Whole code is here : https://jsbin.com/huvoluk/1/edit?html,css,js,output

Just edit those time condition so you can see what I am trying to describe.

window.onload = function() {
    // TODO:: Do your initialization job
 
 var cs = new Date();
    var hour = cs.getHours();
    var minu = cs.getMinutes();
    var sec = cs.getSeconds();
    var tst = hour +":"+ minu +":"+ sec;

    

    
 function showTime(){
     var date = new Date();
     var h = date.getHours(); // 0 - 23
     var m = date.getMinutes(); // 0 - 59
     var s = date.getSeconds(); // 0 - 59

     
     if(h === 0){
         h = 24;
     }
          
     h = (h < 10) ? "0" + h : h;
     m = (m < 10) ? "0" + m : m;
     s = (s < 10) ? "0" + s : s;
     
     var time = h + ":" + m + ":" + s;
     document.getElementById("MyClockDisplay").innerText = time;
     document.getElementById("MyClockDisplay").textContent = time;
     
      setTimeout(showTime, 100);
                            
                            
      
   
 }

                            showTime();
 
    function showdate(){
     
     var d = new Date();
     var days = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
     document.getElementById("date").innerHTML = days[d.getDay()];
     }
    
    showdate();
    
    // day1 tonight transition
    
          function day1toNight3(){
     if('10:00' <= tst&&tst < '20:35:20')
      {
       document.getElementById("day1").style.opacity = "1";
       document.getElementById("night3").style.opacity = "0";  
           
      }     
         setInterval(day1toNight3, 10000);   
    }
                  day1toNight3();                  
    
    
      function night3toDay1(){
     if('20:35:23' <= tst&&tst < '22:58:00')
      {
       document.getElementById("day1").style.opacity = "0";
       document.getElementById("night3").style.opacity = "1";
         
      }                        
        setInterval(night3toDay1, 10000);               
    }
          
                       night3toDay1(); 
};

html,
body {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    padding: 0;
    background-color: #000000;
    color: #ffffff;
}
.page {
    width: 100%;
    height: 100%;
    display: table;
}
.contents {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    -webkit-tap-highlight-color: transparent;
}

.clock {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    color: #FFFFFF;
    font-size: 30px;
 /*   font-family: Orbitron; */
    letter-spacing: 7px;
}
img {
  position: fixed;
  top: 0%;
  left: 0%;
  height: 360px;
  width: 360px;
  transition: all 5s ease;
}

#day1 {
  position: absolute;
  width: 360px;
  height: 360px; 
  background-repeat: no-repeat;
}

#night3 {
  position: absolute;
  width: 360px;
  height: 360px; 
  background-repeat: no-repeat;
}

#components-main {
    position: absolute;
    width: 100%;
    height: 100%;
}

.showsDate {
 
 position: absolute;
 top: 55%;
 left: 50%;
 transform: translateX(-50%) translateY(-50%);
    color: #FFFFFF;
    font-size: 22px;
 /*   font-family: Orbitron; */
    letter-spacing: 5px;
}

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="description" content="test" />

    <title>Web Basic Application</title>

    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <script src="js/main.js"></script>
</head>

<body>
    <div id="container">    
             
                    
  <img id="day1" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRXHbfK8xm3PQo4fR9O-Q5_EvGnH3Tsixdm1iUay24SH2lYUIhQWw" style="opacity: 0"/>   
  <img id="night3" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSqK7DnhIIS444uMgbgWbPGeOfLmQkZFfvRJU3XkX_z7UBFWzkswQ" style="opacity: 0"/>  
         
  <!--  <div id="backgroundNight" style="opacity: 0;"></div>-->
        
   <div id="MyClockDisplay" class="clock" onload="showTime()"></div>
   <div id="date" class="showsDate"></div>
    <div id="components-main">
     <!--<div id="hand-main-hour"></div>-->
     <div id="hand-main-minute"></div>
     <div id="hand-main-second"></div>  
    </div>     

 </div>
    <script src="js/main.js"></script>
</body>
</html>
00

Well I can, but it won't fit whole code with that small amount of text. I ll get there only these conditions and div elemnts — Cabry, Apr 17 '19 at 13:39
@Taplar Sorry, got it, but now u can't edit time in conditions. So u cant try it out — Cabry, Apr 17 '19 at 13:49
Don't put setInterval inside the function. One interval is enough to keep repeating (it's not the same as setTimeout, which only runs a single time). I'm thinking that, although it may not be the cause of your particular issue, constantly creating more intervals to run the same function could be messing with your code's behavior. — IceMetalPunk, Apr 17 '19 at 14:10
@IceMetalPunk So should I set one interval for both functions in the end of the code? — Cabry, Apr 17 '19 at 14:15
Depends how you want to do it. You can either use a single setInterval for each function you want to repeat, or you can use setTimeout inside the functions. Just don't put setInterval inside the function that's being called from the interval. — IceMetalPunk, Apr 17 '19 at 14:16
@IceMetalPunk I tried setTimeout but it does call the fucntion only after the page is loaded right? It is still not working like that. — Cabry, Apr 17 '19 at 14:19
If you put setTimeout in the onload handler, it'll call the function once when the page loads. Then, if there's another setTimeout inside the function, it'll "reset" (actually create a new timer) and then call the function again. Since every call creates a new timer, it'll repeat forever, same as with a single setInterval. — IceMetalPunk, Apr 17 '19 at 14:20
@IceMetalPunk do you think that you could give me code example of something like this? — Cabry, Apr 17 '19 at 14:23
I don’t think you properly comparing dates in your if condition, please see this example https://stackoverflow.com/a/6148942/10634638 — estinamir, Apr 17 '19 at 15:43
@bestinamir according this thread it should be ok [stack](https://stackoverflow.com/questions/18031410/javascript-if-time-is-between-7pm-and-7am-do-this). In your thread he is comparing two dates, that is different isn't it? — Cabry, Apr 17 '19 at 17:06
May be, still please double check if condition is working with console.log(123); — estinamir, Apr 17 '19 at 17:16
@bestinamir tried, working as I described. It ticks 123 for first condition till i reload the page. Then program gets the second condition — Cabry, Apr 17 '19 at 18:26
Ok, when you set opacity can you also use !important thingy in case it’s not highest priority.. — estinamir, Apr 17 '19 at 18:32
@bestinamir where do I put that? I know that i can use !important in css but in js? — Cabry, Apr 18 '19 at 07:55
You calling setintetval recursively which something you may want try with setTimeout instead.. setinterval you only need to set once.. — estinamir, Apr 20 '19 at 18:54
By the way I left your script running in Edge and it was continuously hammering my quad cpu at 50%, you may want to address that.. — estinamir, Apr 20 '19 at 19:16

Time condition not executing byself, need to reload whole page

0 Answers0