0/0 (Sun)

23:59

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

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

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;
  }

  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 = '';
    	dateDisp += mon;
    	dateDisp += '/';
    	dateDisp += date;
    	dateDisp += ' ';
    	dateDisp += '(' + weeks[week] + ')';

      var hmDisp = '';
      hmDisp += digit(hour);
      hmDisp += ':';
      hmDisp += digit(min);

      var eleDT = document.getElementById('dt');
      var eleHM = document.getElementById('hm');
      if(eleDT){
    	  eleDT.textContent = dateDisp;
      }
      if(eleHM){
    	  eleHM.textContent = hmDisp;
      }
      if(location.pathname.match(/js-date-clock/)){
    	  document.title = hmDisp + ' - ' + dateDisp;
      }
    
  }

  return that;
}





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


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

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;
}


#dt,
#hm {
	margin:0 auto;
}
#dt{
  font-size:18vw;
}
#hm {
  font-size:28vw;
}

#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廃止等で動かないページもあります。ご了承下さい。