Partage
  • Partager sur Facebook
  • Partager sur Twitter

Compteur page web

    5 octobre 2021 à 11:47:06

    Bonjour, j'aimerais créer une page web qui affiche un compteur pour le lancement de mon site mais malheureusement quand je fais recharger la page ça m'affiche ça. Je vous mets mon code (css et html)+ une photo qui montre la page.
    *
    {
    	margin: 0;
    	padding: 0;
    	font-family: 'poppins', sans-serif;
    	box-sizing: border-box;
    }
    .container{
    	width: 100vw;
    	height: 100vh;
    	background-image: url(images/background.png);
    	background-position: center;
    	background-size: cover;
    	padding: 0 8%;
    	position: relative;
    }
    .logo{
    	width: 120px;
    	padding: 20px 0;
    	cursor: pointer;
    }
    .content{
    	top: 50%;
    	position: absolute;
    	transform: translateY(-50%);
    	color: #fff;
    }
    .content h1{
         font-size: 64px;
         font-weight: 600;	
    }
    .content h1 span{
    	color: #ff3753;
    }
    .content button{
    	background: transparent;
    	border: 2px solid #fff;
    	outline: none;
    	padding: 12px 25px;
    	color: #fff;
    	display: flex;
    	align-items: center;
    	margin-top: 30px;
    	cursor: pointer;
    }
    .content button img{
    	width: 15px;
    	margin-left: 10px;
    }
    .launch-time{
    	display: flex;
    }
    .launch-time div{
    	flex-basis: 100px;
    }
    .launch-time div p{
    	font-size: 60px;
    	margin-bottom: -14px;
    }
    .rocket{
    	width: 250px;
    	position: absolute;
    	right: 10%;
    	bottom: 0;
    	animation: rocket 4s linear infinite;
    }
    @keyframes rocket{
    	0%{
    		bottom: 0;
    		opacity: 0;
    	}
    	100%{
    		bottom: 105%;
    		opacity: 1;
    	}
    }

    <!DOCTYPE html>
    <html>
    <head>
    	<meta name="viewport content="width=device-width, initial-scale=1.0">
    	<title>Coming soon Page</title>
    	<link rel="stylesheet" type="text/css" href="chaise.css">
    </head>
    <body>
    <div class="container">
    	<img src="images/RMS.png" class="logo">
    
    	<div class="content">
    		<p>Ce site est actuellement en maintenance</p>
    		<h1>Ça <span>arrive</span>bientôt</h1>
    		<div class="launch-time">
    			<div>
    				<p id="days">00</p>
    				<span>Days</span>
    			</div>
    			<div>
    				<p id="hours">00</p>
    				<span>Hours</span>
    			</div>
    			<div>
    				<p id="minutes">00</p>
    				<span>Minutes</span>
    			</div>
    			<div>
    				<p id="seconds">00</p>
    				<span>Seconds</span>
    			</div>
    		</div>
    		<button type="button">Plus d'information <img src="images/triangle.png"></button>
    	</div>
    	<img src="images/rocket.png" class="rocket">
    </div>
    
    <script> 
    	var countDownDate = new Date("Oct 30, 2021 00;00;00").getTime();
    	var x = setInterval(function() {
    		var now = new Date().getTime();
    		var distance = countDownDate - now;
    
    		var days = Math.floor(distance / (1000 * 60 * 60 * 24));
            var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
            var seconds = Math.floor((distance % (1000 * 60)) / 1000);
            
            document.getElementById("days").innerHTML = days;
            document.getElementById("hours").innerHTML = hours;
            document.getElementById("minutes").innerHTML = minutes;
            document.getElementById("seconds").innerHTML = seconds;
    
            if(distance < 0){
            	clearInterval(x);
            	document.getElementById("days").innerHTML = "00";
            	document.getElementById("hours").innerHTML = "00";
            	document.getElementById("minutes").innerHTML = "00";
            	document.getElementById("seconds").innerHTML = "00";
            }
    
    	},1000);
    
    
    </script>
    
    </body>
    </html>
    • Partager sur Facebook
    • Partager sur Twitter
      5 octobre 2021 à 15:15:43

      les points virgules de séparateur d'heure dans l'initialisation de countDownDate à changer par des  2 points 

      var countDownDate = new Date("Oct 30, 2021 00:00:00").getTime();

      En tapant la ligne dans la console de ton navigateur, à la fin de new Date("Oct 30, 2021 00;00;00"), ça t'indiques mauvais format de date

      • Partager sur Facebook
      • Partager sur Twitter
        6 octobre 2021 à 10:24:44

        merci beaucoup pour votre réponse, ça m'a aidé à résoudre le problème sur la page 

        • Partager sur Facebook
        • Partager sur Twitter
          6 octobre 2021 à 12:36:25

          Themgw a écrit:

          merci beaucoup pour votre réponse, ça m'a aidé à résoudre le problème sur la page 

          Bonjour,

          Sujet résolu

          Tu peux passer le sujet à "résolu" (bouton en haut à droite du sujet) et cliquer sur les pouces levés des messages qui t'ont aidé⋅e ;)

          • Partager sur Facebook
          • Partager sur Twitter

          Compteur page web

          × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
          • Editeur
          • Markdown