Datario e Orologio in homepage 
Autor: Gabriele L.Buongiorno a tutti ho la necessità d'inserire un datario e un orologio col le caratteristiche (grafiche) come mostrato in allegato. Inizialmente avevo trovato in rete del codice js che poi opportunamente adattato mi ha permesso di ottenere quello che volevo. La parte calendario (datario) l'avevo prelevata dal sito http://www.web-link.it purtoppo ora non riesco a reperire il link esatto alla pagina (sembra non più funzionante) mentre per l'orologio avevo attinto a questo "https://www.ideepercomputeredinternet.com/2019/03/orologio-digitale-blogger-data.html". E' sorto un problema quando al sito in costruzione, www.adafnet.it, ho aggiunto il cookebot. Il datario è l'orologio erano finiti a fondo pagina all'interno di un banner bianco. Dopo aver indagato sul problema, grazie anche agli utenti e moderatori di questo forum, siamo arrivati alla conclusione che il codice extra aggiunto per il datario e l'orologio hanno qualche problema.
Vorrei trovare un'altrernativa per fare sempre la stessa cosa senza che si scombussoli il tutto. Ho fatto una ricerca ma non trovo nulla di utile.
Grazie a tutti
Gabry
Ciao Gabriele,
prova a dare un'occhiata qui:
https://codepen.io/jkantner/pen/MWEmExB
https://codepen.io/WhisnuYs/pen/oNLBEvv
https://codepen.io/JessyRiordan/pen/pgoxxG
https://codepen.io/Cheesetoast/pen/gOYzNy
https://codepen.io/ctedesco02/pen/qagdYV
https://codepen.io/WebSonick/pen/nOwPwy
Ce ne sono tanti altri....Da adattare alle tue necessità.
Ciao
Oppure prova questo in oggetto html da inserire dove ti serve:
Oggetto html --> codice html
<div class="container">
<div class="display-date">
<span id="day">day</span>,
<span id="daynum">00</span>
<span id="month">month</span>
<span id="year">0000</span>
</div>
<div class="display-time"></div>
</div>
<script>
const displayTime = document.querySelector(".display-time");
// Time
function showTime() {
let time = new Date();
displayTime.innerText = time.toLocaleTimeString("en-US", { hour12: false });
setTimeout(showTime, 1000);
}
showTime();
// Date
function updateDate() {
let today = new Date();
// return number
let dayName = today.getDay(),
dayNum = today.getDate(),
month = today.getMonth(),
year = today.getFullYear();
const months = [
"Gennaio",
"Febbraio",
"Marzo",
"Aprile",
"Maggio",
"Giugno",
"Luglio",
"Agosto",
"Settembre",
"Ottobre",
"Novembre",
"Dicembere",
];
const dayWeek = [
"Domenica",
"Lunedì",
"Martedì",
"Mercoledì",
"Giovedì",
"Venerdì",
"Sabato",
];
// value -> ID of the html element
const IDCollection = ["day", "daynum", "month", "year"];
// return value array with number as a index
const val = [dayWeek[dayName], dayNum, months[month], year];
for (let i = 0; i < IDCollection.length; i++) {
document.getElementById(IDCollection[i]).firstChild.nodeValue = val[i];
}
}
updateDate();
</script>
stesso Oggetto html --> scheda esperto
@import url("https://fonts.googleapis.com/css2?family=Lato&display=swap");
.display-date {
color:#ffffff;
text-align: center;
font-size: 1rem;
font-weight: bold;
}
.display-time {
color:#ffffff;
text-align: center;
font-size: 1rem;
font-weight: bold;
}
Scegli tu il colore (io ci ho messo il bianco #ffffff, se a te serve il nero ci metti #000000) da utilizzare
Ciao
Mauro
In oggetto HTML:
<span style="font: 10px tahoma; color:#000000">Sono le [HOUR] di [NOW]</span>
x Gabriele L., ... prova con le soluzioni che ti hanno già fornito in precedenza, ... se poi non fanno al caso tuo e se ti interessa, con il mio codice dinamico esclusivo e per il sito nella forma(!) attuale "adafnet.it", potresti ottenere con un solo copia-incolla un risultato molto simile a quello del tuo STAMP, come in questa mia simulazione fatta adesso, (..e nel caso mi avviserai ...):
.
ciao
.
Autor
Buona sera e grazie a tutti per le risposte, sto provando alcune soluzioni proposte, l'orologio è già suistemato e in serata dovrei sistemare anche il datario. Faccio sapere cosa ho utilizzato.
Grazie a tutti
Gabry
Autor
Ok eccomi di nuovo, ho sistemato il datario usando il codice suggerito da Mauro B. rimuovendo l'orologio e adattando scritta e font, per l'orologio ho tenuto buono il suggerimento di Fabio C. rimuovendo il datario e adattando il font. Grazie
Grazie anche a KolAsim per la disponibilità e le prove fatte, se il "cliente" non si lamenta delle modifiche siamo a posto.
Ciao Gabry
OK ciao
.