การบ้าน 64070166 ฟิวด์-ไธพัตย์ 15/02/2565 (Copy 13881)

การบ้าน 64070166 ฟิวด์-ไธพัตย์ 15/02/2565 (Copy 13..

✨ SUPAKORN NETSUWAN

<html>
  <style>
    *{
    margin:0 ;
    padding:0 ;
    }
    body{
    }
    .background{
       position:absolute;
       top:0;
       right:0;
       width:100vw;
       height:100vh;
       background-image: url("https://cdn.discordapp.com/attachments/884472367210967072/944911831649095680/night.jpg");
       background-size: cover;
       background-position:center;
       background-repeat:no-repeat;
       z-index:-1;
       transition: all 1s;
    }
    a{
      display:flex;
      align-content:center;
      justify-content:center;
      margin-top:2em;
    }
    h1{
      display:flex;
      align-content:center;
      justify-content:center;
    }
  </style>
  <body>
    <a>
  		<input type="range" min="0" max="1440" value="0" id="test" step="1">
	 </a>
    <h1 id="header">
      Time
    </h1>
    <div class="background"></div>
    <div id="text">
      test
    </div>
  </body>
<script>
  var slide = document.getElementById('test');
  slide.addEventListener('input', function(){
		var colors = slide.value;
    	var header = document.getElementById('header').innerHTML = (Math.ceil(colors/60))%24+':'+colors%60;
    	var bg = document.getElementsByClassName('background')[0];
    	var test = document.getElementById('text').innerHTML = colors;
    if (colors >= 300 || colors <= 420 || colors >= 1020 || colors <= 1140){
		bg.style.background = "url('https://cdn.discordapp.com/attachments/884472367210967072/944917492537634866/noon.png')";
      test.innerHTML = "noon";
    }
    else if (colors > 420 || colors < 1020){
		bg.style.background = "url('https://cdn.discordapp.com/attachments/884472367210967072/944911831326158888/day.png')";
      test.innerHTML = "day";
    }
  });
  </script>
</html>