Question

我的代码中有两个条件。如果此条件成立（基于currentTime），我想将div元素的不透明度从“ 0”更改为“ 1”。

第二个条件相同，但相反。

我的问题：

让我们说它应该在昼/夜阶段工作。

因此，当我想为白天'0'和晚上'1'设置不透明度时，我需要重新加载整个页面。为什么即使我有setInterval也不自动重新加载？

整个代码在这里： https://jsbin.com/huvoluk/1/edit?html,css,js,output

只需编辑这些时间条件，即可了解我要描述的内容。

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

时间条件不是自己执行，需要重新加载整个页面

0 个答案: