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 :
<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à 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
Bonne journée !