将带有图像的 24 小时时钟转换为带有 AM 和 PM 以及日期和日期的 12 小时时钟

问题描述 投票：0回答：1

我有一个 HTML/Java 时钟程序，它使用图像，目前采用 24 小时格式，我希望完成的是使其采用 12 小时格式，并显示 AM/PM 以及日期和日期。这有可能吗？ 我正在尝试在这里使用不同的脚本创建一个印度时钟。

这是当前代码。

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

我尝试引入日期并能够使其正常工作，但我仍然对 AM/PM 的 12 小时格式感到困惑，并引入日期（例如 MON 表示星期一，TUE 表示星期二等）开）

javascript html jquery typography real-time-clock
1个回答
0
投票

您可以将日期转换为 12 小时格式并应用检查以获取“am/pm”

像下面这样做：

var ampm = hour >= 12 ? 'pm': 'am';
hour = hour % 12;
hour = hour ? '0'+hour : 12;
minutes = minutes < 10 ? '0'+minutes : minutes;

工作片段：

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 date = new Date();
  var hour = String(date.getHours());
  var minutes = String(date.getMinutes());
  var seconds = String(date.getSeconds());
  
  var ampm = hour >= 12 ? 'pm' : 'am';
  hour = hour % 12;
  hour = hour ? '0'+hour : 12;
  
  minutes = minutes < 10 ? '0'+minutes : minutes;

  $('#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="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" />
    <img id="ampm" src="" width="150" height="275" />
  </div>
</body>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.