Disparition temporaire
chabinot
Messages postés
322
Date d'inscription
Statut
Membre
Dernière intervention
-
chabinot Messages postés 322 Date d'inscription Statut Membre Dernière intervention -
chabinot Messages postés 322 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
Voilà un bout de source
// Language locale (fr)
moment.locale('fr-FR')
// Constantes
const now = moment(),
timeElement = document.querySelector('.time'),
dateElement = document.querySelector('.date'),
dayElement = document.querySelector('.day'),
weekElement = document.querySelector('.week'),
resteElement = document.querySelector('.reste'),
cpyElement = document.querySelector('.cpy'),
isLeap = moment([moment().format('YYYY')]).isLeapYear()
// Heure
setInterval( () => {
timeElement.textContent = moment().format('hh:mm:ss a')
}, 1000)
// Nombre de jours restant
const reste = () => {
let restant = (isLeap ? 366 : 365) - now.format('DDD')
console.log(isLeap)
return restant === 0 ? '(Dernier jour de l\'année)'
: (restant === 1 ? '(Reste 1 jour)' : '(Reste: ' + restant + ' jours)')
}
// Date du jour
dateElement.textContent = now.format('dddd DD MMMM YYYY')
// Jour dans l'année en cours
dayElement.textContent = `${now.format('DDD').toString().padStart(2, "0")}`
// Semaine dans l'année en cours
weekElement.textContent = `${now.format('w').toString().padStart(2, "0")}`
// Nombre de jours restant
resteElement.textContent = reste()
// Copyright
cpyElement.textContent = now.format('YYYY')
Lorsque je réaffiche la page (F5), l'heure affichée disparaît momentanément.
Est-ce normal ? et comment y remédier ?
Cordialement
A voir également:
- Disparition temporaire
- Supprimer fichier temporaire - Guide
- Mail temporaire - Guide
- Fdj problème temporaire de connexion ✓ - Forum Réseaux sociaux
- Disparition windows 10 - Guide
- Windows a créé un fichier d'échange temporaire ✓ - Forum Windows
2 réponses
Bonjour
Tout dépend le reste de ta page, mais pense bien que le javascript s'exécute après que la page a été chargée comme en plus tu utilises un timer forcément ça rajoute du temps
Pour peu que tu aies d'autres scripts qui se charge avant celui-là ça rajoute également du temps..
Je précise également que la librairie moment mais, il me semble, plus maintenu à cause de failles de sécurité qui ont été trouvées à l'intérieur...
Si c'est juste pour afficher l'heure, les fonctions natives de JavaScript suffisent largement.
Bonjour,
Effectivement, je l'ai refait, le voici :
// Constantes
const now = new Date(),
dateElement = document.querySelector('.date'),
dayElement = document.querySelector('.day'),
weekElement = document.querySelector('.week'),
resteElement = document.querySelector('.reste'),
timeElement = document.querySelector('.time'),
cpyElement = document.querySelector('.cpy'),
options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }
// Date du jour
dateElement.innerText = now.toLocaleDateString('fr-FR', options)
// Jour dans l'année en cours
const dayOfYear = date =>
Math.floor((now - new Date(now.getFullYear(), 0, 0)) / 1000 / 60 / 60 / 24)
dayElement.textContent = dayOfYear(now).toString().padStart(2, '0')
// Semaine dans l'année en cours
const weekOfYear = date => {
const startOfYear = new Date(now.getFullYear(), 0, 1);
startOfYear.setDate(startOfYear.getDate() + (startOfYear.getDay() % 7));
return Math.round((now - startOfYear) / (7 * 24 * 3600 * 1000));
}
weekElement.innerText = weekOfYear(now).toString().padStart(2, '0')
// Année bisextile
const isLeap = year => new Date(year, 1, 29).getDate() === 29
let nbJour = isLeap(now.getFullYear()) ? 366 : 365,
restant = nbJour - dayOfYear(now)
// Nombre de jours restant est supérieur à 1 ou égale à 0
resteElement.innerText = (restant === 0
? '(Dernier jour de l\'année)'
: (restant === 1)
? '(Reste: ' + restant + ' jour)'
: '(Reste: ' + (nbJour - dayOfYear(now)).toString().padStart(1, '0') + ' jours)')
// Copyright
cpyElement.textContent = now.getFullYear()
// Affichage de l'heure
setInterval( () => {
const hour = ((new Date().getHours() % 12) || 12).toString().padStart(2, '0'),
minute = new Date().getMinutes().toString().padStart(2, '0'),
second = new Date().getSeconds().toString().padStart(2, '0'),
amOrPm = new Date().getHours() < 12 ? 'am' : 'pm'
timeElement.innerText = `${hour}:${minute}:${second} ${amOrPm}`
}, 1000)
et la page html
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Document</title> <!-- Favicon --> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> <!-- Styles CSS --> <link rel="stylesheet" href="css/styles.css"> <!-- Scripts --> <script src="js/date.time.js" defer></script> </head> <body> <header class="fixed-top"> <div class="datetime"> <span class="date"></span><br> <span>(Jour: </span><span class="day"></span><span>)</span> <span>(Semaine: </span><span class="week"></span><span>)</span><br> <span class="reste"></span><span></span> </div> <div class="titre"><h1><a href="/">Document</a></h1></div> <div class="time"> <span class="time"></span> </div> </header> <footer class="fixed-bottom"> <p>© Copyright Document (2022 - <span class="cpy"></span>). Tous droits réservés </p> </footer> </body> </html>
Comme tu vois, je n'ai qu'un seul script, ça continue au réaffichage, ce n'est pas grave.
Merci encore pour ton aide.