今日の人気記事

  1. Tableカラム(列)にソート機能を追加「Tablesorter」
  2. 水平・垂直スクロースのシングルページを実装「fullPage.js」
  3. 時間入力を補助する「timepicker」
  4. バーチャルキーボードを実装「Keyboard」
  5. select要素の複数選択フォームを実装「Multiple Select」

アニメーション効果付きのカウントダウンタイマー・ストップウォッチ「TimeCircle」

スポンサーリンク

タイマーとストップウォッチ機能を実装するプラグイン「TimeCircle」を紹介します。

jQueryプラグイン「TimeCircle」

このプラグインを使えば、指定した日時へのカウントダウンとカウントアップのどちらも実装することができます。

しかも、かっこいい円筒形のタイマーにアニメーション効果付きです。

スポンサーリンク

デモでは、「TOKYO 2020」までのカウントダウンタイマーを実装しました。ご覧ください。

「TimeCircle」のデモ

デモのソース(HTML + jQuery)


<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta name="description" content="TimeCircleのデモでーす。">
<title>TimeCircle - jQueryまとめのカルマ</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="TimeCircles.js"></script>
<link rel="stylesheet" href="TimeCircles.css" />
</head>
<body>
<h1>TimeCircleのデモでーす。</h1>
<h2>TOKYO 2020まで、あと……</h2>
<div class="someTimer" data-date="2020-07-24 00:00:00" style="width: 500px; height: 125px; padding: 0px; box-sizing: border-box; background-color: #E0E8EF"></div>

<script>
  $(".someTimer").TimeCircles();
</script>

</body>
</html>
スポンサーリンク

関連記事(一部広告含む)