如何创建一个从 10 开始并在 3 秒内到达 1 的计时器?
How to create a timer that starts at 10 and goes to 1 in 3 seconds?
我是一名网页设计师,而不是一名开发人员。我需要创建一个计时器,当用户滚动到 div 出现的页面部分时,它会从 10 快速倒计时到 1。我打算使用一个大的粗体字体,里面只有“10”,滚动数字 9-2,然后在 1 处停止。(即,我不需要一个也有小时、冒号、或分钟。
有人有什么想法吗?提前致谢!!!
这是用简单的 javascript 和一个 span 元素完成的。
var number = 10;
var counter = document.getElementById('counter');
function countDown() {
counter.innerHTML = '' + number;
number--;
if(number > 0) {
setTimeout(function() { countDown(); }, 1000.0/3);
}
}
countDown();
<span id="counter"></span>
滚动时弹出屏幕可见部分后会触发计数器。请注意,我添加了两项,仅用于测试目的。
var elements = {
counterA: {
from: 10,
to: 0,
counterStarted: false,
dom: document.getElementById('counterA'),
speed: 1000.0/3
},
counterB: {
from: 400,
to: 49,
counterStarted: false,
dom: document.getElementById('counterB'),
speed: 1000.0/40
}
};
function countDown(el) {
el.dom.innerHTML = '' + el.from;
el.from--;
if(el.from > el.to) {
setTimeout(function() { countDown(el); }, el.speed);
}
}
function triggerCounterIfVisible(el) {
if(el.counterStarted) return;
var elemTop = el.dom.getBoundingClientRect().top;
var elemBottom = el.dom.getBoundingClientRect().bottom;
var isVisible = (elemTop >= 0) && (elemBottom <= window.innerHeight);
if (isVisible) {
el.counterStarted = true;
countDown(el);
}
}
window.onscroll = function() {
for(var el in elements) {
triggerCounterIfVisible(elements[el]);
}
};
<div style="height: 3000px"></div>
<hr />
<p>Counter: <span id="counterA"></span></p>
<div style="height: 3000px"></div>
<hr />
<p>Counter: <span id="counterB"></span></p>
<div style="height: 3000px"></div>
我是一名网页设计师,而不是一名开发人员。我需要创建一个计时器,当用户滚动到 div 出现的页面部分时,它会从 10 快速倒计时到 1。我打算使用一个大的粗体字体,里面只有“10”,滚动数字 9-2,然后在 1 处停止。(即,我不需要一个也有小时、冒号、或分钟。
有人有什么想法吗?提前致谢!!!
这是用简单的 javascript 和一个 span 元素完成的。
var number = 10;
var counter = document.getElementById('counter');
function countDown() {
counter.innerHTML = '' + number;
number--;
if(number > 0) {
setTimeout(function() { countDown(); }, 1000.0/3);
}
}
countDown();
<span id="counter"></span>
滚动时弹出屏幕可见部分后会触发计数器。请注意,我添加了两项,仅用于测试目的。
var elements = {
counterA: {
from: 10,
to: 0,
counterStarted: false,
dom: document.getElementById('counterA'),
speed: 1000.0/3
},
counterB: {
from: 400,
to: 49,
counterStarted: false,
dom: document.getElementById('counterB'),
speed: 1000.0/40
}
};
function countDown(el) {
el.dom.innerHTML = '' + el.from;
el.from--;
if(el.from > el.to) {
setTimeout(function() { countDown(el); }, el.speed);
}
}
function triggerCounterIfVisible(el) {
if(el.counterStarted) return;
var elemTop = el.dom.getBoundingClientRect().top;
var elemBottom = el.dom.getBoundingClientRect().bottom;
var isVisible = (elemTop >= 0) && (elemBottom <= window.innerHeight);
if (isVisible) {
el.counterStarted = true;
countDown(el);
}
}
window.onscroll = function() {
for(var el in elements) {
triggerCounterIfVisible(elements[el]);
}
};
<div style="height: 3000px"></div>
<hr />
<p>Counter: <span id="counterA"></span></p>
<div style="height: 3000px"></div>
<hr />
<p>Counter: <span id="counterB"></span></p>
<div style="height: 3000px"></div>