1

LIVE clock script.

This came about because of a now 'answered' post.  I asked ChatGPT to modify the script to add the AM/PM clock and Day/Month/Year.

Hope it proves useful.

let css := "
<style>
main {
    font-family: 'Noto Sans', sans-serif;
    font-size: 1.0em;
}
</style>";
let content := "
<main id='clock'></main>
<script>
function addZero(i) {
    if (i < 10) {i = '0' + i}
    return i;
}

setInterval(function() {
    let now = new Date();
    let hours = now.getHours();
    let minutes = now.getMinutes();
    let seconds = now.getSeconds();
    let meridiem = hours >= 12 ? 'PM' : 'AM'; // Determine AM or PM

    // Convert hours to 12-hour format
    hours = hours % 12 || 12;

    let daysOfWeek = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
    let dayOfWeek = daysOfWeek[now.getDay()]; // Get day of the week
    let date = now.getDate(); // Get date
    let month = now.toLocaleString('default', { month: 'long' }); // Get month name
    let year = now.getFullYear(); // Get year

    let node = document.querySelector('#clock');
    node.innerHTML = addZero(hours) + ':' + addZero(minutes) + ':' + addZero(seconds) + ' ' + meridiem + ' - ' + dayOfWeek + ', ' + date + ' ' + month + ' ' + year;
}, 1000);
</script>
";
html(css + content)

9 replies

null
    • Alan_Cooke
    • 1 yr ago
    • Reported - view

    Just copy the above into a formula to have it work.
     

    • Sam.1
    • 1 yr ago
    • Reported - view

    Hi Alan—-thank you for the code! 
    however, on the public server and ipad the day name and date blink with each second.

      • Alan_Cooke
      • 1 yr ago
      • Reported - view

      I am on the cloud and do not have any blinking at all.2023-11-24_18-40-49

      • Sam.1
      • 1 yr ago
      • Reported - view

       public cloud?

      • Alan_Cooke
      • 1 yr ago
      • Reported - view

      yes

      • Sam.1
      • 1 yr ago
      • Reported - view

       Alan....what happens when you go to the full screen view [ openFullScreen() ]? Is the time field blank? It is on mine. The time is present when the screen is reduced out of the full screen view--on my end.

      • Alan_Cooke
      • 1 yr ago
      • Reported - view

       Full screen loses the clock

    • gold_cat
    • 1 yr ago
    • Reported - view

    👍

    • red_kite
    • 1 yr ago
    • Reported - view

    My suggestion for multilingual ad. In "const language", select the array element with number. Database must be restarted for the change.

    let css := "
<style>
.box{
    text-align:center;
    font: 1.5em 'Courier New';
}
</style>
";
let content := "
<main id = 'clock' class = 'box'></main>";
let script := "
<script>
const language =['en-US','de-DE','zh','es-ES'][3]
const options = {
  weekday: 'long',
  year: 'numeric',
  month: 'long',
  day: 'numeric',
};
setInterval(
    function() {
        let now = new Date();
        let myTime = now.toLocaleTimeString(language);
        let myDate = now.toLocaleDateString(language,options);
        let node = document.querySelector('#clock');
        node.innerHTML = myTime + ' ' + myDate;
                }
    , 1000)();
</script>
";
html(css + content + script)
Login to reply

Content aside

  • 1 Likes
  • 1 yr agoLast active
  • 9Replies
  • 148Views
  • 4 Following