Webに時計を表示する　いますぐ使える！おしゃれな時計のコード例

時刻を表示することは、Web上ではとても一般的なことです。しかしそれは、私たちがいつも身に付けたり、壁にかけたりしているものだけに限定されません。

 

もちろん、昔ながらの時計を、おしゃれなウェブやアプリに追加することはできます。しかし、それは一定の場合には役立つかもしれませんが、私たちのデバイスのスクリーンには、すでに一般的な時計が表示されています。

 

時間が真に輝くのは、時をカウントしているときです。あなたのウェブサイトにオンラインクイズや大きなプロジェクトが開始されるまでの日数を表示しているか否かにかかわらず、これらのアイテムは、サイトに少しのワクワクを追加することができるのです。

 

さらに、これらは多くのユーザーにとって重要な役割を果たすこともできます。

 

そこで、あなたのサイトに、時間に関する機能を追加できる、いくつかのコードスニペットを見てみましょう。

 

 

高機能なVue

まず最初の例は、一般的な時計と調和する一方できわめてモダンな外見的特徴をもちます。これはVue.jsで構築され、最も基本的な技術であっても、デザインがどのように個性を加えることができるのかを示しています。

See the Pen
Digital Clock with Vue.js by Toshiyuki TAKAHASHI (@gau)
on CodePen.

 

メタ

時計でできた・・・時計？なんだかとても斬新ですが、それは実際、CSSだけのスニペットです。

小さな時計が集められて作られた時計の針は、時をカウントするため一斉に動きます。まるでスイスの最高級時計のように、その動きは信じられないほど精巧です。

See the Pen
Digital Clock with Vue.js by Toshiyuki TAKAHASHI (@gau)
on CodePen.

 

 

開始までのカウントダウン

カウントダウンは、例えば新製品や会議、映画のプレミアといったような大きなイベントへの期待を高めるために広く利用されています。

 

カウントダウンは楽しいだけでなくとても便利です。これについての魅力的な例は、24時間のカウントダウンを、伝統的なフリップスタイルで私たちに提供してくれます。

See the Pen
Digital Clock with Vue.js by Toshiyuki TAKAHASHI (@gau)
on CodePen.

 

次の休暇はいつだってすぐそこに

アメリカの独立記念日のような特定の休暇にフォーカスしたいe-コマースサイトにとって、カウントダウンはとても有益です。

 

しかし、このような特別な要素は、カレンダーに定められた休日でなくとも、たとえばあなたが注意を惹きたい特定の休暇にフォーカスさせる場合においても非常に有効です。

See the Pen
Digital Clock with Vue.js by Toshiyuki TAKAHASHI (@gau)
on CodePen.

 

 

クイックタイム

Splash screensは、近年またその人気が戻ってきたように見えます。次のページへのクリックスルーをするユーザーの数が減るかわりに、リダイレクトはあなたの主張を便利に伝えるための良い方法となりました。

 

この古いカウントダウンアニメ―ションは、このような利用に最適といえるでしょう。

See the Pen
Movie Style Film Countdown by Craig Roblewsky (@PointC)
on CodePen.

 

高級感

最高仕様の時計は、決して時代遅れになることはありません。その美しい外観と精緻な動きで人々の心を捉えます。

 

これは、ロレックスを本物そっくりに再現したものです。もしかするとあなたの日々のウェブサイトの直接的な役に立たないかもしれませんが、しかし、これには私たちを惹きつける何かがあります。

See the Pen
Movie Style Film Countdown by Craig Roblewsky (@PointC)
on CodePen.

 

ストップウオッチ

スポーツと同義のものとして、ストップウォッチはオリンピックからF1におけるFormula 1のラップタイム測定においてまで幅広く時を刻んでいます。

 

この意味で、CSSによる再現はとてもシンプルで、そしてとても美しいものです。その動きは人を圧倒するものではありませんが、人の目を惹くのに十分です。

See the Pen
Movie Style Film Countdown by Craig Roblewsky (@PointC)
on CodePen.

 

世界中で

もしかすると、オンラインの時計の最も有効な利用方法は、様々なタイムゾーンを表示することかもしれません。

 

この豪華なスニペットはVue.jsを使用して、世界中の時計を表示するためのブラウザを起動させます。選択した場所によって、日中から夜までの表示がどのように変化するのかに注目してみてください。

See the Pen
Vue Time Comparison by Sarah Drasner (@sdras)
on CodePen.

 

最後に

あなたのウェブサイトに時間を表示することは、その形にかかわらず、あなたのウェブサイトをその細部においてまで高めてくれます。時計が主な特徴である必要はないとしても、時を知り、そして楽しむための手段として役に立ちます。

 

これらの時計やタイマーは、ウェブデザインの使いやすさを超えて、JavaScriptがどのようなプログラム言語であるかについての素晴らしい紹介としても役に立ちます。

 

上記のスニペットを詳しく分析することによって、これらの数多くのコードひとつひとつが、どのように一体のものとなっているのかを理解することができるでしょう。

 

あなたが双方向機能をあなたのウェブサイトに追加しようと思っている、或いは、まずは試してみようと思っているかにかかわらず、これらのコレクションの中には、必ず何かしらあなたの気になるものがあるでしょう。