第{

Question

有人可以根据时间帮助我吗？

css：

第{

天

  position: absolute;  
  width: 360px;  
  height: 360px;  
  background-image: url("../image/BackgroundDay.png");  
  background-repeat: no-repeat;
}

夜晚{

 position: relative;  
 width: 360px;  
 height: 360px;  
 background-image: url("../image/BackgroundNight.png"); 
 background-repeat: no-repeat;
}

html

    <img id="Day" alt="" style="opacity: 0;"/> 
    <img id="Night" alt="" style="opacity: 0;"/>

js

      var dayToNight1    = '19:05:00';
      var dayToNight2    = '19:05:05';
      var dayToNight3    = '19:05:10';
      var dayToNight4    = '19:05:15';
      var dayToNight5    = '19:05:20';
      var dayToNight6    = '19:05:25';
      var dayToNight7    = '19:05:30';
      var dayToNight8    = '19:05:35';
      var dayToNight9    = '19:05:40';
      var dayToNight10   = '19:05"45';

if(time > dayToNight1)
  {
     document.getElementById("Day").style.opacity = "0.9";
     document.getElementById("Night").style.opacity = "0.1";
  } // i got these conditions 10, I just didnt add them so it is not that long.


      var nightToDay1    = '08:00:00';
      var nightToDay2    = '08:00:05';
      var nightToDay3    = '08:00:10';
      var nightToDay4    = '08:00:15';
      var nightToDay5    = '08:00:20';
      var nightToDay6    = '08:00:25';
      var nightToDay7    = '08:00:30';
      var nightToDay8    = '08:00:35';
      var nightToDay9    = '08:00:40';
      var nightToDay10   = '08:00:45';    

if(time > nightToDay1 && time <= '19:05:00')
{
   document.getElementById("Day").style.opacity = "0.1";
   document.getElementById("Night").style.opacity = "0.9";
}// same here 10 conditions

我的问题是。我有两个图像彼此叠加。

如果特定时间到来，我想从白天更改为夜晚。因此，如果时间到19:00:00，我想仅使用不透明度将背景从白天逐渐更改为夜晚。

然后我将在08:00:00从黑夜到白天。但是问题来了，我不知道该怎么做，并告诉（time> 19:00:00）是否开始更改两个图像的不透明度，并从白天变为夜晚如果时间到19： 00:00直到晚上我都保持透明，而我的浑浊没有转变。

能否给我个快速的思路，如何使用javascript准时做出特定条件？谢谢你的任何想法。或者，如果您有其他想法如何更有效地制作类似的东西，我将不胜感激

Answer 1

我认为这可以使您更接近所需的内容。无需手动指定时间，而是更容易找出过渡开始和结束之间的距离，然后使用它来设置不透明度。

时间在这里用[hours, minutes]的数组表示，然后我们发现每次总共有多少分钟。

我想这还不是很完美，但是它有望说明可能的情况：

const getTotalMinutes = ([hours, minutes]) =>
  (hours * 60) + minutes;

const transitionStart = getTotalMinutes([9, 13]);
const transitionEnd = getTotalMinutes([9, 15]);

const getCurrentTransitionState = () => {
  const now = new Date();
  const totalMinutes = getTotalMinutes([
    now.getHours(),
    now.getMinutes(),
  ]);
  
  const transitionTotal = transitionEnd - transitionStart;
  const timeIntoTransition = totalMinutes - transitionStart;
  
  if (timeIntoTransition >= transitionTotal) {
    return 1;
  }
  
  return timeIntoTransition > 0 ?
    timeIntoTransition / transitionTotal :
    0;
}


setInterval(() => {
  const current = getCurrentTransitionState();
  document.getElementById('day').style.opacity = 1-current;
}, 1000);

img {
  position: fixed;
  top: 0;
  left: 0;
  transition: all 10s ease;
  width: 100vw;
}

<img id="night" src="http://sarahstup.com/wp/wp-content/uploads/2017/01/night-time-background.jpg" />
<img id="day" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT-OLKhRVHgSrPFxIY8n7ZmrgpZQFvgxeT7p3DWifbHBKoF1D57zg" />

JavaScript中的时间条件

第{

夜晚{

1 个答案: