Date et heure pour design

Tags: #<Tag:0x00007f38539d00c0>

Salut à tous !

Je me penche sur mon design, et je voulais quelque chose que je n’ai trouvé nulle part proprement : la date et l’heure affichée dans un champ texte/html

Je vous propose ici le code nécessaire pour un rendu comme ça : image

<html>
<head>
	<style>
      h1 {
        color: white;
        text-shadow: 0px 0px 100px #484848;
        font-size: 220px;
		display: inline;
		padding: 2px;
      }
      h2 {
        color: rgba(255, 255, 255, 0.3);
        text-shadow: 0px 0px 100px #484848;
        font-size: 90px;
		display: inline;
		padding: 2px;
        text-transform: capitalize;
      }
      
	</style>
</head>
<body>
	<h1 id="my-hour"></h1>
	<script>
		function getTime () { 
			var date = new Date(); 
			var hours = date.getHours(); 
			var minutes = date.getMinutes(); 
			hours = ((hours < 10) ? " 0" : " ") + hours;
			minutes = ((minutes < 10) ? ":0" : ":") + minutes; 
			var myHour = document.getElementById("my-hour");
			myHour.textContent = hours + minutes;
			setTimeout("getTime()",1000); 
			
		}
		getTime();
	</script>
  <br>
  
  <h2></h2>
      <script type="text/javascript">
			var d = new Date();
			var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
			document.getElementsByTagName('h2')[0].textContent = d.toLocaleDateString('fr-FR', options);
</script>

</body>
</html>

Voilà :slight_smile: quelques modifs CSS vous permettront d’avoir un résultat adapté à vos designs, mais pour ceux qui cherchent quelque chose d’épuré, vous avez ici de quoi commencer :slight_smile:

Bonne journée !

1 J'aime

D’ailleurs, Merci à @totoff974 pour son code pour la date :slight_smile:

Salut,

Il existe aussi un widget qui permet de nombreuses personnalisations : DigitalClock

3 J'aimes

Je confirme les propos de @Salvialf
et utiliser cet excellent widget plein de paramètres.

Capture d’écran du 2020-10-25 00-19-03

Au top merci, c’est flat et tendance.

1 J'aime

Je l’ai vu passer, mais j’avais l’impression qu’il était plus restrictif que ça ! et je dois avouer que les exemples que j’ai vu passer n’étaient pas assez « modernes », j’ai cru que tout était comme ça … J’avoue qu’on trouve plein de ressources pour les designs, mais je dois admettre qu’il y en a relativement peu qui correspondent à ce que je cherche, à savoir un design un peu « flat », et je n’ai pas eu l’impression en regardant vite fait le plugin que ça permettait ça !
Merci du filon quand même :slight_smile: