Converting a 24-Hour clock with Images to 12-Hour clock with AM and PM with Day and Date

Question

Converting a 24-Hour clock with Images to 12-Hour clock with AM and PM with Day and Date

59 Views Asked by Kshitij Gotiwale At 04 April 2025 at 05:55

I have a HTML/Java clock program which used images and is currently in 24-Hour format, what I'm hoping to get done is to have it in a 12-Hour format and also display AM/PM with the Day and Date. Is that something possible? I'm trying to create a indic clock with different scripts here.

Here's the current code.

<meta charset="utf-8">
<title>Indic Clock</title>
<script type ="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>

<body style="background-color: #FAF7EC">

    <center> Devanagiri </center>

    <div id="Clock">
        <img id="hour1" src="0.png" width="150" height="275" />
        <img id="hour2" src="0.png" width="150" height="275" />
        <img src="dots.png" width="150" height="275" />
        <img id="minute1" src="0.png" width="150" height="275" />
        <img id="minute2" src="0.png" width="150" height="275" />
        <img src="dots.png" width="150" height="275" />
        <img id="second1" src="0.png" width="150" height="275" />
        <img id="second2" src="0.png" width="150" height="275" />

    </div>

<script type="text/javascript">

    var images = new Array('0.png', '1.png', '2.png', '3.png', '4.png', '5.png', '6.png', '7.png', '8.png', '9.png',);

    var interval = setInterval(function()
    {
        var date = new Date();

        var hour = String(date.getHours());
        var minutes = String(date.getMinutes());
        var seconds = String(date.getSeconds());

        if(hour < 10)
        {
            $('#hour1').attr('src', images[0]);
            $('#hour2').attr('src', images[hour.charAt(0)]);

        }
        else
        {

            $('#hour1').attr('src', images[hour.charAt(0)]);
            $('#hour2').attr('src', images[hour.charAt(1)]);

        }

        if(minutes < 10)
        {
            $('#minute1').attr('src', images[0]);
            $('#minute2').attr('src', images[minutes.charAt(0)]);

        }
        else
        {

            $('#minute1').attr('src', images[minutes.charAt(0)]);
            $('#minute2').attr('src', images[minutes.charAt(1)]);

        }

        if(seconds < 10)
        {
            $('#second1').attr('src', images[0]);
            $('#second2').attr('src', images[seconds.charAt(0)]);

        }
        else
        {

            $('#second1').attr('src', images[seconds.charAt(0)]);
            $('#second2').attr('src', images[seconds.charAt(1)]);

        }

    }, 1000)


</script>

</body>

I have tried to bring in Date and was able to get it to work, but I'm still confused with 12-Hour format with AM/PM and bring in the Day (for ex. MON for Monday, TUE for Tuesday and so on)

Original Q&A

There are 1 best solutions below

**Death-is-the-real-truth** · Answer 1

You can convert the date to 12-hour format like below

do it like below:

var timeformat = new Date().toLocaleTimeString('en-US', {hour12: true });
var timeformatArr = timeformat.split(' ');
var ampm = timeformatArr[1];
var timeArr = timeformatArr[0].split(':');

Working snippet:

var images = new Array('https://pngimg.com/uploads/number0/number0_PNG19185.png', 'https://png.pngtree.com/png-clipart/20200309/ourmid/pngtree-gold-number-1-png-image_2158836.jpg', 'https://png.pngtree.com/png-clipart/20200309/ourmid/pngtree-gold-number-2-png-image_2158838.jpg', 'https://freepngimg.com/download/numbers/5-2-3-number-png.png', 'https://png.pngtree.com/png-clipart/20200401/original/pngtree-gold-number-4-png-image_5330869.jpg', 'https://png.pngtree.com/png-clipart/20200401/original/pngtree-gold-number-5-png-image_5330870.jpg', 'https://png.pngtree.com/png-vector/20210204/ourmid/pngtree-gold-3d-number-six-numeric-symbol-png-image_2884744.jpg', 'https://png.pngtree.com/png-clipart/20200401/original/pngtree-gold-number-7-png-image_5330848.jpg', 'https://png.pngtree.com/png-clipart/20200309/ourmid/pngtree-gold-number-8-png-image_2158851.jpg', 'https://png.pngtree.com/png-clipart/20200309/ourmid/pngtree-gold-number-9-png-image_2158853.jpg', 'https://static.vecteezy.com/system/resources/previews/010/885/807/non_2x/3d-number-10-mental-yellow-free-png.png', 'https://img.lovepik.com/free-png/20210919/lovepik-countdown-number-11-png-image_400762906_wh1200.png', 'https://static.vecteezy.com/system/resources/previews/010/885/817/non_2x/3d-number-12-mental-yellow-free-png.png');

var ampmImages = ['https://w7.pngwing.com/pngs/874/385/png-transparent-brand-logo-font-who-am-i-angle-text-triangle-thumbnail.png','https://cdn-icons-png.flaticon.com/512/1584/1584790.png'];

var interval = setInterval(function() {
  var timeformat = new Date().toLocaleTimeString('en-US', {hour12: true });
  var timeformatArr = timeformat.split(' ');
  var ampm = timeformatArr[1];
  var timeArr = timeformatArr[0].split(':');
  
  var hour = timeArr[0] % 12;
  hour = hour ? hour : 12;
  hour =  hour < 10 ? '0'+hour : hour;
  hour = String(hour);
  
  var minutes = timeArr[1] < 10 ? '0'+timeArr[1] : timeArr[1];  
  var seconds = timeArr[2] < 10 ? '0'+timeArr[2] : timeArr[2];


  $('#hour1').attr('src', images[hour.charAt(0)]);
  $('#hour2').attr('src', images[hour.charAt(1)]);

  $('#minute1').attr('src', images[minutes.charAt(0)]);
  $('#minute2').attr('src', images[minutes.charAt(1)]);

  $('#second1').attr('src', images[seconds.charAt(0)]);
  $('#second2').attr('src', images[seconds.charAt(1)]);
  $('#ampm').attr('src', (ampm == 'AM') ? ampmImages[0]:ampmImages[1]);

}, 1000);

<meta charset="utf-8">
<title>Indic Clock</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>

<body style="background-color: #FAF7EC">

  <center> Devanagiri </center>

  <div id="Clock">
    <img id="hour1" src="0.png" width="150" height="275" />
    <img id="hour2" src="0.png" width="150" height="275" />
    <img src="https://pngimg.com/uploads/dot/dot_PNG22.png" width="150" height="275" />
    <img id="minute1" src="0.png" width="150" height="275" />
    <img id="minute2" src="0.png" width="150" height="275" />
    <img src="https://pngimg.com/uploads/dot/dot_PNG22.png" width="150" height="275" />
    <img id="second1" src="0.png" width="150" height="275" />
    <img id="second2" src="0.png" width="150" height="275" />
    <img id="ampm" src="" width="150" height="275" />
  </div>
</body>

Converting a 24-Hour clock with Images to 12-Hour clock with AM and PM with Day and Date

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in JQUERY

Related Questions in TYPOGRAPHY

Related Questions in REAL-TIME-CLOCK

Trending Questions

Popular # Hahtags

Popular Questions