xavoo
Octobre 24, 2020, 8:59
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 :
<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à
Bonne journée !
5 « J'aime »
xavoo
Octobre 24, 2020, 9:01
2
D’ailleurs, Merci à @totoff974 pour son code pour la date
Salut,
Il existe aussi un widget qui permet de nombreuses personnalisations : DigitalClock
3 « J'aime »
olive
Octobre 24, 2020, 10:22
4
Je confirme les propos de @Salvialf
1 « J'aime »
Au top merci, c’est flat et tendance.
1 « J'aime »
xavoo
Octobre 24, 2020, 10:49
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 !
Salut,
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
2 « J'aime »
Salut @xavoo je me permet de faire un p’tit UP.
Tu serais me dire si toi aussi tu as une erreur JS.@xavoo qu’il faut remercier.
Cesar
Février 9, 2021, 10:43
11
Oops pas vu @xavoo sans rien d’autre (je voulais quelque chose de sobre en noir et blanc) je n’ai pas d’erreurs
Cesar
Février 9, 2021, 10:46
13
merci @xavoo c’est top c’est exactement ce que je voulais
1 « J'aime »
Merci @xavoo c’est totalement ce que je voulais pour un design sans avoir à utiliser un plugin/widget.
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 
je vais corriger ça et non désolé j’ai mis exactement le code donne par 