神奈川県伊勢原市在住のkusuのサイトです!ホームページ制作のご依頼等承っております!

JavaScriptを使って、決められた日までの残り日数を表示させるには?

2015.05.27
JavaScript

 求人サイトや学校サイトなどで、よく
“◯◯日まであと残り◯◯日!”
みたいな表示があると思います。この残り日数を見せることで、期日までどれくらいだろ?というのをサイトを見ている人がわざわざ計算せずとも知らせることができるので、覚えて損はない技術になります!

 これはJavaScriptにて意外と簡単に表示させることができたりするので、今回はその書き方を自分へのメモとしても合わせて紹介したいと思います!

1. JavaScriptの基本コード

 まずは残り日数を表示してくれる基本コードを紹介したいと思います。今回は例として2015年12月31日までの残り日数を計算して表示させます。

<script language="javascript">
function apDay(y,m,d) {
  today = new Date();
  apday = new Date(y,m-1,d);
  dayms = 24 * 60 * 60 * 1000;
  n = Math.floor((apday.getTime()-today.getTime())/dayms) + 1;
  document.write(n);
}
</script>

12月31日まで残り<script language="javascript">
apDay(2015,12,31);
</script>日です

このように書いてあげることで、以下のように表示してくれます!


12月31日まで残り日です

ちなみにこのコードにはCSSを適用させることができるので、例えば残り日数だけ強調させたい場合は<strong>~</strong>を使えば太字で表示させることも可能です!試しに太字にしてみたのが以下になります。


12月31日まで残り日です

その他のCSSも適用させることができるので、比較的簡単にデザインを組むことができると思いますo(^-^)o

 今回紹介した残り日数を計算して表示してくれる技術は期限が決められたものがある会社などで活用できる技術だと思いますので、是非ともご活用ください!

スポンサーリンク
検 索