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)
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>