时间戳

首页 > 解决方案 > 如何调用 setInterval 函数

javascript - 如何调用 setInterval 函数

问题描述

setInterval我希望它不是在刷新时运行，而是在单击开始按钮并按时运行。在过去的几个小时里，我几乎尝试了所有变体，但它没有任何错误。

相反，如果时间> 2，则计时器停止，这很有意义。因此，我不确定如何让计时器start在点击后重新启动，以及计时器在达到时间后停止（即 2 秒）

HTML

<script src='https://api.chipware.co.za/js/flipclock-min.js'></script><script  src="./script.js"></script>
<button style="width:200px; height: 50px;" id="start">Start</button>
<button style="width:200px; height: 50px;"onclick="submit()" id="stop">Submit</button>

JS

let time = 2;
var clock = $('.clock').FlipClock(0, {
clockFace: 'HourlyCounter',
countdown: false });

function submit(){
clock.stop();
}

var element_ = document.getElementById("start");
    element_.addEventListener('click', function(){
    start(time);
    });

function start(time){
countup = setInterval(function () { 
    if(clock.getTime().time > time) { 
    clock.stop();
    clearInterval(countup);
    }
    else{
    var element = document.getElementById("stop");
    element.addEventListener('click', function(){
    submit();
    });
}
})};

也不确定为什么此代码本身运行时没有错误，但在 chrome 扩展中，它给出：

Uncaught TypeError: $(...).FlipClock is not a function

标签： javascriptsetinterval

解决方案

我刚刚添加并更新了您缺少的翻转时钟库，现在它可以工作了。

let time = 2;
var clock = $('.clock').FlipClock(0, {
clockFace: 'HourlyCounter',
countdown: false });

function submit(){
clock.stop();
}

var element_ = document.getElementById("start");
    element_.addEventListener('click', function(){
    start(time);
    });

function start(time){

countup = setInterval(function () { 
console.log(clock.getTime().time ,time)
    if(clock.getTime().time > time) { 
    clock.stop();
    clearInterval(countup);
    }
    else{
    var element = document.getElementById("stop");
    element.addEventListener('click', function(){
    submit();
    });
}
})}; 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.7/flipclock.min.js" integrity="sha512-Vy4ftjkcjamOFPNSK7Osn8kYhF7XDcLWPiRvSmdimNscisyC8MkhDlAHSt+psegxRzd/q6wUC/VFhQZ6P2hBOw==" crossorigin="anonymous"></script>
<button style="width:200px; height: 50px;" id="start">Start</button>
<button style="width:200px; height: 50px;"onclick="submit()" id="stop">Submit</button>

推荐阅读