Question

我正在尝试通过div的宽度可视化倒计时。可以用于横幅系统显示下一个横幅何时插入，或用于通知系统显示通知多长时间的通知系统。

因此，在下面的示例中，我.outer的div会在5秒钟后清空，但是.timer的div宽度不能与{{1} }。

变量width: 0%;表示横幅或通知将显示多长时间。

变量setTimeout()中的计算使我不满意（我认为），我似乎无法正确计算。我希望它是动态的，这意味着无论len是什么，并且外部/父div的宽度是多少，到达offset总是需要len时间。 / p>

我希望我的解释有意义。任何帮助将不胜感激。

len

width: 0%;

const len = 5000;
let outer = document.querySelector('.outer');

let timer = document.querySelector('.timer');
let timerWidth = timer.offsetWidth;
let offset = len / timerWidth;
let init = 100;

let interval = setInterval(() => {
   init = init - offset;
   timer.style.width = init + '%';
}, 1000);

setTimeout(() => {
   outer.innerHTML = '';
   clearInterval(interval);
}, len);

Answer 1

代码有两个问题：

interval不会在页面加载后立即启动，因此CSS过渡较晚。
offset确实是错误的。

这是我的固定方法：

let toElapse = 3000; // modify as you like
let tick = 1000; //if you modify this don't forget to replicate 
                 //in CSS transition prop
let countDownEl = document.querySelector('#countdown');
let outer = document.querySelector('.outer');
let timer = document.querySelector('.timer');
let init = 100;
// we calculate the offset based on the tick and time to elapse
let offset = init / (toElapse/tick); 
countDownEl.innerHTML = init;

setTimeout(()=>{
  // we need to start the first CSS transition ASAP so it is not late.
  init = init - offset;
  timer.style.width = init.toFixed(2) + '%';
},0)

let interval = setInterval(() => {
  // the same interval.
  countDownEl.innerHTML = init;
  init = init - offset;
  timer.style.width = init.toFixed(2) + '%';
}, tick);

setTimeout(() => {
   // the same clearance timeout
   outer.innerHTML = '';
   clearInterval(interval);
}, toElapse);

* {
  box-sizing:border-box;
}

body {
  padding: 100px 10px 10px;
}

.outer {
  width: 100%;
  border: 1px solid slategray;
  padding: 10px;
}

.timer {
  width: 100%;
  height: 10px;
  background: red;
  transition: width 1s linear;
}

<div class="outer">
  
  <div class="timer"></div><span id="countdown"></span>
  <p>Some Message Here!</p>
</div>

Answer 2

如果使用宽度百分比，则无需知道盒子的宽度。您只需要减去并为超时增加偏移量即可。

PdfContentByte content = pdfStamper.GetOverContent(pageNumber);
iTextSharp.text.Rectangle rectangle = new iTextSharp.text.Rectangle(leftLowerX, leftLowerY, upperRightX, upperRightY);//pdfReader.GetPageSizeWithRotation(x);
rectangle.BackgroundColor = color;
content.Rectangle(rectangle);

JavaScript div宽度倒计时

2 个答案: