今日の人気記事

  1. さまざまな要素をツールチップで表示「DarkTooltip」

アラート機能付きカウントダウンを作成「downCount」

当ページのリンクには広告が含まれています。

スポンサーリンク

簡単にカウントダウンが作成できるjQueryプラグイン「downCount」を紹介します。

jQueryプラグイン「downCount」

jQueryプラグイン「downCount」は、アラート機能付きのシンプルで使いやすいカウントダウンが作成できるプラグインです。

アラートにお好きな文字列を設定してみましょう。

スポンサーリンク

デモをご覧ください。「TOKYO 2020」までのカウントダウンです。

「sonnyt/downCount」のデモ

デモのソース(HTML + jQuery)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DownCount Plugin - jQueryプラグインまとめのカルマ</title>
<style type="text/css">
ul.countdown {
  list-style: none;
  margin: 25px 0;
  padding: 0;
  display: block;
}
ul.countdown li {
  display: inline-block;
}
</style>
</head>
<body>
<h1>TOKYO 2020</h1>
<ul class="countdown">
  <li>
    <span class="days">00</span> 日
  </li>
  <li>
    <span class="hours">00</span> 時間
  </li>
  <li>
    <span class="minutes">00</span> 分
  </li>
  <li>
    <span class="seconds">00</span> 秒後
  </li>
</ul>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.downCount.js"></script>
<script class="source" type="text/javascript">
$('.countdown').downCount({
  date: '07/24/2020 12:00:00',
  offset: +9
}, function () {
  alert('TOKYO 2020');
});
 </script>

</body>
</html>

その他詳細はこちらからどうぞ。
» downCount

スポンサーリンク

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