Question

我正在尝试为FlipClock JS编写自定义增量函数。所以每隔5-20秒，计数器就会增加1.我尝试使用settimeout函数包围clock.increment代码，我无法让它工作，因为我不知道它实际上在哪里循环。然后我查看了flipclock.js文件本身我设法让它在0.5,0.25上升，我也可以让它延迟启动，但我无法弄清楚如何使它经常增加。我想我可以在clock.increment之前添加类似延迟（500）之类的内容，但我不认为这是循环所在的位置。

如果您需要更多信息，请询问。

谢谢！

Answer 1

我无法找到托管flipclock的CDN，所以这里是代码。

计数器每5到20秒递增+1。

<html>
    <head>
        <link rel="stylesheet" href="../compiled/flipclock.css">

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

        <script src="../compiled/flipclock.js"></script>        
    </head>
    <body>
    <div class="clock" style="margin:2em;"></div>
    <div class="message"></div>

    <script type="text/javascript">
        var clock;
        var nextDoubleJump;
        var internalCounter;

        $(document).ready(function() {
            internalCounter = 0;
            nextDoubleJump = getRandomIntInclusive(5, 20);
            console.log('Next jump value: ' + nextDoubleJump);

            clock = $('.clock').FlipClock({
                clockFace: 'Counter',
                autoStart: false,
            });

            setInterval(function(){
                internalCounter += 1;

                console.log(internalCounter);

                if(internalCounter == nextDoubleJump) {
                    clock.increment();
                    nextDoubleJump = getRandomIntInclusive(5, 20) + internalCounter;
                    console.log('Next jump value: ' + nextDoubleJump);
                }

            }, 1000);
        });

        function getRandomIntInclusive(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min;
        }
    </script>

    </body>
</html>

FlipClock JS自定义增量？

1 个答案: