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.
A voir également:
- Décompte
- Décompte du temps sur family link - Forum Contrôle parental
- Décompte, compte à rebours pour le bureau - Forum Windows
- Musique décompte 5 4 3 2 1 ✓ - Forum Musique / Radio / Clip
- Regarder une vidéo sur facebook sans avoir decompte facebook - Forum Facebook
- Tableau Excel calcul décompte forfait jours et suivi temps - Forum Excel
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>
