Advertisement
florin88

HTML5 & CSS & jQuery: contdown

Feb 9th, 2014
101
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 2.44 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it">
  3. <head>
  4. <title>HTML5 & CSS & jQuery: countdown</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6.  
  7.     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
  8.  
  9. <script>
  10.     var d = new Date();
  11.     var n = d.getDay();
  12.     if(n == 1 || 2 || 3 || 4 || 5){
  13.     var timer;
  14.     function cdtd() {
  15.         var data = new Date();
  16.         var arrivo = new Date(data.getFullYear(),data.getMonth(),data.getDate(),23,30,00);
  17.         var timeDeff = arrivo.getTime() - data.getTime();
  18.         if (timeDeff <= 0) {
  19.            clearInterval(timer);
  20.                    document.getElementById(id).innerHTML = '';
  21.        }
  22.        var secondi = Math.floor(timeDeff / 1000);
  23.        var minuti = Math.floor(secondi / 60);
  24.        var ore = Math.floor(minuti / 60);
  25.        var giorni = Math.floor(ore / 24);
  26.        ore %= 24;
  27.        minuti %= 60;
  28.        secondi %= 60;
  29.    
  30.        $("#giorniBox").html(giorni);
  31.        $("#oreBox").html(ore);
  32.        $("#minutiBox").html(minuti);
  33.        $("#secondiBox").html(secondi);
  34.    
  35.        timer = setTimeout(cdtd, 1000);
  36.    }
  37.    
  38.    $(document).ready(function() {
  39.         cdtd();
  40. });
  41.      
  42. }
  43.    </script>
  44.      
  45. <style type="text/css">
  46.  
  47. body {
  48.     background-color: black;
  49.  
  50. }
  51.  
  52.     #giorniBox{
  53.              font-size:70px;
  54.              color:#1f62a7;
  55.              font-family:Sans-serif;
  56.              display: inline-block;
  57.     }
  58.      
  59.     #oreBox{
  60.              font-size:70px;
  61.              color:#1f62a7;
  62.              font-family:Sans-serif;
  63.              display: inline-block;
  64.     }
  65.      
  66.      
  67.     #minutiBox{
  68.              font-size:70px;
  69.              color:#1f62a7;
  70.              font-family:Sans-serif;
  71.              display: inline-block;
  72.     }
  73.        
  74.      
  75.     #secondiBox{
  76.              font-size:70px;
  77.              color:#1f62a7;
  78.              font-family:Sans-serif;
  79.              display: inline-block;
  80.     }
  81.      
  82. h1{
  83.         font-size:70px;
  84.         color:#1f62a7;
  85.         font-family:Sans-serif;
  86.         display: inline-block;
  87.     }  
  88.     </style>
  89.  
  90. </head>
  91.  
  92. <body>
  93.       <center>
  94.         <h1>LA GIORNATA FINIRΓ€ TRA:</h1><br />
  95.         <header id="oreBox"></header>
  96.         <h1>:</h1>
  97.         <header id="minutiBox"></header>
  98.         <h1>:</h1>
  99.         <header id="secondiBox"></header>
  100.        </center>
  101. </body>
  102.  
  103.  
  104. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement