Question

我已经创建了带有时间条件的简单index.html，应该改变div元素的不透明度。

每次我需要重新加载整个页面时，它都不会单独更改。我究竟做错了什么？

main.js

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;

// day1 to day 2 transition

      function day1today20(){
    if('10:00' <= tst&&tst < '15:57:20')
        {
            document.getElementById("day1").style.opacity = "1";
            document.getElementById("night3").style.opacity = "0";  

        }     
     setTimeout(day1today20, 100);   
}
              day1today20();                  


  function day1today2(){
    if('15:57:21' <= tst&&tst < '15:58:00')
        {
            document.getElementById("day1").style.opacity = "0";
            document.getElementById("night3").style.opacity = "1";

        }                        
    setTimeout(day1today2, 100);               
}

                   day1today2(); 
};

html

<!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 watch" />

<title>test watch</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="C:\Users\user\Desktop\index test\images\day1.png" style="opacity: 0"/>   
    <img id="night3" src="C:\Users\user\Desktop\index test\images\night3.png" style="opacity: 0"/>  

<script src="js/main.js"></script>

我在做什么错，为什么night3没有自动加载，我需要重新加载页面？

时间条件不会自动更改背景

0 个答案: