1isten / flip-clock

3D animated flip clock
https://codepen.io/1isten/pen/BajBVwM
5 stars 1 forks source link

Auto Number Flip Counter #1

Open 56000 opened 2 years ago

56000 commented 2 years ago

How can I flip card from 0-9, stop on certain number with Javascript?(image)

<html>
    <head>
        <link rel="stylesheet" href="flip-clock.css">
    </head>
    <body>
        <div id="flip-clock">
            <div class="flip-clock-container">
                <div class="flip-clock flip-clock-d">
                    <div class="digit digit-R" data-digit-before="R" data-digit-after="R">
                        <div class="card">
                            <div class="card-face card-face-front">R</div>
                            <div class="card-face card-face-back">R</div>
                        </div>
                    </div>
                    <div class="digit digit-M" data-digit-before="M" data-digit-after="M">
                        <div class="card">
                            <div class="card-face card-face-front">M</div>
                            <div class="card-face card-face-back">M</div>
                        </div>
                    </div>
                    <div class="digit digit-0">
                        <div class="card">
                            <div class="card-face card-face-front"></div>
                            <div class="card-face card-face-back"></div>
                        </div>
                    </div>
                    <div class="digit digit-0">
                        <div class="card">
                            <div class="card-face card-face-front"></div>
                            <div class="card-face card-face-back"></div>
                        </div>
                    </div>
                    <div class="digit digit-0">
                        <div class="card">
                            <div class="card-face card-face-front"></div>
                            <div class="card-face card-face-back"></div>
                        </div>
                    </div>
                    <div class="digit digit-0">
                        <div class="card">
                            <div class="card-face card-face-front"></div>
                            <div class="card-face card-face-back"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script src="flip-clock.js"></script>
    </body>
</html>
1isten commented 2 years ago

There is a line with console.log inside the runClock function which logs the current time for your reference. If you want to stop the loop at some certain time, just return the function before the setTimeout execution.

For example if you want top stop when it is 14:30:00,

// ...

console.log(`${now.h0}${now.h1}:${now.m0}${now.m1}:${now.s0}${now.s1}`);

for (const t of Object.keys(els)) {
  // ...
}

// return the function
if (`${now.h0}${now.h1}:${now.m0}${now.m1}:${now.s0}${now.s1}` === '14:30:00') {
  return;
}
// the code below will not be executed, so the loop is stopped
setTimeout(runClock, 1000);
56000 commented 2 years ago

Thank you for your reply. How can I create jackpot pattern: rolling numbers in the flip card, like flip card from 0, stop on certain numbers in each flip card?

On Tue, 16 Nov 2021 at 15:24, STEN @.***> wrote:

There is a line https://github.com/1isten/flip-clock/blob/ee66a1d4b918da946b0a0170df305dd7258531f8/app.js#L55 with console.log inside the runClock function which logs the current time for your reference. If you want to stop the loop at some certain time, just return the function before the setTimeout execution.

For example if you want top stop when it is 14:30:00,

// ... console.log(${now.h0}${now.h1}:${now.m0}${now.m1}:${now.s0}${now.s1}); if (${now.h0}${now.h1}:${now.m0}${now.m1}:${now.s0}${now.s1} === '14:30:00') { return;} // ... // now this line will not be executed, so the loop is stoppedsetTimeout(runClock, 1000);

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/1isten/flip-clock/issues/1#issuecomment-969953649, or unsubscribe https://github.com/notifications/unsubscribe-auth/AWQMN4SK67HVYAQ2OPEWJKDUMIBMHANCNFSM5IDF7Y7Q . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.