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>

Themgw

5 octobre 2021 à 11:47:06

umfred

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

6 octobre 2021 à 10:24:44

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

AbcAbc6

6 octobre 2021 à 12:36:25

Themgw a écrit:

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

Forums des Zéros

Compteur page web

Sujet résolu

Compteur page web

Compteur page web

Sujet résolu

Compteur page web

Supprimer

Modérer

Signaler le message aux modérateurs