如何在 javascript 中组合循环和 setinterval？

Question

I'm doing an assignment for an introduction to javascript course for school.我正在做一个介绍 javascript 学校课程的作业。 My concept is a plant that grows when you give it water and becomes smaller when it doesn't get water after x amount of time.我的概念是一种植物，当你给它水时它会生长，当它在 x 一段时间后没有水时会变小。 Adding water to the plant to make it grow works, but I'm having a harder time figuring out how to make it shrink over x amount of time.向植物中加水使其生长有效，但我很难弄清楚如何使其在 x 时间内收缩。 I was told to put it in a loop and then add setInterval but I'm a noob so i don't really know what to do.有人告诉我把它放在一个循环中，然后添加 setInterval 但我是一个菜鸟，所以我真的不知道该怎么做。 Also, the code is in dutch!此外，代码是荷兰语！

Thank you for taking the time to help me!!感谢您花时间帮助我！！

HTML HTML

<html lang="nl">

<head>
    <meta charset="UTF-8">
    <title>Hulp of geen hulp. Dat is de vraag.</title>
    <link rel="stylesheet" href="_css/stijl.css">
</head>

<body>

    <header>
        <h1>Help aan/uit.</h1>
    </header>

    <section>
        <p>Wil je weten hoe het werkt? Klik dan op de HELP NU! button.</p>

        <button id='helpbutton1'>HELP NU!</button>

        <div class='helptekst' id='helptekst1' hidden>
            <button  class='wegkruisje' id='wegkruisje1'>X</button>
            <p>Zo dus: <br>
            Je klikt op de helpbutton voor hulp. En als je weet hoe het werkt, kan je de hulp weer wegklikken met het kruisje in de rechter bovenhoek.</p>
        </div>

    </section>


    <footer>
        <p>en onderaan staat ook iets.</p>
    </footer>

    <script src='_js/script.js'></script>
</body>

</html>

JAVASCRIPT: JAVASCRIPT：

console.log('Hier wordt water gegeven. ');

//afbeeldingen
var waterGieters = ['0ml.png','500ml.png', '1000ml.png', '1500ml.png', '2000ml.png'];
var plantGroei = ['plant-baby.png', 'plant-peuter.png', 'plant-kind.png', 'plant-tiener.png', 'plant-volwassen.png'];


// declaratie DOM elementen
var gieterImg = document.querySelector ('#waterGieter');
var plantenImg = document.querySelector ('#planten');
var buitenImg = document.querySelector ('#buiten');
var waterButton = document.querySelector ('#toevoegenWater');
var dagButton = document.querySelector ('#maakDag');
var nachtButton = document.querySelector ('#maakNacht');
var bodyElement = document.querySelector ('body');
var groei = 0 ; //initieel waarde van groei op 0

// Als waterButton geklikt wordt, gaat de plant groeien en watergieter met water vullen. Plaatsjes wordt aangepast per klik.

function groeiPlant() {
    console.log(groei);
    //if(groei<0) {
    //  groei = 0 ;}

    if(groei>=plantGroei.length -1) {
        waterButton.hidden = true ;}


    gieterImg.src = 'images/' + waterGieters[ groei ];
    plantenImg.src = 'images/' + plantGroei[ groei ];
}


// eventHandler functies
function geefWater() {
    groei = groei + 1 ;
    groeiPlant();
}

//Functions om naar dag of nacht te veranderen doormiddel van een button
function maakDag (event) {
    console.log('het is dag');
    buitenImg.src = 'css/dag.png';
    bodyElement.classList.remove('nacht');}

function maakNacht (event) {
    console.log('het is nacht');
    buitenImg.src = 'css/nacht.png';
    bodyElement.classList.add('nacht');}



//eventListener toevoegen aan DOM element
waterButton.addEventListener('click', geefWater);
waterButton.addEventListener('click', groeiPlant);
nachtButton.addEventListener('click', maakNacht);
dagButton.addEventListener('click', maakDag);

Answer 1

I hope this helps, you add water with the button我希望这有帮助，你用按钮加水

 var water = document.getElementById('boton'); var plantSize = 0; function grow(){ plantSize++; console.log(plantSize); } function small(){ plantSize--; console.log(plantSize); } const noWater = setInterval (() => { small() }, 2000); water.addEventListener('click', () => grow());

 <button id="boton"> Water!!! </button>

如何在 javascript 中组合循环和 setinterval？

问题描述

1 个解决方案

解决方案1
0 2020-06-21 23:46:24

如何在 javascript 中组合循环和 setinterval？

问题描述

1 个解决方案

解决方案1 0 2020-06-21 23:46:24

解决方案1
0 2020-06-21 23:46:24