デジタル時計現在時刻を大画面で表示

画面を開いたままでディスプレイを巨大な時計代わりに活用可能

F11キーで全画面表示可能

  view source
  JavaScript
  var Clock = function(){
  that = this;
  var weeks = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];

  if(window.navigator.language === 'ja'){
    weeks = ['日', '月', '火', '水', '木', '金', '土'];
  }

  var digit = function(n){
    if(n<10){
      n = '0' + n;
    }
    return n;
  }

  var eleDT = document.getElementById('dt');
  var eleW = document.getElementById('w');
  var eleH = document.getElementById('h');
  var eleM = document.getElementById('m');
  var eleS = document.getElementById('s');

  that.updateClock = function(){
    	var now  = new Date();
    	var year = now.getYear() + 1900;
    	var mon  = now.getMonth() + 1;
    	var date = now.getDate();
    	var week = now.getDay();
    	var hour = now.getHours();
    	var min  = now.getMinutes();
    	var sec  = now.getSeconds();
    	
    	var dateDisp = '';
    	var weekDisp = '';
    	dateDisp += mon;
    	dateDisp += '/';
    	dateDisp += date;
    	dateDisp += ' ';
    	weekDisp += '(' + weeks[week] + ')';

      var h = digit(hour);
      var m = digit(min);
      var s = digit(sec);
    	eleDT.textContent = dateDisp;
    	eleW.textContent = weekDisp;
  	  eleH.textContent = h;
  	  eleM.textContent = m;
  	  eleS.textContent = s;
      var title = h + ':' + m + ' - ' + dateDisp;

      if(location.pathname.match(/js-date-clock/)){
    	  document.title = title;
      }
    
  }

  return that;
}





var clock = new Clock();
clock.updateClock();
setInterval(function() {
  clock.updateClock();
}, 999);


$(function(){
  $('#clock').on('dblclick', function(){
    document.body.requestFullscreen();
  });
});

$(function(){
  $('#wView').on('change', function(){
    var on = $(this).prop('checked');
    if(on){
      $('#w').show();
      localStorage.setItem('wView', true);
    } else {
      $('#w').hide();
      localStorage.setItem('wView', false);
    }
  });
  $('#sView').on('change', function(){
    var on = $(this).prop('checked');
    if(on){
      $('#s').show();
      $('#cs').show();
      localStorage.setItem('sView', true);
    } else {
      $('#s').hide();
      $('#cs').hide();
      localStorage.setItem('sView', false);
    }
  });
  $('#isDark').on('change', function(){
    var on = $(this).prop('checked');
    if(on){
      $('#demo').addClass('dark');
      localStorage.setItem('isDark', true);
    } else {
      $('#demo').removeClass('dark');
      localStorage.setItem('isDark', false);
    }
  });

  var wView = localStorage.getItem('wView') === 'true';
  var sView = localStorage.getItem('sView') === 'true';
  var isDark = localStorage.getItem('isDark') === 'true';
  var on = $('#wView').prop('checked', wView);
  var on = $('#sView').prop('checked', sView);
  var on = $('#isDark').prop('checked', isDark);
  $('#wView').trigger('change');
  $('#sView').trigger('change');
  $('#isDark').trigger('change');
});

  CSS
  @font-face {
	font-family: 'LeagueGothic';
	src: url(/fonts/LeagueGothic-Regular.ttf);
}

/*--------------------------------
#Clock
--------------------------------*/
#clock{
  width:100vw;
  height:100vh;
  white-space:nowrap;
  font-family: LeagueGothic, 'Meiryo';
  font-weight: bold;
  display: table;
  width: 100%;
}
#clockView{
  
  display: table-cell;
  vertical-align: middle;
  margin:auto;
  text-align:center;
}
#demo.dark{
  background-color:#000;
  color:#666;
}

#dt,
#hm {
	margin:0 auto;
}
#dt,
#w{
  font-size:18vw;
}
#h,#m,#c,#s{
  border:0 solid #000;
}
#h,#m,#c {
  display:inline-block;
  font-size:36vw;
  text-align:center;
  width:25vw;
}
#c{
  width:6vw;
}
#s,#cs{
  display:inline-block;
  font-size:16vw;
  width:12vw;
  text-align:left;
}
#cs{
  width:4vw;
}

#clockView.inline {
  width:1200px;
  height:240px;
}
#clockView.inline *{
  display:inline-block;
}

  HTML
  
    ページのソースを表示 : Ctrl+U , DevTools : F12
    view-source:https://hi0a.com/demo/-js/js-date-clock/
  
  ABOUT
  
    hi0a.com 「ひまアプリ」は無料で遊べるミニゲームや便利ツールを公開しています。
    プログラミング言語の動作デモやWEBデザイン、ソースコード、フロントエンド等の開発者のための技術を公開しています。
    必要な機能の関数をコピペ利用したり勉強に活用できます。
    プログラムの動作サンプル結果は画面上部に出力表示されています。
    環境:最新のブラウザ GoogleChrome / Windows / Android / iPhone 等の端末で動作確認しています。
    画像素材や音素材は半分自作でフリー素材配布サイトも利用しています。LINK参照。
    動く便利なものが好きなだけで技術自体に興味はないのでコードは汚いです。
    途中放置や実験状態、仕様変更、API廃止等で動かないページもあります。
デジタル時計 現在時刻を大画面で表示

画面を開いたままでディスプレイを巨大な時計代わりに活用可能

JavaScript

CSS

HTML

ABOUT

デジタル時計現在時刻を大画面で表示
