Date et heure pour design

Utilisation du core de Jeedom Design
Tags: #<Tag:0x00007fcbaa5b4ca8>
#1

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 !

2 J'aimes
Uncaught TypeError
#2

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

#3

Salut,

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

3 J'aimes
#4

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

#5

Au top merci, c’est flat et tendance.

1 J'aime
#6

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:

#7

Salut,
j’ai ton horloge sur mon design c’est top visuellement par contre j’ai parfois cette erreur.

Uncaught TypeError: myHour is null

j’ai aussi ca qui ressort avec la console dev du navigateur.

Uncaught TypeError: Cannot set property 'textContent' of null
    at getTime (<anonymous>:9:23)
    at <anonymous>:1:1

qui semble viser ceci

myHour.textContent = hours + minutes;

pour info j’ai légèrement modifié le code pour l’adapter a mon design ai-je fais une erreur quelque part.

<html>
<head>
	<style>
      h1 {
        color: white;
        text-shadow: 0px 0px 10px #484848;
        font-size: 48px;        
		display: inline;
		padding: 5px;
      }
      h2 {
        color: rgba(255, 255, 255, 0.3);
        text-shadow: 0px 0px 10px #484848;
        font-size: 18px;
		display: inline;
		padding: 5px;
        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: 'short', year: 'numeric', month: 'short', day: 'numeric' };
			document.getElementsByTagName('h2')[0].textContent = d.toLocaleDateString('fr-FR', options);
</script>

</body>
</html>

ca donne cela
Capture d’écran 2021-01-11 123158

2 J'aimes
#8

Salut @xavoo je me permet de faire un p’tit UP.
J’ai toujours cette erreur js

#10

Tu serais me dire si toi aussi tu as une erreur JS.
Par contre c’est @xavoo qu’il faut remercier.

#11

Oops pas vu :face_with_hand_over_mouth: je vais corriger ça et non désolé j’ai mis exactement le code donne par @xavoo sans rien d’autre (je voulais quelque chose de sobre en noir et blanc) je n’ai pas d’erreurs
Bonne chance

#13

merci @xavoo c’est top c’est exactement ce que je voulais

#14

Merci @xavoo c’est totalement ce que je voulais pour un design sans avoir à utiliser un plugin/widget. :pray: