おしゃれなカウントダウン機能17選!


タイマーや時計などは初心者がコードを書く練習の時に時刻の取得、表示方法などで書かれることがあります。ここでは、初心者の域を超えたおしゃれで実用的な時計機能(デザイン)、カウントダウン(タイマー)を厳選して紹介します!

1.Flippin’ Countdown

動きはおしゃれですが、コピペしても使えないです。

See the Pen Flippin’ Countdown by Doug Avery (@averyvery) on CodePen.

2.svg goo effect demonstration

アメーバみたいな増殖を繰り返します。コピペで動かすことができます。

See the Pen svg goo effect demonstration by Lucas Bebber (@lbebber) on CodePen.

3.seconds counter

1分を計測し続けます。コピペで再現できます!

See the Pen seconds counter by Martin Grand (@martingrand) on CodePen.

4.Chess clock inspired Pomodoro timer

Pomodoroです!

See the Pen Chess clock inspired Pomodoro timer by Andrew Creech (@AndrewCreech) on CodePen.

5.my own-clock

See the Pen my own-clock by adel (@adelezz) on CodePen.

6.CSS3 Working Clock

See the Pen CSS3 Working Clock by Ilia (@iliadraznin) on CodePen.

7.Glitch Clock

See the Pen Glitch Clock by Constantine (@dats-wassup) on CodePen.

8.Canvas Wall Clock w/t Night Mode

See the Pen Canvas Wall Clock w/t Night Mode by Moses Holmstrm (@thykka) on CodePen.

9.Pomodoro Clock

See the Pen Pomodoro Clock by Putra Aryotama (@putraaryotama) on CodePen.

10.Javascript Challenge Day 2: Realtime Clock

HTML、CSS、JSで時計が動く!

See the Pen Javascript Challenge Day 2: Realtime Clock by Benjamin Koehler (@Benny29390) on CodePen.

11.Realtime Clock

HTML、CSS、JSで時計が動く!

See the Pen Realtime Clock by morkett (@morkett) on CodePen.

12.React Clock

See the Pen React Clock by Alan Munson (@AlanMunsonTech) on CodePen.

13.Barrel Counter (interactive)

See the Pen Barrel Counter (interactive) by Christian Dinkelborg (@Dinkelborg) on CodePen.

14.Apple Watch style Mickey Mouse clock

See the Pen Apple Watch style Mickey Mouse clock by Kurt Grigg (@Griggy) on CodePen.

15.Analog Clock

See the Pen Analog Clock by Vasko Petrov (@vaskopetrov) on CodePen.

16.Minimal CSS Watch

See the Pen Minimal CSS Watch by Alex Boffey (@alexboffey) on CodePen.

17.Reminder App

See the Pen Reminder App by Irko Palenius (@ispal) on CodePen.

あわせて読みたい

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です