Question

我希望在定时器通过时让照片以毫米为单位消失。

例如我有倒计时器，这里是代码：

＆＃13;

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);

＆＃13;

#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);

＆＃13;

<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>

＆＃13;

我想添加一张在时间过去时会慢慢消失的图片......

提前致谢

Answer 1

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

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

例如：

图像消失的时间 - 100px
图片宽度 - 100/10 = 10 pixels per second

margin-left += 10px

第10秒 - 0px += 10px = 10px = margin-left += 10px
第9秒 - 10px += 10px = 20px = margin-left += 10px
第8秒 - 20px += 10px = 30px = margin-left += 10px
第7秒 - 30px += 10px = 40px = margin-left += 10px
第6秒 - 40px += 10px = 50px = margin-left += 10px
第5秒 - 50px += 10px = 60px = margin-left += 10px
第4秒 - 60px += 10px = 70px = margin-left += 10px
第3秒 - 70px += 10px = 80px = margin-left += 10px
第二秒 - 80px += 10px = 90px = margin-left += 10px
最后一秒 - 90px += 10px = 100px = ng-bind - 图片已完全消失

如何使计时器

1 个答案: