0

как сделать так чтобы когда число дошло до 2021 остановился

let x = document.querySelector(".input")
let y = document.querySelector(".square-second")
let z = document.querySelector(".timer")
window.onscroll = function(){
    x.value = pageYOffset
    if(pageYOffset > 800){
        y.style.backgroundColor = 'green'
        let interval = setInterval(function(){
            z.value++
        },100)
    }
    else if(pageYOffset <900){
        y.style.backgroundColor = 'red'
        z.value=0
    }
}
input{
    position: fixed;
}
.container{
    width: 100%;
    display: flex;
    justify-content: center;
}
.square{
    margin: 20px;
    width: 300px;
    height:300px;
    background-color: red;
}
.square-second{
    margin: 20px;
    width: 300px;
    height:700px;
    background-color: red;
    transition: 0.5s;
    width: 980px;
    position: relative;
    display: flex;
    justify-content: center;
}
.timer{
    font-size: 50px;
    position: absolute;
    background: none;
    width: 200px;
    text-align: center;
    margin-top: 100px;
    outline: none;
    border:none;
}
<input type="" class="input">
            <div class="container">
                <div class = "square"></div>
                <div class = "square"></div>
                <div class = "square"></div>
            </div>
            <div class="container">
                <div class = "square"></div>
                <div class = "square"></div>
                <div class = "square"></div>
            </div>
            <div class="container">
                <div class = "square"></div>
                <div class = "square"></div>
                <div class = "square"></div>
            </div>
            <div class="container">
                <div class = "square"></div>
                <div class = "square"></div>
                <div class = "square"></div>
            </div>
            <div class="container">
            <div class="square-second">
                <input type="text" value = '0' class = "timer">
            </div>
            </div>

3 ответа 3

2

Использовать функцию clearInterval

let interval;

document.getElementById('start').addEventListener('click', function() {
  if (!interval) {
    interval = setInterval(function() {
      const val = ++document.getElementById('val').value;
      if (val == 2021) {
        clearInterval(interval);
        interval = undefined;
      }
    }, 100);
  }
});

document.getElementById('stop').addEventListener('click', function() {
  if (interval) {
    clearInterval(interval);
    interval = undefined;
  }
});
<input id="val" value="2000" /><br/>
<input id="start" type="button" value="Start" />
<input id="stop" type="button" value="Stop" />

0

Вы создаете в условии if(pageYOffset > 800) много счетчиков. Это можно заметить в том как быстро у вас добавляются числа. Как вариант использовать флаг для определения надо ли создавать новый счетчик. И при достижении нужного вам условия этот счетчик удалить через clearInterval.

let x = document.querySelector(".input")
let y = document.querySelector(".square-second")
let z = document.querySelector(".timer")
let isNeedCreatetedCounter = true;
let interval;
window.onscroll = function(){
    x.value = pageYOffset
    if(pageYOffset > 800 && isNeedCreatetedCounter) {
      isNeedCreatetedCounter = false;
        y.style.backgroundColor = 'green'
        interval = setInterval(function(){
            z.value++
        if (z.value === "50") {
             clearTimeout(interval);
           }
        },100);

    } 
  else if(pageYOffset <900){
        y.style.backgroundColor = 'red'
        z.value=0
        clearTimeout(interval);
        isNeedCreatetedCounter = true;
    }

}
input{
    position: fixed;
}
.container{
    width: 100%;
    display: flex;
    justify-content: center;
}
.square{
    margin: 20px;
    width: 300px;
    height:300px;
    background-color: red;
}
.square-second{
    margin: 20px;
    width: 300px;
    height:700px;
    background-color: red;
    transition: 0.5s;
    width: 980px;
    position: relative;
    display: flex;
    justify-content: center;
}
.timer{
    font-size: 50px;
    position: absolute;
    background: none;
    width: 200px;
    text-align: center;
    margin-top: 100px;
    outline: none;
    border:none;
}
<input type="" class="input">
            <div class="container">
                <div class = "square"></div>
                <div class = "square"></div>
                <div class = "square"></div>
            </div>
            <div class="container">
                <div class = "square"></div>
                <div class = "square"></div>
                <div class = "square"></div>
            </div>
            <div class="container">
                <div class = "square"></div>
                <div class = "square"></div>
                <div class = "square"></div>
            </div>
            <div class="container">
                <div class = "square"></div>
                <div class = "square"></div>
                <div class = "square"></div>
            </div>
            <div class="container">
            <div class="square-second">
                <input type="text" value = '0' class = "timer">
            </div>
            </div>

Я сделал условие до 50, чтоб не ждать до 2021.

-1

let x = document.querySelector(".input")
let y = document.querySelector(".square-second")
let z = document.querySelector(".timer")
var per = 1;
window.onscroll = function(){
    x.value = pageYOffset
    if(pageYOffset > 800){
        y.style.backgroundColor = 'green'
        if(per){ 
        var interval = setInterval(work,10)

        per = 0;
        }
        function work(){
            z.value = Number(z.value) + 1;
            if(Number(z.value) == 2021){clearInterval(interval);}
        }
    }
    else if(pageYOffset <900){
        y.style.backgroundColor = 'red'
        z.value=0
    }
}
input{
    position: fixed;
}
.container{
    width: 100%;
    display: flex;
    justify-content: center;
}
.square{
    margin: 20px;
    width: 300px;
    height:300px;
    background-color: red;
}
.square-second{
    margin: 20px;
    width: 300px;
    height:700px;
    background-color: red;
    transition: 0.5s;
    width: 980px;
    position: relative;
    display: flex;
    justify-content: center;
}
.timer{
    font-size: 50px;
    position: absolute;
    background: none;
    width: 200px;
    text-align: center;
    margin-top: 100px;
    outline: none;
    border:none;
}
<input type="" class="input">
            <div class="container">
                <div class = "square"></div>
                <div class = "square"></div>
                <div class = "square"></div>
            </div>
            <div class="container">
                <div class = "square"></div>
                <div class = "square"></div>
                <div class = "square"></div>
            </div>
            <div class="container">
                <div class = "square"></div>
                <div class = "square"></div>
                <div class = "square"></div>
            </div>
            <div class="container">
                <div class = "square"></div>
                <div class = "square"></div>
                <div class = "square"></div>
            </div>
            <div class="container">
            <div class="square-second">
                <input type="text" value = '0' class = "timer">
            </div>
            </div>

Если я вас правильно понял то это будет решением.

6
  • Не находите, что немного глупо вместо того, чтобы остановить таймер, заставлять его делать пустую работу? 9 янв 2021 в 11:40
  • @Anton Shchyrov Это уже вопрос оптимизации. Таймер остановился на 2021? Да, значит все работает верно
    – 2ip
    9 янв 2021 в 11:42
  • @2ip у меня вас скрипт лагает, всмысле сперва печатает медленно 1,2,3,... а потом разгоняется и это не всегда 9 янв 2021 в 11:44
  • @2ip плюс при скроллинге ускоряется 9 янв 2021 в 11:45
  • @Мне без сахара Теперь все должно быть хорошо
    – 2ip
    9 янв 2021 в 11:55

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.