JSFiddle - React, Tailwind, and code Playground

by 18_102_elias

HTML

<body>
<h1>
    timelapse
</h1>


<fieldset>
  Nombre de sorties ? <input type='number'  id='input_NbSorties' size='4' min='2' max='90' value ='5'>
  Epaisseur des pics ? <input type='number'  id='input_Epaisseur' size='4' min='1' max='100' value ='5'>
  
    <button id='bouton' class='bouton'>Lancer la simulation</button>
  
  <button id='bouton_MiseAJour' class='bouton'>mettre Ă  jour la planche</button>
  
  Vitesse de la bille : <input type='range'  id='input_vitesse' size='4'  min='1' max='100'>
</fieldset>
  
  
  <p>
   <canvas id="myCanvas" width="500" height="500" ></canvas>
  </p>
  <span id='result'></span>

CSS

canvas { border: 3px solid grey; }
.bouton { height:24px;
          vertical-align: top;
          background-color:rgb(255,255,200); 
          color:black;}

JavaScript

function aff(variable,texte=""){   
             console.log(Object.prototype.toString.call(variable)
             + " --- " + texte, variable);
}





$("#bouton_MiseAJour").on("click",function(){
	init();
})



function init (){
var result = $("#result");
var duree = DUREE/10
}


function ChuteBille (){
alert("chutebille");
aff(compteur);
compteur = compteur-1;
      if (compteur == 0){
      		clearInterval(myVar);
      }
   TombeDroite();
}	  


	var bouton = $("#bouton");
  var sorties;
  var compteur = null;
  var myVar;

  //parseInt(document.getElementById("input_NbSorties").value);

bouton.on('click',function(){		//TimeLapse de la ChuteBille
sorties = parseInt(document.getElementById("input_NbSorties").value);
compteur = sorties-1;
alert("bouton");
			myVar = setInterval(ChuteBille, 1500);	
})