Генерация таймера обратного отсчета на основе количества слов <div> - PullRequest
Новая
       14

Генерация таймера обратного отсчета на основе количества слов <div>

0 голосов
/ 08 марта 2019

Что у меня есть: Таймер обратного отсчета, который идет от 3 секунд до 0 с. 

    <div class="sentence"> This is a sentence.</div>

<p>

<div style='font-family: Arial; font-size: 12px; color:gray'>
<br><span class="timer" id="s2"></span>
<script>
function countdown( elementName, minutes, seconds )
{
    var element, endTime, hours, mins, msLeft, time;

    function twoDigits( n )
    {
        return (n <= 9 ? "0" + n : n);
    }

    function updateTimer()
    {
        msLeft = endTime - (+new Date);
        if ( msLeft < 1000 ) {
            element.innerHTML = "<div style='font-family: Arial; font-size: 12px; color:#eda1a1'>0:00</div>";
        } else {
            time = new Date( msLeft );
            hours = time.getUTCHours();
            mins = time.getUTCMinutes();
            element.innerHTML = (hours ? hours + ':' + twoDigits( mins ) : mins) + ':' + twoDigits( time.getUTCSeconds() );
            setTimeout( updateTimer, time.getUTCMilliseconds() + 500 );
        }
    }

    element = document.getElementById( elementName );
    endTime = (+new Date) + 1000 * (60*minutes + seconds) + 500;
    updateTimer();
}

countdown("s2", 0, 3);//2nd value is the minute, 3rd is the seconds
</script>
</div>

Что я пытаюсь сделать:

Измените количество секунд в таймере обратного отсчета на количество слов в «предложении».

Например, если div содержит:

• «Это предложение» → 4 слова → таймер обратного отсчета идет от 4с до 0с

• «Это предложение» → 3 слова → таймер обратного отсчета переходит от 3 с к 0 с

• «Другое предложение» → 2 слова → таймер обратного отсчета переходит от 2с к 0с

Я уже искал в Google и ничего не нашел; спасибо за любую помощь.

Ответы [ 2 ]

0 голосов
/ 08 марта 2019

// просто разделить содержимое div на пробелы 

var seconds = yourSentenceDiv.innerHTML.split(' ').length; //  * 1000 for setTimeout
0 голосов
/ 08 марта 2019

Вам нужно будет разбить строку на массив, т.е. 

const sentence = document.querySelector('.sentence').innerText.split(' ');

И обновить аргумент до длины sentence, т.е. 

countdown("s2", 0, sentence.length);//2nd value is the minute, 3rd is

JSFiddle

...