予約確定カウントダウンタイマー

<div class="d10-07-07-wrap">
          <p class="d10-07-07-label">この内容で仮予約中です</p>
          <p class="d10-07-07-timer"><span class="d10-07-07-m">04</span>:<span class="d10-07-07-s">59</span></p>
          <p class="d10-07-07-note">残り時間内にお手続きください</p>
          <div class="d10-07-07-bar"><div class="d10-07-07-bar-in"></div></div>
        </div>

.d10-07-07-wrap{width:100%;max-width:220px;text-align:center;}
        .d10-07-07-label{font-size:11px;color:#999;margin:0 0 6px;}
        .d10-07-07-timer{font-size:32px;font-weight:700;color:#d9364f;letter-spacing:1px;margin:0;font-variant-numeric:tabular-nums;}
        .d10-07-07-note{font-size:10px;color:#999;margin:4px 0 10px;}
        .d10-07-07-bar{height:5px;background:#f0f0f0;border-radius:3px;overflow:hidden;}
        .d10-07-07-bar-in{height:100%;background:#d9364f;width:100%;transition:width 1s linear;}

(function(){
          var root = document.querySelector('.d10-07-07');
          var total = 299;
          var remain = total;
          var mEl = root.querySelector('.d10-07-07-m');
          var sEl = root.querySelector('.d10-07-07-s');
          var barIn = root.querySelector('.d10-07-07-bar-in');
          function render(){
            var m = Math.floor(remain / 60);
            var s = remain % 60;
            mEl.textContent = (m < 10 ? '0' : '') + m;
            sEl.textContent = (s < 10 ? '0' : '') + s;
            barIn.style.width = (remain / total * 100) + '%';
          }
          var timer = setInterval(function(){
            remain--;
            if(remain < 0){ remain = total; }
            render();
          }, 1000);
          render();
        })();