年 月 日 　…まであと

view source

JavaScript

var date = new Date("2020/1/1");
var countDownDate = date.getTime();

var target = document.getElementById('countdown');
target.style.fontSize = '72px';

var countDown = function(){
  var now = new Date().getTime();
  var distance = countDownDate - now;
  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);

  var val = 
    days + "日 " +
    hours + "時間 "+  
    minutes + "分 " + 
    seconds + "秒 ";
  target.textContent = val;
}


$(function(){
  var updateTargetDate = function(){
    var name = $(this).attr('name');
    var y = Number($('[name="year"]').val());
    var m = Number($('[name="month"]').val());
    var d = Number($('[name="date"]').val());
    var dateFormat = [y, m, d].join('/');
    date = new Date(dateFormat);
    countDownDate = date.getTime();
  }

  $('input').on('change', function(){
    updateTargetDate();
  });

  updateTargetDate();
  countDown();
  var x = setInterval(function() {
    countDown();
  }, 1000);

})


/*
指定日時まで(指定日時から) カウントダウンを行う
*/

//https://www.w3schools.com/howto/howto_js_countdown.asp

CSS

form{
  margin:2px;
}
input{
  font-size:64px;
  width:180px;
}
input[name="month"],
input[name="date"]{
  width:120px;
}
#demo{
  height:100vh;
  display:flex;
  justify-content: center;
  align-items: center;
  font-size:32px;
}

HTML

ページのソースを表示 : Ctrl+U , DevTools : F12

view-source:https://hi0a.com/demo/-js/js-date-countdown-timer/

ABOUT

hi0a.com 「ひまアプリ」は無料で遊べるミニゲームや便利ツールを公開しています。

プログラミング言語の動作デモやWEBデザイン、ソースコード、フロントエンド等の開発者のための技術を公開しています。

必要な機能の関数をコピペ利用したり勉強に活用できます。

プログラムの動作サンプル結果は画面上部に出力表示されています。

環境:最新のブラウザ GoogleChrome / Windows / Android / iPhone 等の端末で動作確認しています。

画像素材や音素材は半分自作でフリー素材配布サイトも利用しています。LINK参照。

動く便利なものが好きなだけで技術自体に興味はないのでコードは汚いです。

途中放置や実験状態、仕様変更、API廃止等で動かないページもあります。