大画面タイマー

視覚と音で残り時間を通知ゲームの強化持続時間を管理補助 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(/[Ａ-Ｚａ-ｚ０-９]/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廃止等で動かないページもあります。ご了承下さい。
大画面タイマー

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

JavaScript

CSS

HTML

ABOUT

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