首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何创建一个计时器,从10开始,到1在3秒?

如何创建一个计时器,从10开始,到1在3秒?
EN

Stack Overflow用户
提问于 2016-05-24 12:54:08
回答 1查看 41关注 0票数 0

我是一个网页设计师,我不是很多的开发人员。我需要创建一个计时器,当用户滚动到页面中显示该div的部分时,该计时器会迅速从10下降到1。我计划使用一个大的粗体字体,里面只有"10“,它会滚动数字9-2,然后停止在1。(也就是说,我不需要计时器也有时间、冒号或分钟。)

有人有什么想法吗?提前谢谢!

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-05-24 12:59:17

这是通过简单的javascript和一个span元素完成的。

代码语言:javascript
运行
复制
var number = 10;
var counter = document.getElementById('counter');
function countDown() {
   counter.innerHTML = '' + number;
   number--;
   if(number > 0) {
      setTimeout(function() { countDown(); }, 1000.0/3);
   }
}
countDown();
代码语言:javascript
运行
复制
<span id="counter"></span>

这将触发计数器后,它弹入可见的部分屏幕上滚动。请注意,我添加了两个项,只是为了测试目的。

代码语言:javascript
运行
复制
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]);
    }
};
代码语言:javascript
运行
复制
<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>

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/37414252

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档