利用JavaScript网页中显示当前时间_7) 主页头部显示当前时间功能,通过javascript功能获取,时间形式不限定。-优快云博客

本文介绍了一个使用HTML和JavaScript实现的简单网页，该网页能够实时显示当前的时间，包括小时、分钟和秒，并带有AM/PM标识。通过每隔一秒更新输入框中的时间，展示了一种基本的网页动态效果实现方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>显示当前时间</title>

</head>
<body>

        <input type="text" size="10" style="background-color: lightyellow; border-width: 3;" id='input_id' value=''/>

</body>
<script type="text/javascript">
  var inputid = document.getElementById("input_id");
        function showtime(){

            var now_time = new Date();//创建时间对象的实例
            var hours = now_time.getHours();//获得当前小时数
            var minutes = now_time.getMinutes();//获得当前分钟数
            var seconds = now_time.getSeconds();//获得当前秒数
            var timer = ""+((hours>12)?hours-12:hours);//将小时数值赋予变量timer
            timer += ((minutes<10)?":0":":") + minutes;//将分钟数值赋予变量timer
            timer += ((seconds<10)?":0":":") + seconds;//将秒数值赋予变量timer
            timer +=" " + ((hours>12)?"pm":"am");//将数字am或者pm赋予变量timer

   inputid.value = timer
            setTimeout("showtime()",1000);//设置每隔一秒钟自动调用一次showtime()函数

        }

window.onload=showtime()
</script>
</html>

结果如图：