大画面タイマー

視覚と音で残り時間を通知 ゲームの強化持続時間を管理補助 DQX

view source

JavaScript

if(window.innerHeight > 400){
  window.resizeTo(600,240)
  window.moveTo(240,800)
}

var max = 120;
var t;
var per = 0;
var opacity = 1;
var isSounded3 = true;
var isSounded10 = true;
var isLoop = true;
var loop = 0;
var snoozeTime = 0;
document.title = 'timer120';

var paramNum = 1;


var params = new URLSearchParams(location.search.slice(1));

console.log(location.search);
if(location.search){
  var match = location.search.match(/[\d\.]+/);
  if(match){
    console.log(match);
    paramNum = match[0];
    console.log(paramNum);
    paramNum = parseInt(paramNum);
    console.log(paramNum);
  } else {
    paramNum  = max;
  }
  var snoozeTimeMatch = location.search.match(/\+\d+/);
  if(snoozeTimeMatch){
    snoozeTime = Number(snoozeTimeMatch[0].substring(1));
    console.log('snoozeTime:' + snoozeTime);
  }
}


if(location.search.match('n')){
  isLoop = false;
}
console.log({isLoop:isLoop});

if(location.search.match(/\?m\d/)){
  max = 60 * paramNum;
} else if (location.search){
  max = paramNum;
}
console.log(max);

function zenToHan(str){
  str = str.replace(/[A-Za-z0-9]/g, function(s) {
    return String.fromCharCode(s.charCodeAt(0) - 0xFEE0);
  });
  return str;
}

$(function(){
  var $divParent = $('<div>').addClass('parent');
  var $bar = $('<div>').addClass('bar');
  var $back = $('<div>').addClass('back');
  var $panel = $('<div>').addClass('panel');
  var $iframe = $('<iframe>').addClass('iframe forSound');
  var $loop = $('<p>',{title:'loop'}).text(loop).addClass('loop');
  var $input = $('<input>',{title:'input seconds'}).val(max).addClass('input');
  var $button = $('<div>').addClass('button').on('click', function(){
    loop = 0;
    reset();
  });
  var timeDefault = new Date().getTime();
  $(document.body).prepend($button);
  $(document.body).prepend($panel);
  $(document.body).prepend($divParent);
  $(document.body).prepend($loop);
  $(document.body).prepend($input);
  $(document.body).prepend($iframe);
  $divParent.prepend($bar).prepend($back);

  var settingBar = function(){
    var animationTemp = 'perWidth {s}s linear infinite';
    var animation = animationTemp.replace('{s}', Number(max));
    $bar.css({animation:animation});
  }
  settingBar();

  $input.on('change', function(){
    var val = $(this).val();
    val = zenToHan(val);
    location.replace(location.pathname + '?' + val);
  });

  var au = new Audio();
  au.volume = 0.8;

  var loopAction = function(){
    var now = new Date().getTime();
    t = (now - timeDefault)/1000;
    var count = Math.ceil(max-t);
    per = (max-t)/max * 100;
    if(per<-100){return;}

    if(max > 9){
      var maxSq = 10;
      if(max < 20){
        maxSq = max;
      }
      var per10 = Math.ceil(per/10) || 1;
      var perBar = '■'.repeat(per10) + '□'.repeat(10-per10);
      document.title = count + ' / ' +  max + '  ' + perBar;
    }

    if(per<=0){
      timeDefault = new Date().getTime();
      $bar.css({backgroundColor:'#f00'});
      console.log(snoozeTime);
      if(snoozeTime>0){
        $input.val(snoozeTime).trigger('change');
      }
      if(loop < 5 && isLoop){
        //$iframe.attr({src: 'pin_pon.mp3'});
        loop++;
        $loop.text(loop);
        reset();
        loopAction();
        return;
      }
    } else if(count === 3){
      if(isSounded3 && loop < 5){
        $iframe.attr({src: 'countdown-3seconds.mp3'});
        isSounded3 = false;
      }
    } else if(count <= 10){
      if(isSounded10 && loop < 5 && max > 16){
        //https://choimitena.com/Text/Convert
        var mp3filename = params.get('mp3') || 'pi';
        $iframe.attr({src: mp3filename + '.mp3'});
        isSounded10 = false;
      }
      $bar.css({backgroundColor:'#f00'});
      $back.css({backgroundColor:'#f00'});
    } else if(per < 25){
      $bar.css({backgroundColor:'#f60'});
      $back.css({backgroundColor:'#f60'});
    } else if(per < 50){
      $bar.css({backgroundColor:'#cc0'});
      $back.css({backgroundColor:'#cc0'});
    } else {
      $bar.css({backgroundColor:'#fff'});
      $back.css({backgroundColor:'#000'});
    }
    if(per>-400){
      $panel.text(count);
    }
    if(loop > 9){
      clearInterval(timer);
    }
  }


  var timer = setInterval(function(){
    loopAction();
  },500);

  var reset = function(){
    timeDefault = new Date().getTime();
    isSounded3 = true;
    isSounded10 = true;
    opacity = 1;
    if(isLoop){
      $loop.text(loop);
    } else {
      $loop.text('N');
    }
    
    settingBar();
    var $barClone =$bar.clone();
    $bar.remove();
    $bar = $barClone;
    $divParent.append($bar);

    loopAction();
  }
});

CSS

html,body{
  min-height:100%;
  overflow:hidden;
}
h1,h2{
  display:none;
}
@keyframes perWidth {
  0% {width: 100%;}
  100% {width: 0;}
}

.parent{
  width:100%;
  height:100%;
  background-color:#000;
}
.bar{
  position:absolute;
  top:0;
  left:0;
  height:100%;
  width:100%;
  background-color:#eee;
}
.back{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  opacity:.3;
}

.panel{
  position:absolute;
  top:25%;
  left:50%;
  z-index:9;
  font-size:30vmin;
  font-weight:bold;
  font-family:Impact;
  color:#aaa;
  border:none;
  background-color:transparent;
  user-select:none;
  
}
.button{
  position:absolute;
  top:0;
  right:0;
  z-index:12;
  width:50%;
  height:100%;
  cursor:pointer;
  border-left:1px solid #aaa;
  opacity:0.2;
}
.button:hover{
  background-color:#fff;
}

.help{
  position:absolute;
  bottom:0;
  right:0;
  font-size:40px;
  color:#aaa;
}

iframe{
  display:none;
}
input{
  position:absolute;
  top:0;
  left:0;
  z-index:19;
  font-size:24px;
  width:48px;
  height:32px;
  border:0;
  padding:0;
  background-color:rgba(222, 222, 222, 0.5);
}
.loop{
  position:absolute;
  bottom:0;
  left:0;
  z-index:19;
  font-size:24px;
  width:32px;
  height:32px;
  border:0;
  border-radius:50%;
  text-align:center;
  line-height:32px;
  background-color:rgba(222, 222, 222, 0.5);
}
/*
.loop:before{
  display:block;
  content:"";
  position:absolute;
  bottom:0;
  left:0;
  z-index:18;
  
	border-right: 40px solid transparent;
	border-bottom: 40px solid rgba(210,210,210,0.5);
	border-left: 40px solid rgba(210,210,210,0.5);
}
*/

HTML

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

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

ABOUT

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

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

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

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

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

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

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

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