Disparition temporaire Fermé

Question

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

jordane45 · Answer

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.

chabinot · Answer

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 Document

(Jour: ) (Semaine: )

Document

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.

Disparition temporaire

2 réponses

Discussions similaires