var tDefault = 420;
var t;
var per = 0;
var opacity = 1;
var isSounded0 = false;
var isSounded25 = false;
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  = tDefault;
  }
}

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

if(location.search.match('m')){
  tDefault = 60 * paramNum;
} else if (location.search){
  tDefault = paramNum;
}
console.log(tDefault);

$(function(){
  var $divParent = $('<div>').addClass('parent');
  var $div = $('<div>').addClass('bar');
  var $panel = $('<div>').addClass('panel');
  var $iframe = $('<iframe>').addClass('iframe');
  var $loop = $('<p>',{title:'loop'}).text(loop).addClass('loop');
  var $input = $('<input>',{title:'input seconds'}).val(tDefault).addClass('input');
  var $button = $('<div>').addClass('button').on('click', function(){
    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($div);


  var timeTexts = [
    '陣地取り',
    '中央ジュエル出現',
    '外周ジュエル出現 + 援軍',
    '中央ジュエル出現',
    '外周ジュエル出現 + 援軍',
    '中央ジュエル出現',
    '外周ジュエル出現 + 援軍',
  ];
  for(var i=0;i<7;i++){
    var minute = 7-i;
    var $line = $('<div>').addClass('minute-line').css({
      top : i*14.2 +'%'
    }).text(minute + ':00 - ' + timeTexts[i]);
    $(document.body).prepend($line);
  }
  $input.on('change', function(){
    var val = $(this).val();
    location.replace(location.pathname + '?' + val);
  });

  var au = new Audio();
  au.src = 'sound-drip2.mp3';
  au.volume = 0.8;

  var timer = setInterval(function(){
    var now = new Date().getTime();
    t = (now - timeDefault)/1000;
    per = (tDefault-t)/tDefault * 100;
    if(per<-100){return;}
/*
    console.log({
      t:t,
      per:per,
    });
*/
    if(per<0){
      if(!isSounded0 && loop < 5 && isLoop){
        //au.play();
        $iframe.attr({src: 'pin_pon.mp3'});
        opacity-=1/4;
        isSounded25 = false;
        loop++;
        $loop.text(loop);
        if(opacity===0){
          opacity = 1;
        }
        $div.css({opacity:opacity});
        timeDefault = new Date().getTime();
      }
      $div.css({backgroundColor:'#f00'});
    } else if(per<12){
      if(!isSounded25 && loop < 5){
        //au.play();
        $iframe.attr({src: 'sound-drip2.mp3'});
      }
      isSounded25 = true;
      $div.css({backgroundColor:'#f00'});
    } else if(per < 25){
      $div.css({backgroundColor:'#f60'});
    } else if(per < 50){
      $div.css({backgroundColor:'#cc0'});
    } else {
      $div.css({backgroundColor:'#fff'});
    }
    if(per>-400){
      $panel.text(Math.floor(tDefault-t));
    }
    $div.css({height: per+'%'});
    if(loop > 9){
      clearInterval(timer);
    }
  },200);

  var reset = function(){
    isSounded0 = false;
    isSounded25 = false;
    opacity = 1;
    loop = 0;
    if(isLoop){
      $loop.text(loop);
    } else {
      $loop.text('N');
    }
    $div.css({opacity:opacity});
    timeDefault = new Date().getTime();
  }
  $(document.body).on('click', function(e){
    if(!e.clientX){return;}
    if(e.clientX > window.innerWidth/2){
    } else {
    }
  });
});

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

.parent{
  width:100%;
  height:100%;
  background-color:#000;
  position:relative;
  bottom:0;
  left:0;
}
.bar{
  width:100%;
  height:100%;
  background-color:#eee;
  position:absolute;
  bottom:0;
  left:0;
  top:auto;
}

.panel{
  position:absolute;
  top:25%;
  left:50%;
  z-index:9;
  font-size:40vh;
  font-weight:bold;
  font-family:Impact;
  color:#aaa;
  border:none;
  background-color:transparent;
  
}

.minute-line{
  position:absolute;
  top:0;
  left:0;
  z-index:11;
  width:100%;
  height:14.2%;
  border-bottom:2px solid #ff0000;
  font-size:60px;
}

.button{
  position:absolute;
  top:0;
  right:0;
  z-index:12;
  width:100%;
  height:24%;
  cursor:pointer;
  border-bottom: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;
  text-align:center;
  line-height:32px;
}

.loop:before{
  display:block;
  content:"";
  position:absolute;
  bottom:0;
  left:0;
  z-index:18;
  border-top: 40px solid transparent;
	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);
}

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

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