Décompte
Utilisateur anonyme
-
Utilisateur anonyme -
Utilisateur anonyme -
Bonjour,
j'aimerais créer un site très basique dans le HTML et le CSS, cependant plus complexe je pense en JavaScript ou je ne sais quel moyen.
Je m'explique :
j'aimerais créer un site qui affiche tout simplement une horloge qui indique les prochaines vacances avec le format : HH:MM.SS
Ceul truc que j'aimerais aussi, c'est que l'on n'ai pas besoin de rafraîchir la page mais que l'horloge défilé toujours sans refresh ou autre.
Merci d'avance, Julien.
j'aimerais créer un site très basique dans le HTML et le CSS, cependant plus complexe je pense en JavaScript ou je ne sais quel moyen.
Je m'explique :
j'aimerais créer un site qui affiche tout simplement une horloge qui indique les prochaines vacances avec le format : HH:MM.SS
Ceul truc que j'aimerais aussi, c'est que l'on n'ai pas besoin de rafraîchir la page mais que l'horloge défilé toujours sans refresh ou autre.
Merci d'avance, Julien.
3 réponses
-
-
Voila une base de travail:
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.decompte div{
float: left;
padding: 10px;
position: relative;
width: 30px;
text-align: center;
}
#name{
width: 150px;
padding-right: 30px;
text-align: right;
display: block;
float: left;
font-weight: bolder;
}
.decompte #hours:after{
content: "H";
position: absolute;
top: -7px;
text-align: center;
left: 0;
width: 100%;
}
.decompte #minutes:after{
content: "M";
position: absolute;
top: -7px;
text-align: center;
left: 0;
width: 100%;
}
.decompte #seconds:after{
content: "S";
position: absolute;
top: -7px;
text-align: center;
left: 0;
width: 100%;
}
.decompte #milliseconds:after{
content: "MS";
position: absolute;
top: -7px;
text-align: center;
left: 0;
width: 100%;
}
</style>
</head>
<body>
<div class="decompte">
<span id="name"></span>
<div id="hours"></div>
<div id="minutes"></div>
<div id="seconds"></div>
<div id="milliseconds"></div>
</div>
<script type="text/javascript" src="https://momentjs.com/downloads/moment.min.js"></script>
<script type="text/javascript">
var countdown = {
interval: 10,
timer:null,
currentTime: null,
vacances: [
{
name: 'Vacances d\'été',
start: moment('2014-07-15 00:00:00').unix()
},
{
name: 'Printemps',
start: moment('2014-09-15 00:00:00').unix()
},
{
name: 'Automne',
start: moment('2014-05-15 00:00:00').unix()
},
{
name: 'Hiver',
start: moment('2014-08-19 00:00:00').unix()
}
],
setCurrentTime: function(){
this.currentTime = new Date().getTime();
},
init: function(){
this.timer = setInterval(this.update, this.interval, this);
},
update: function(me){
me.setCurrentTime();
var goal = me.vacances[0].start*1000;
var hours = parseInt((goal - me.currentTime) / 3600000);
var duration = moment.duration( goal - me.currentTime , "milliseconds");
document.getElementById('hours').innerHTML = hours;
document.getElementById('minutes').innerHTML = duration.minutes();
document.getElementById('seconds').innerHTML = duration.seconds();
document.getElementById('milliseconds').innerHTML = duration.milliseconds();
document.getElementById('name').innerHTML = me.vacances[0].name;
}
}
countdown.init();
</script>
</body>
</html> -
