Disparition temporaire

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

<!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>&copy; 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.

(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

Newsletters