Programmation JavaScript/Programmer en deux minutes/Compteur en temps réel

Un livre de Wikilivres.
Sauter à la navigation Sauter à la recherche
Programmation JavaScript
Programmation JavaScript
Sommaire
  1. Introduction 100 percent.svg
  2. Présentation
  3. Syntaxe 50%.svg
    1. Ligne d'instruction 100 percent.svg
    2. Ordre d'évaluation 100 percent.svg
    3. Bloc d'instructions 100 percent.svg
    4. Identificateurs 100 percent.svg
    5. Expression littérale 100 percent.svg
    6. Commentaire 100 percent.svg
    7. Mots réservés et constantes 100 percent.svg
    8. Variables 100 percent.svg
    9. Opérateurs 100 percent.svg
    10. Structures de contrôle 75%.svg
    11. Fonctions utilisateur 100 percent.svg
    12. Évènement 75%.svg
  4. Objets prédéfinis 00%.svg
    1. window 25%.svg
    2. document 25%.svg
    3. navigator 25%.svg
    4. Array 100 percent.svg
    5. Boolean 00%.svg
    6. Date 25%.svg
    7. Error 00%.svg
    8. Function 00%.svg
    9. Math 25%.svg
    10. Number 25%.svg
    11. Object 00%.svg
    12. String 25%.svg
    13. Element 25%.svg
    14. RegExp 00%.svg
  5. Fonctions prédéfinies
  6. Mise en œuvre
  7. Programmation avancée
    1. Opérateurs de bits 00%.svg
    2. Programmation objet 00%.svg
    3. Gestion d'évennements 00%.svg
    4. Exceptions et erreurs 00%.svg
    5. Interface DOM 00%.svg
    6. Objets Microsoft 00%.svg
    7. Applets Java 00%.svg
    8. Notation JSON 00%.svg
    9. AJAX 00%.svg
  8. Frameworks
    1. Dojo
      1. Hello World
      2. Widgets
      3. Ressources
    2. jQuery
    3. Node.js
    4. React
  9. Tests
    1. Ava
    2. Jest
    3. Selenium
  10. Débogage
  11. Références25%.svg
Modifier ce modèle ce sommaire

Document HTML :

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="fr">
   <head>
   </head>
 
   <body>
	<div id="compteur"></div>

	<script type="text/javascript">
          /* Copier-coller le javascript ici,  
           * ou créez un fichier *.js et déclarez-le dans ce document html.
           */
	</script>

   </body> 
</html>


Le JavaScript peut sembler long mais est très simple : il exécute la fonction RunWarCost() qui se ré-exécute toutes les 100 millisecondes (window.setTimeout()).

Au passage cette fonction calcule le prix et l'affiche dans la division "compteur" du document. (document.getElementById().innerHTML)

Si vous êtes un utilisateur enregistré de Wikipédia, vous pouvez personnaliser votre JavaScript pour ajouter à votre interface plein de choses, dont bien sûr ce compteur. (voir Gadget-WarCost.js)
	
		//////////////////////Start CUSTOMIZATION//////////////////////
		////Le budget affiché:
		//var Gadget_WarCost_WhichWar="US in Afghanistan since 2001";
		//var Gadget_WarCost_WhichWar="US in Iraq since 2003";
		//var Gadget_WarCost_WhichWar="US in Wars since 2001";             
		var Gadget_WarCost_WhichWar="French military budget since 2009";
		 
		////Datas: 
		var totalIraq = 687000000000; // total dollars allocated to Iraq War.
		var startOfIraqWar = new Date("Mar 20, 2003"); // start of Iraq War.
		var IraqBudgetedThrough = new Date("Sept 30, 2009"); // current budget goes to 
		 
		var totalAg  = 228000000000; // total dollars allocated to Afghanistan War.
		var startOfAgWar = new Date("Oct 7, 2001"); 		// start of Afghanistan War.
		var AgBudgetedThrough = new Date("Sept 30, 2009");	// current budget goes to
		 
		var totalFM=186000000000;  //budget militaire français 2009 - 2014
		var startOfFM=new Date("Jan 1, 2009");
		var FMBudgetedThrough=new Date("Dec 31, 2014");

		var separator = "'";
	 
		/////////////////End CUSTOMIZATION/////////////////
		 
		RunWarCost();  ////// Exécute la fonction principale. //
		 
		function RunWarCost(){
		if (Gadget_WarCost_WhichWar == "US in Wars since 2001") { //regarde quelles données afficher.
		  calculateAg();
		  calculateIraq();
		  calculateTotal();
		  var OutNumberWarCost=costOfTotal;
		  } 
		else if (Gadget_WarCost_WhichWar == "US in Iraq since 2003") {
		  calculateIraq();
		  var OutNumberWarCost=costOfIraq;
		  }
		else if (Gadget_WarCost_WhichWar =="US in Afghanistan since 2001") {
		  calculateAg();
		  var OutNumberWarCost=costOfAg;
		  }
		else if (Gadget_WarCost_WhichWar =="French military budget since 2009") {
		  calculateFrenchMilitary();
		  WarCostmoney =" euros";
		  var OutNumberWarCost=costOfFrenchMilitary;
		  }
		else {alert("The value of parameter Gadget_WarCost_WhichWar is wrong.");}
		 
		if (WarCostmoney=="$") { var OutTextCostOfWar=WarCostmoney+number_str(OutNumberWarCost);}
		else { var OutTextCostOfWar=number_str(OutNumberWarCost)+WarCostmoney; } //La chaine de caractere du chiffre actuel
		 
		var compteur = document.getElementById("compteur");
        compteur.innerHTML= "Votre compteur : " + OutTextCostOfWar + " = " + Gadget_WarCost_WhichWar;   //Affiche la chaine de caractere
				   
		window.setTimeout(RunWarCost, 100); ////// Réexécute la fonction principale dans 100 millisecondes. //
		}
	
		function calculateFrenchMilitary () {
		 calculateWarCost(startOfFM,FMBudgetedThrough,totalFM);
		 costOfFrenchMilitary=costOfWarAmount;
		}
		function calculateIraq () {
		 calculateWarCost(startOfIraqWar,IraqBudgetedThrough,totalIraq);
		 costOfIraq=costOfWarAmount;
		}
		function calculateAg () {
		 calculateWarCost(startOfAgWar,AgBudgetedThrough,totalAg);
		 costOfAg=costOfWarAmount;
		}
		function calculateTotal () {
		  costOfTotal = costOfAg + costOfIraq;
		}
		 
		function calculateWarCost (startOfWar,BudgetedThrough,totalMoney) {
		  var totalMS = BudgetedThrough - startOfWar;		// total MS for dollars allocated
		  var ratePerMS     = totalMoney / totalMS;		// the rate per MS of the war so far
		  var curDate = new Date();				// today's date
		  var diff = curDate - startOfWar;			// MS between today and start of the war
		  costOfWarAmount = diff * ratePerMS;    // cost of war at this time
		}
		 
		function number_str(n){
		 var x=n.toString();
		 var dot=x.lastIndexOf('.'); 
		 x=x.substr(0,dot); 
		 var l=x.length; 
		 var res=""; 
		 for(l-=3;l>0;l-=3){res=separator+x.substr(l,3)+res;} 
		 res=x.substr(0,l+3)+res;
		 return res;
		}