現在時刻も表示できるカウントダウン・タイマー「countdownTimer」
当ページのリンクには広告が含まれています。
スポンサーリンク
現在時刻も表示できるカウントダウン・タイマーを作成するプラグイン「countdownTimer」を紹介します。
jQueryプラグイン「countdownTimer」
このプラグインを使えば、「日」「時」「分」「秒」などを細かく設定できるカウントダウンと・タイマーをWeb上に作成することができます。
さらに、現在時刻の表示や文字サイズも指定できるので、おすすめプラグインです！
スポンサーリンク
デモのカウントダウン・タイマーをご覧ください。
デモのソース（HTML + jQuery）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="countDownTimer のデモでーす。">
<title>countDownTimer - jQuery Plugin Demo</title>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="jquery.countdownTimer.js"></script>
<link rel="stylesheet" href="jquery.countdownTimer.css" />
</head>
<body>
<p><a href="https://webkaru.net/jquery-plugin/countdown-timer/">「jQueryプラグインまとめ」に戻る</a></p>
<h1>countdownTimerのデモでーす。</h1>
<p>現在時刻</p>
<span id="current_timer"></span>
<script>
$(function(){
$('#current_timer').countdowntimer({
currentTime : true,
size : "lg"
});
});
</script>
<p>3分タイマー</p>
<span id="ms_timer"></span>
<script>
$(function(){
$('#ms_timer').countdowntimer({
minutes :3,
size : "lg"
});
});
</script>
<p>4時間23分タイマー</p>
<span id="hm_timer"></span>
<script>
$(function(){
$('#hm_timer').countdowntimer({
hours :4,
minutes :23,
size : "lg"
});
});
</script>
<p>東京オリンピック開催日までのカウントダウン</p>
<span id="future_date"></span>
<script>
$(function(){
$('#future_date').countdowntimer({
dateAndTime : "2020/07/24 00:00:00",
size : "lg"
});
});
</script>
</body>
</html>
スポンサーリンク