JavaScript

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

var paramNum = 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;
  }
}

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

if(location.search.match('m')){
  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 animationTemp = 'perWidth {s}s linear infinite';
  var animation = animationTemp.replace('{s}', Math.floor(max));
  $bar.css({animation:animation});

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

    var per10 = Math.ceil(per/10);
    var perBar = '■'.repeat(per10) + '□'.repeat(10-per10);
    document.title = count + ' / ' +  max + '  ' + perBar;

    if(per<=0){
      timeDefault = new Date().getTime();
      if(loop < 5 && isLoop){
        //$iframe.attr({src: 'pin_pon.mp3'});
        loop++;
        $loop.text(loop);
        reset();
        loopAction();
        return;
      }
      $bar.css({backgroundColor:'#f00'});
    } else if(count === 3){
      if(isSounded3 && loop < 5){
        $iframe.attr({src: 'countdown-3seconds.mp3'});
        isSounded3 = false;
      }
    } else if(count <= 10){
      if(isSounded10 && loop < 5){
        $iframe.attr({src: 'pi.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');
    }
    
    var $barClone =$bar.clone();
    $bar.remove();
    $bar = $barClone;
    $divParent.append($bar);

    loopAction();
  }
});

CSS

html,body{
  min-height:100%;
  overflow:hidden;
}

@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:40vmin;
  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);
}
*/