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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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