Page construction avec compte à rebours style01

<!DOCTYPE html>
<html lang="fr" prefix="og: http://ogp.me/ns#">
<head>
	<title> PAGE CONSTRUCTION AVEC COMPTE À REBOURS | par NGLESSON </title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="keyword" content="PAGE CONSTRUCTION AVEC COMPTE À REBOURS">
	<meta name="author" content="Mezgani said">
	<meta name="copyright" content="NGLESSON">
	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
	<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" >
	<link href="style.css" rel="stylesheet" type="text/css" />	
</head>
<body>
<div id="countdown" class="mb-5">
	<section class="container">
		<div class="row text-center mx-auto">
			<div class="col-lg-12">
				<h1 class="text-center"><i class="fa fa-calendar"></i> Prochainement</h1>
			</div>
			<div class="col-lg-2 col-md-2 col-sm-2 col-3 hidden-sm hidden-xs"></div>
			<div class="col-lg-2 col-md-2 col-sm-3 col-3">
				<span id="countdown_day" class="compterebour">--</span><br>
				<p>J</p>
			</div>
			<div class="col-lg-2 col-md-2 col-sm-3 col-3">
				<span id="countdown_hour" class="compterebour">--</span><br>
				<p>H</p>
			</div>
			<div class="col-lg-2 col-md-2 col-sm-3 col-3">	
				<span id="countdown_min" class="compterebour">--</span><br>
				<p>M</p>
			</div>
			<div class="col-lg-2 col-md-2 col-sm-3 col-3">	
				<span id="countdown_sec" class="compterebour">--</span><br>
				<p>S</p>
			</div>
			<div class="col-lg-2 col-md-2 col-sm-2 col-3 hidden-sm hidden-xs"></div>
		</div>
	</section>
</div>
<footer class="container mt-5">
    <div class="row text-center mx-auto">
		<div class="col-lg-12">
		<ul class="pull-right ulRS">
			<li><a href="" target="_blank" class="RSlien"><i class="fa fa-facebook"></i> #NGLESSON</a></li>
			<li><a href="" target="_blank" class="RSlien"><i class="fa fa-linkedin"></i> #NGLESSON</a></li>
			<li><a href="" target="_blank" class="RSlien"><i class="fa fa-twitter"></i> #NGLESSON</a></li>
			<li><a href="" target="_blank" class="RSlien"><i class="fa fa-youtube"></i> #NGLESSON</a></li>
		</ul>
		</div>
	</div>
</footer>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="script.js"></script>	
</body>
</html>
*{margin:0;padding:0;}

body{
	width:100%;
	height:100%;
	background: linear-gradient( rgba(0, 0, 0, 0.25),rgba(0, 0, 0, 0.25)),url("../../assets/imgs/forcode/bkpage1.jpg") center center no-repeat fixed;
	background-size: cover;
	color:#000;
}

section p{
	font-weight:bold;
	color:#fff;
	font-size: 20px;
}

#countdown{
	padding-top:3%;
	padding-bottom:3%;
	margin-top:10%;
	background-color: rgba(255, 255, 255, 0.2);
    width: 100%;
}

#countdown h1{
	color:#FFF;
	text-transform:uppercase;
}

.compterebour {
	text-align:center;
	width: 70%;
    background: #FFF;
    color: #000;
    font-size: 25px;
    padding: 20%;
    margin-top: 10px;
    border-radius: 50%;
    margin-bottom: 10px;
    display: inline-block;
}

footer{
	margin-top: 30px;
	margin-bottom: 30px;
}
	
.ulRS li{
	list-style: none;
	color:#FFF;
	line-height: 25px;
}	
.ulRS li a{
	color:#FFF;
}	
countdownManager = {
    // Configuration
    //var end = new Date(end_date.replace(/-/g, '/'));
    //var end = moment(end_date, '2018-03-08 00:00:00').toDate();
    targetTime: new Date('2021/03/31 00:00:00'), // Date cible du compte à rebours (00:00:00)
    displayElement: { // Elements HTML où sont affichés les informations
        day:  null,
        hour: null,
        min:  null,
        sec:  null
    },
     
    // Initialisation du compte à rebours (à appeler 1 fois au chargement de la page)
    init: function(){
        // Récupération des références vers les éléments pour l'affichage
        // La référence n'est récupérée qu'une seule fois à l'initialisation pour optimiser les performances
        this.displayElement.day  = jQuery('#countdown_day');
        this.displayElement.hour = jQuery('#countdown_hour');
        this.displayElement.min  = jQuery('#countdown_min');
        this.displayElement.sec  = jQuery('#countdown_sec');
         
        // Lancement du compte à rebours
        this.tick(); // Premier tick tout de suite
        window.setInterval("countdownManager.tick();", 1000); // Ticks suivant, répété toutes les secondes (1000 ms)
    },
     
    // Met à jour le compte à rebours (tic d'horloge)
    tick: function(){
        // Instant présent
        var timeNow  = new Date();
         
        // On s'assure que le temps restant ne soit jamais négatif (ce qui est le cas dans le futur de targetTime)
        if( timeNow > this.targetTime ){
            timeNow = this.targetTime;
        }
         
        // Calcul du temps restant
        var diff = this.dateDiff(timeNow, this.targetTime);
         
        this.displayElement.day.text(  diff.day  );
        this.displayElement.hour.text( diff.hour );
        this.displayElement.min.text(  diff.min  );
        this.displayElement.sec.text(  diff.sec  );
    },
     
    // Calcul la différence entre 2 dates, en jour/heure/minute/seconde
    dateDiff: function(date1, date2){
        var diff = {}                           // Initialisation du retour
        var tmp = date2 - date1;
 
        tmp = Math.floor(tmp/1000);             // Nombre de secondes entre les 2 dates
        diff.sec = tmp % 60;                    // Extraction du nombre de secondes
        tmp = Math.floor((tmp-diff.sec)/60);    // Nombre de minutes (partie entière)
        diff.min = tmp % 60;                    // Extraction du nombre de minutes
        tmp = Math.floor((tmp-diff.min)/60);    // Nombre d'heures (entières)
        diff.hour = tmp % 24;                   // Extraction du nombre d'heures
        tmp = Math.floor((tmp-diff.hour)/24);   // Nombre de jours restants
        diff.day = tmp;
 
        return diff;
    }
};
 
jQuery(function($){
    // Lancement du compte à rebours au chargement de la page
    countdownManager.init();
});
Vers le haut

Vers le haut

Login Bootstrap3

Login Bootstrap3

Loading style book loader

Loading style book loader

Lightbox gallery style01

Lightbox gallery style01

Image hover 03

Image hover 03

Dropdown right aligned B4

Dropdown right aligned B4

Créer un effet de défilement vers le bas de la souris animé

Créer un effet de défilement vers le bas de la souris animé

Carousel 8 bloc with B4

Carousel 8 bloc with B4

Bootstrap Cookie Alert pages

Bootstrap Cookie Alert pages

Asidebar Menu Style01

Asidebar Menu Style01

Ajouter supprimer une tr dans une table

Ajouter supprimer une tr dans une table

Add Remove dynamic rows with dynamic ID of input in HTML table

Add Remove dynamic rows with dynamic ID of input in HTML table