Javascript 时间条件不自动更改背景_Javascript_Html_Css

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

javascript html css

Javascript 时间条件不自动更改背景,javascript,html,css,Javascript,Html,Css,我已经创建了simpleindex.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()

我已经创建了simpleindex.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(); 
};

window.onload=function（）{
//TODO：：执行初始化工作
var cs=新日期（）；
var hour=cs.getHours（）；
var minu=cs.getMinutes（）；
var sec=cs.getSeconds（）；
var tst=小时+“：”+分钟+“：”+秒；
//第1天到第2天的过渡
函数day1today20（）{
如果（'10:00'setTimeout
这些仅在页面加载100毫秒后发生一次。因此应该是setInterval？是的，但每100毫秒检查一次似乎有些过分，…可能高达1000（1秒）它应该是手表，我只是不能添加整个代码。但是当我设置了setInterval设置数字手表时，它冻结了很多，我应该让它超过一秒钟吗？很难说你在这里遇到了什么问题，即使是100毫秒也不应该导致冻结问题。你有没有一个工作示例，也许是敲出一个jsBin，或者更好的是这里没有一个片段o展示问题。。
<!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>