Decompter un chiffre sur un durée

Decompter un chiffre sur un durée - HTML/CSS - Programmation

Marsh Posté le 26-09-2014 à 14:09:45    

Bonjour,  
 
Je cherche a faire une page html (possible inclusion php/javascript) pour faire un compteur.
 
Ce compteur devrait faire un decompte où, a chaques secondes, il retirerai une certaine somme suivant une date a venir.
 
Par exemple :  
 
Si je dois payer 100 000 € dans un mois alors (100000/(3600*30) ou (100000/(3600*24*31) retranchera cette somme par seconde passée.
 
Auriez vous une idée d'un point de depart ?  
 
Je ne sais pas par où commencer bien que j'ai deja un prototype de page en tete ^^
 
La page comporterai au moins une compte a rebours de jours ainsi que le decompte des €€€ :)
 
Merci de votre aide
 
Ibrahim


---------------
Betaserie | Site Perso | YouTube | D3 | PS4
Reply

Marsh Posté le 26-09-2014 à 14:09:45   

Reply

Marsh Posté le 26-09-2014 à 15:31:27    

HTML + javascript si tu comptes laisser la page affichée en permanence, en PHP/HTML/javascript si tu veux que le décompte reprenne à la bonne valeur d'argent et de temps au cas où la page n'aurait pas été affichée en permanence (ex : tu lances le décomptes, laisse, la page affiché qq minutes puis la ferme et tu reviens dessus qq jours plus tard, le décompte ne reprend pas du début mais tient compte du temps écoulé depuis la fermeture de la page et reprendre le décompte).
 
Vu que tu m'as l'air d'être un débutant, je te recommande d'abord d'aller voir qq tutos sur le html et javascript pour faire la version qui reprend depuis le début dans un premier temps (t'auras besoin de 2 champs, un pour saisir une somme, l'autre pour saisir une date et de la fonction setinterval() pour effectuer le décompte).
 
Dans un 2ème temps, tu vas voir qq tutos sur PHP (en particulier les sessions et les fichiers, en effet, faudra stocker la dernière date/heure et montant où ton script en était resté) ainsi que sur ajax.


---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
Reply

Marsh Posté le 26-09-2014 à 19:34:19    

Bonjour,  
 
tout d'abord, merci pour votre réponse rempli d’élément utiles ^^
 
Pour tout dire, ça fait 7 ans (environ) que je m’intéresse et fait du html a plus ou moins grand échelle avec plusieurs projets perso fini ou en cours. (ventardise exclue ^^)
 
Ce que j'aimerai faire c'est un truc dans ce gout la :  
 
http://nsa34.casimages.com/img/2014/09/26/14092607323813567.png
 
En voici le code source :
 

Code :
  1. <!DOCTYPE html>
  3. <head>
  4. <script language="Javascript" type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
  5. <script language="Javascript" type="text/javascript" src="js/jquery.lwtCountdown-1.0.js"></script>
  6. <script language="Javascript" type="text/javascript" src="js/misc.js"></script>
  7. <script language="Javascript" type="text/javascript" src="js/carouFredSel.js"></script>
  8. <script language="Javascript" type="text/javascript" src="js/jquery.roundabout.min.js"></script>
  10. <link rel="Stylesheet" type="text/css" href="style/main.css"></link>
  11. <link rel="Stylesheet" type="text/css" href="style/style.css"></link>
  12. <link rel="Stylesheet" type="text/css" href="style/liquidcarousel.css"></link>
  13. <link rel="Stylesheet" type="text/css" href="style/jshowoff.css"></link>
  14. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  16. <title>Game of Thrones</title>
  17. </head>
  19. <body>
  21.    <header>
  22.  <div id="titre_principale">
  23.        <a><img src="images/Banniere.jpg" alt="Banière Sys Dev Pc" width="900" height="100"/></a>
  24.     </div>
  25.    </header>
  26.  <section>
  27.  <div id="bandeau_header">
  28.      <h3>Winter is comming !!!</h3>
  29.   <a id="menu_header" href="contact.html">Nous contacter</a>
  30.    <a id="menu_header"> | </a>
  31.   <a id="menu_header" href="livres.html">Les Livres</a>
  32.    <a id="menu_header"> | </a>
  33.   <a id="menu_header" href="index.html">Accueil</a>
  34.  </div>
  36. <div id="container">
  38.  <!-- Countdown dashboard start -->
  39.  <div id="countdown_dashboard">
  41.   <div class="dash weeks_dash">
  42.    <span class="dash_title">Semaines</span>
  43.    <div class="digit">0</div>
  44.    <div class="digit">0</div>
  45.   </div>
  47.   <div class="dash days_dash">
  48.    <span class="dash_title">Jours</span>
  49.    <div class="digit">0</div>
  50.    <div class="digit">0</div>
  51.   </div>
  53.   <div class="dash hours_dash">
  54.    <span class="dash_title">Heures</span>
  55.    <div class="digit">0</div>
  56.    <div class="digit">0</div>
  57.   </div>
  59.   <div class="dash minutes_dash">
  60.    <span class="dash_title">Minutes</span>
  61.    <div class="digit">0</div>
  62.    <div class="digit">0</div>
  63.   </div>
  65.   <div class="dash seconds_dash">
  66.    <span class="dash_title">Secondes</span>
  67.    <div class="digit">0</div>
  68.    <div class="digit">0</div>
  69.   </div>
  70.  </div>
  71.  <!-- Countdown dashboard end -->
  72. <a id="annonce">Avant la prochaine saison...</a>
  73. <p><br /></p>
  75. <div id="carousel">
  76. <img src="images/Season_1.jpg" alt="image" width="187" height="310"/>
  77. <img src="images/Season_2.jpg" alt="image" width="187" height="310"/>
  78. <img src="images/Season_3.jpg" alt="image" width="187" height="310"/>
  79. <img src="images/Season_4.jpg" alt="image" width="187" height="310"/>
  80. </div>
  82. <ul id="carousel-descriptions">
  83. <li class="desc current">Saison 01</li>
  84. <li class="desc">Saison 02</li>
  85. <li class="desc">Saison 03</li>
  86. <li class="desc">Saison 04</li>
  87. </ul>
  89. <div id="carousel-controls">
  90. <span class="control current">1</span>
  91. <span class="control">2</span>
  92. <span class="control">3</span>
  93. <span class="control">4</span>
  94. </div>
  96.  <script language="javascript" type="text/javascript">
  98.    $('#countdown_dashboard').countDown({
  99.     targetDate: {
  100.      'day':   29,
  101.      'month':  03,
  102.      'year':  2015,
  103.      'hour':  0,
  104.      'min':   0,
  105.      'sec':   0
  106.     }
  108.    });
  110.  </script>
  112. <script type="text/javascript">
  113. (function($) {
  115. var $descriptions = $('#carousel-descriptions').children('li'),
  116. $controls = $('#carousel-controls').find('span'),
  117. $carousel = $('#carousel')
  118.  .roundabout({childSelector:"img", minOpacity:1, autoplay:true, autoplayDuration:5000, autoplayPauseOnHover:true })
  119.  .on('focus', 'img', function() {
  120.   var slideNum = $carousel.roundabout("getChildInFocus" );
  122.   $descriptions.add($controls).removeClass('current');
  123.   $($descriptions.get(slideNum)).addClass('current');
  124.   $($controls.get(slideNum)).addClass('current');
  125.  });
  127. $controls.on('click dblclick', function() {
  128. var slideNum = -1,
  129.  i = 0, len = $controls.length;
  131. for (; i<len; i++) {
  132.  if (this === $controls.get(i)) {
  133.   slideNum = i;
  134.   break;
  135.  }
  136. }
  138. if (slideNum >= 0) {
  139.  $controls.removeClass('current');
  140.  $(this).addClass('current');
  141.  $carousel.roundabout('animateToChild', slideNum);
  142. }
  143. });
  145. }(jQuery));
  146. </script>
  148. </div>
  149. <p><br /></p>
  150.  </section>
  151.  <footer>
  152.  </footer>
  153. </body>
  155. </html>


 
Et le javascript n'est autre qu'un jQuery ^^
 
Du coup je sais adapter les choses mais je manque encore de ressource.
 
Ce que j'ai déjà est un bon début non ?
 
Il serait pas mal je trouve de stocker les variables date et montant dans le code source de la page a mon sens sous cette forme :  
 
Date de début / Date de fin / montant total.
 
Le Js ferait alors le calcule suivant : (intervalle entre la date de début et de fin) / montant total.
 
C'est schématique, c'est encore en brouillant dans mon cerveau et les enfants hurles a coté de moi...
 
Nul doute que j'aurai plus d’élément en ma possession ce soir ^^
 
Ce projet est pour mon papa qui a besoin d'un compte a rebour pour son usage personnel. Ce pourrait egalement etre un bon outil pour la communauté ^^


---------------
Betaserie | Site Perso | YouTube | D3 | PS4
Reply

Marsh Posté le 27-09-2014 à 12:51:13    

Tu t'emmerdes pour pas grand chose...
 
https://github.com/sophilabs/jquery-counter
 
Utilise ca et basta. T'a la démo ici:
 
http://jquery-countdown.googlecode [...] index.html

Reply

Marsh Posté le 27-09-2014 à 14:27:05    

Bonjour et merci
 
ce ne sera pas suffisant dans mon cas. Car ce script utilise une donnée fixe a afficher
 
Si je met dans le code source 100000€ (par exemple) alors a chaque fois que la page sera rechargé ca repartira de 100000 :'(

Message cité 1 fois

---------------
Betaserie | Site Perso | YouTube | D3 | PS4
Reply

Marsh Posté le 27-09-2014 à 17:27:22    

Je sais pas vraiment ou tu en es côté programmation, mais sur du code client a part en utilisant des cookies/localstorage ou autre, tu n'auras aucun moyen de faire ca...
 
Il te faut passer côté serveur avec du PHP ou autre pour pouvoir faire que le timer ne 'redémarre' pas toujours, mais reprenne là ou le temps restant est actuellement...

Reply

Marsh Posté le 28-09-2014 à 21:12:14    

ibrahim54 a écrit :

Bonjour et merci
 
ce ne sera pas suffisant dans mon cas. Car ce script utilise une donnée fixe a afficher
 
Si je met dans le code source 100000€ (par exemple) alors a chaque fois que la page sera rechargé ca repartira de 100000 :'(


C'était mon point n°2 : passer par PHP et peut-être un fichier pour stocker qq données.


---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed