Выполнить действие после того как progress будет меньше

Question

<div class="progress">
    <div class="bar" style="width: 66.2964%; overflow: hidden;">
        <span class="progress_timer">Через 18 сек</span>
    </div>
    <!-- /.bar -->
    <span class="progress_timer">Через 18 сек</span>
</div>

Как выполнить нажатие на type="button" после того как значение будет меньше 18 или же width: 66.2964%; будет меньше 50%

Answer 1

Как выполнить нажатие на type="button" после того как значение будет меньше 18

Могу предложить такой вариант решения...

const ob = document.querySelector('button')
ob.addEventListener('click', _ => {
  const v = `<p>Нажали кнопку ${new Date()}</p>`
  document.querySelector('#test').insertAdjacentHTML('beforeend', v)
})
const action = _ => {
  let ok = true
  return a => {
    let n = a[0].addedNodes[0]?.wholeText ?? ''
    //console.log(n)
    n = +n.match(/\d+/)
    if (ok && n < 18) {
      ok = false
      ob.click()
    }
  }
}
const observer = new MutationObserver(action());
const ot = document.querySelector('.progress_timer')
const config = {
  childList: true
}
observer.observe(ot, config);
test()
//
function test() {
  const txt =  ot.textContent
  const n = +txt.match(/\d+/)
  if (!n) {
    ot.textContent = ''
    return
  }
  ot.textContent = txt.replace(/\d+/, n - 1)
  setTimeout(test, 1000)
}

<div class="progress">
  <div class="bar" style="width: 66.2964%; overflow: hidden;">
    <span class="progress_timer">Через 22 сек</span>
  </div>
</div>
<button>Тест</button>
<div id='test'></div>

БЛОГ НА HUSL

Выполнить действие после того как progress будет меньше

Ответы (1 шт):