将图片式24小时制HTML/JS时钟改为12小时制并显示日期星期

完全可行，以下是修改后的完整代码，已适配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">
        <!-- 12小时制小时位 -->
        <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" />
        <!-- AM/PM标识 -->
        <img id="ampm" src="am.png" width="150" height="275" />
    </div>

    <!-- 星期与日期区域 -->
    <div id="DateWeek" style="text-align: center; margin-top: 20px;">
        <img id="week" src="mon.png" width="150" height="100" />
        <img id="date1" src="0.png" width="100" height="100" />
        <img id="date2" src="0.png" width="100" height="100" />
    </div>

<script type="text/javascript">
    // 数字图片数组
    var images = ['0.png', '1.png', '2.png', '3.png', '4.png', '5.png', '6.png', '7.png', '8.png', '9.png'];
    // 星期图片数组（索引0=周日，1=周一...6=周六，替换为你的印度语星期缩写图片）
    var weekImages = ['sun.png', 'mon.png', 'tue.png', 'wed.png', 'thu.png', 'fri.png', 'sat.png'];
    // AM/PM图片数组
    var ampmImages = ['am.png', 'pm.png'];

    var interval = setInterval(function() {
        var date = new Date();
        var hour24 = date.getHours();
        var minutes = date.getMinutes();
        var seconds = date.getSeconds();
        var dayOfWeek = date.getDay();
        var dayOfMonth = date.getDate();

        // 转换为12小时制
        var hour12 = hour24 % 12;
        hour12 = hour12 === 0 ? 12 : hour12; // 0点转为12点
        var ampmIndex = hour24 < 12 ? 0 : 1;

        // 处理小时图片
        var hourStr = hour12.toString().padStart(2, '0');
        $('#hour1').attr('src', images[hourStr.charAt(0)]);
        $('#hour2').attr('src', images[hourStr.charAt(1)]);

        // 处理分钟图片
        var minuteStr = minutes.toString().padStart(2, '0');
        $('#minute1').attr('src', images[minuteStr.charAt(0)]);
        $('#minute2').attr('src', images[minuteStr.charAt(1)]);

        // 处理秒钟图片
        var secondStr = seconds.toString().padStart(2, '0');
        $('#second1').attr('src', images[secondStr.charAt(0)]);
        $('#second2').attr('src', images[secondStr.charAt(1)]);

        // 处理AM/PM图片
        $('#ampm').attr('src', ampmImages[ampmIndex]);

        // 处理星期图片
        $('#week').attr('src', weekImages[dayOfWeek]);

        // 处理日期图片
        var dateStr = dayOfMonth.toString().padStart(2, '0');
        $('#date1').attr('src', images[dateStr.charAt(0)]);
        $('#date2').attr('src', images[dateStr.charAt(1)]);

    }, 1000);
</script>

</body>
</html>

关键修改说明 #

• 12小时制转换：通过hour24 % 12将24小时转为12小时，特殊处理0点为12点；根据小时数判断AM/PM，切换对应图片。
• 星期显示：利用date.getDay()获取星期索引（0=周日，1=周一），匹配预设的星期图片数组。
• 日期显示：获取当月日期，通过padStart(2, '0')补零为两位数字，拆分后显示对应数字图片。
• HTML结构扩展：新增AM/PM图片位、星期与日期展示区域，保持与原时钟的图片风格一致。

注意：请将代码中的am.png、pm.png及星期图片（如mon.png）替换为你制作的印度语系对应图片。

内容的提问来源于stack exchange，提问作者Kshitij Gotiwale