ibrahim54 It's over 9000 !!! | 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 :
En voici le code source :
Code :
- <!DOCTYPE html>
- <head>
- <script language="Javascript" type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
- <script language="Javascript" type="text/javascript" src="js/jquery.lwtCountdown-1.0.js"></script>
- <script language="Javascript" type="text/javascript" src="js/misc.js"></script>
- <script language="Javascript" type="text/javascript" src="js/carouFredSel.js"></script>
- <script language="Javascript" type="text/javascript" src="js/jquery.roundabout.min.js"></script>
- <link rel="Stylesheet" type="text/css" href="style/main.css"></link>
- <link rel="Stylesheet" type="text/css" href="style/style.css"></link>
- <link rel="Stylesheet" type="text/css" href="style/liquidcarousel.css"></link>
- <link rel="Stylesheet" type="text/css" href="style/jshowoff.css"></link>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- <title>Game of Thrones</title>
- </head>
- <body>
- <header>
- <div id="titre_principale">
- <a><img src="images/Banniere.jpg" alt="Banière Sys Dev Pc" width="900" height="100"/></a>
- </div>
- </header>
- <section>
- <div id="bandeau_header">
- <h3>Winter is comming !!!</h3>
- <a id="menu_header" href="contact.html">Nous contacter</a>
- <a id="menu_header"> | </a>
- <a id="menu_header" href="livres.html">Les Livres</a>
- <a id="menu_header"> | </a>
- <a id="menu_header" href="index.html">Accueil</a>
- </div>
- <div id="container">
- <!-- Countdown dashboard start -->
- <div id="countdown_dashboard">
- <div class="dash weeks_dash">
- <span class="dash_title">Semaines</span>
- <div class="digit">0</div>
- <div class="digit">0</div>
- </div>
- <div class="dash days_dash">
- <span class="dash_title">Jours</span>
- <div class="digit">0</div>
- <div class="digit">0</div>
- </div>
- <div class="dash hours_dash">
- <span class="dash_title">Heures</span>
- <div class="digit">0</div>
- <div class="digit">0</div>
- </div>
- <div class="dash minutes_dash">
- <span class="dash_title">Minutes</span>
- <div class="digit">0</div>
- <div class="digit">0</div>
- </div>
- <div class="dash seconds_dash">
- <span class="dash_title">Secondes</span>
- <div class="digit">0</div>
- <div class="digit">0</div>
- </div>
- </div>
- <!-- Countdown dashboard end -->
- <a id="annonce">Avant la prochaine saison...</a>
- <p><br /></p>
- <div id="carousel">
- <img src="images/Season_1.jpg" alt="image" width="187" height="310"/>
- <img src="images/Season_2.jpg" alt="image" width="187" height="310"/>
- <img src="images/Season_3.jpg" alt="image" width="187" height="310"/>
- <img src="images/Season_4.jpg" alt="image" width="187" height="310"/>
- </div>
- <ul id="carousel-descriptions">
- <li class="desc current">Saison 01</li>
- <li class="desc">Saison 02</li>
- <li class="desc">Saison 03</li>
- <li class="desc">Saison 04</li>
- </ul>
- <div id="carousel-controls">
- <span class="control current">1</span>
- <span class="control">2</span>
- <span class="control">3</span>
- <span class="control">4</span>
- </div>
- <script language="javascript" type="text/javascript">
- $('#countdown_dashboard').countDown({
- targetDate: {
- 'day': 29,
- 'month': 03,
- 'year': 2015,
- 'hour': 0,
- 'min': 0,
- 'sec': 0
- }
- });
- </script>
- <script type="text/javascript">
- (function($) {
- var $descriptions = $('#carousel-descriptions').children('li'),
- $controls = $('#carousel-controls').find('span'),
- $carousel = $('#carousel')
- .roundabout({childSelector:"img", minOpacity:1, autoplay:true, autoplayDuration:5000, autoplayPauseOnHover:true })
- .on('focus', 'img', function() {
- var slideNum = $carousel.roundabout("getChildInFocus" );
- $descriptions.add($controls).removeClass('current');
- $($descriptions.get(slideNum)).addClass('current');
- $($controls.get(slideNum)).addClass('current');
- });
- $controls.on('click dblclick', function() {
- var slideNum = -1,
- i = 0, len = $controls.length;
- for (; i<len; i++) {
- if (this === $controls.get(i)) {
- slideNum = i;
- break;
- }
- }
- if (slideNum >= 0) {
- $controls.removeClass('current');
- $(this).addClass('current');
- $carousel.roundabout('animateToChild', slideNum);
- }
- });
- }(jQuery));
- </script>
- </div>
- <p><br /></p>
- </section>
- <footer>
- </footer>
- </body>
- </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
|
