javascript - 如何让图像在定时器上淡出

Question

我想让一张照片在计时器过去时一毫米一毫米地消失。

例如，我有倒计时器，代码如下:

function getTimeRemaining(endtime){
  var t = Date.parse(endtime) - Date.parse(new Date());
  var seconds = Math.floor( (t/1000) % 60 );
  var minutes = Math.floor( (t/1000/60) % 60 );
  var hours = Math.floor( (t/(1000*60*60)) % 24 );
  var days = Math.floor( t/(1000*60*60*24) );
  return {
    'total': t,
    'days': days,
    'hours': hours,
    'minutes': minutes,
    'seconds': seconds
  };
}

function initializeClock(id, endtime){
  var clock = document.getElementById(id);
  var daysSpan = clock.querySelector('.days');
  var hoursSpan = clock.querySelector('.hours');
  var minutesSpan = clock.querySelector('.minutes');
  var secondsSpan = clock.querySelector('.seconds');

  function updateClock(){
    var t = getTimeRemaining(endtime);

    daysSpan.innerHTML = t.days;
    hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
    minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
    secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);

    if(t.total<=0){
      clearInterval(timeinterval);
    }
  }

  updateClock();
  var timeinterval = setInterval(updateClock,1000);
}

var deadline = 'April 24 2016 00:00:00 UTC+01:00';
initializeClock('clockdiv', deadline);

#clockdiv{
	font-family: sans-serif;
	color: #fff;
	display: inline-block;
	font-weight: 100;
	text-align: center;
	font-size: 65px;
	text-transform: uppercase;
	
}

#clockdiv > div{
	padding: 10px;
	border-radius: 3px;
	background: 0F0F13;
	display: inline-block;
}

#clockdiv div > span{
	padding: 15px;
	border-radius: 5px;
	background: #0F0F13;
	display: inline-block;
	box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.7);

<div id="clockdiv">
  <div>
    <span class="days"></span>
    <div class="smalltext">days</div>
  </div>
  <div>
    <span class="hours"></span>
    <div class="smalltext">hr</div>
  </div>
  <div>
    <span class="minutes"></span>
    <div class="smalltext">min</div>
  </div>
  <div>
    <span class="seconds"></span>
    <div class="smalltext">sec</div>
  </div>
</div>

我想添加一张图片，随着时间的流逝，它会慢慢消失......

提前致谢

Answer 1

您需要做的是创建一个img，并将其放入容器中。容器将具有overflow:hidden。然后将您的总时间转换为秒。 完成后，执行imagewidth/seconds。这将为您提供一个答案，用于确定图像每秒移动多少像素。例如。 100px 宽的图像，在 50 秒内消失，100/50 = 2 像素/秒。

然后是一个简单的计时器，setInterval()，每秒运行一次。它每秒向 margin-left 属性添加 2px 。当计时器到达 0 时，图像将完全消失。

例如:

• 图像消失的时间 - 10 秒
• 图像宽度 - 100px

100/10 = 每秒 10 像素

• 第 10 秒 - margin-left += 10px = 0px += 10px = 10px
• 第 9 秒 - margin-left += 10px = 10px += 10px = 20px
• 第 8 秒 - margin-left += 10px = 20px += 10px = 30px
• 第 7 秒 - margin-left += 10px = 30px += 10px = 40px
• 第 6 秒 - margin-left += 10px = 40px += 10px = 50px
• 第 5 秒 - margin-left += 10px = 50px += 10px = 60px
• 第四秒 - margin-left += 10px = 60px += 10px = 70px
• 第三秒 - margin-left += 10px = 70px += 10px = 80px
• 第二秒 - margin-left += 10px = 80px += 10px = 90px
• 最后一秒 - margin-left += 10px = 90px += 10px = 100px - 图像完全消失