代码之家 › 专栏 › 技术社区 › Sergio

javascript Div宽度倒计时

countdown timer math javascript

Sergio · 技术社区 · 8 年前

我试图通过一个分区的宽度来可视化倒计时。这可以用于显示下一个横幅何时滑入的横幅系统,或者用于显示通知可见时间的通知系统。

在下面的例子中,我有 .outer DIV在5秒后清空,但是 .timer Div的宽度未达到 width: 0%; 同时 setTimeout() 开始吧。

变量 len 表示横幅或通知显示的时间。

变量中的计算 offset 是什么让我发火(我想),我似乎无法得到正确的计算。我希望它是动态的,无论什么意思 伦恩 以及外部/父分区的宽度,它将始终取 伦恩 到达时间 宽度: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);

* {
  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: all 1000ms linear;
}

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

2 回复 | 直到 8 年前

Adelin 8 年前

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

davidonet 8 年前

const len = 5000;
let outer = document.querySelector('.outer');

let timer = document.querySelector('.timer');
let timerWidth = timer.offsetWidth;
let offset = 100 * 1000 / 5000;


let interval = setInterval(() => {
init = init - 20;
timer.style.width = init + '%';
}, 1000);

setTimeout(() => {
outer.innerHTML = '';
clearInterval(interval);
}, len + 1000);

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

1 年前

Alex · 在轻量级中同时解构和不解构变量

1 年前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

bairog · 从按属性筛选的对象数组字典中创建值数组

1 年前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

1 年前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

user3472810 · Angular@Output/EventEmitter返回undefined

1 年前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

1 年前