一个简单的JS时间控件示例代码(JS时分秒时间控件)

2023年5月27日下午12:39 • JavaScript

下面是关于“一个简单的JS时间控件示例代码(JS时分秒时间控件)”的完整攻略。

1.概述

一个简单的JS时间控件，常见于某些表单页面，提供给用户选择时间的功能。这个示例的特点在于，它只显示时分秒，并按照24小时制呈现。

2.示例说明

下面以两个示例说明这个JS时间控件的用法。

2.1 示例1：基本用法

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS时间控件示例</title>
    <style>
        body {
            padding: 20px;
            text-align: center;
        }
        .time {
            font-size: 60px;
        }
    </style>
</head>
<body>
    <div class="time"></div>
    <button id="btn">获取时间</button>
    <script>
        var time = document.querySelector('.time');
        var btn = document.querySelector('#btn');
        btn.addEventListener('click', function() {
            var now = new Date();
            var hours = now.getHours();
            var minutes = now.getMinutes();
            var seconds = now.getSeconds();
            // 补零操作
            hours = hours < 10 ? '0' + hours : hours;
            minutes = minutes < 10 ? '0' + minutes : minutes;
            seconds = seconds < 10 ? '0' + seconds : seconds;
            time.innerHTML = hours + ':' + minutes + ':' + seconds;
        });
    </script>
</body>
</html>

在这个示例中，我们创建了一个div元素，用于显示时间。同时，还有一个按钮元素，当用户点击这个按钮时，会获取当前的时间，并在div元素中显示出来。主要的JS代码如下：

    var time = document.querySelector('.time');
    var btn = document.querySelector('#btn');
    btn.addEventListener('click', function() {
        var now = new Date();
        var hours = now.getHours();
        var minutes = now.getMinutes();
        var seconds = now.getSeconds();
        // 补零操作
        hours = hours < 10 ? '0' + hours : hours;
        minutes = minutes < 10 ? '0' + minutes : minutes;
        seconds = seconds < 10 ? '0' + seconds : seconds;
        time.innerHTML = hours + ':' + minutes + ':' + seconds;
    });

通过querySelector方法，我们获取到了div元素和按钮元素。在按钮的click事件中，我们获取当前时间，并将小时、分钟、秒钟分别赋值给变量。最后我们用一个三目运算符进行补零操作，将数字单独处理成两位数。最终我们将三个值拼接成一串字符串，赋给div元素的innerHTML属性，完成时间的显示。

2.2 示例2：定时更新

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS时间控件示例</title>
    <style>
        body {
            padding: 20px;
            text-align: center;
        }
        .time {
            font-size: 60px;
        }
    </style>
</head>
<body>
    <div class="time"></div>
    <script>
        var time = document.querySelector('.time');
        function updateTime() {
            var now = new Date();
            var hours = now.getHours();
            var minutes = now.getMinutes();
            var seconds = now.getSeconds();
            // 补零操作
            hours = hours < 10 ? '0' + hours : hours;
            minutes = minutes < 10 ? '0' + minutes : minutes;
            seconds = seconds < 10 ? '0' + seconds : seconds;
            time.innerHTML = hours + ':' + minutes + ':' + seconds;
        }
        updateTime();
        setInterval(updateTime, 1000);
    </script>
</body>
</html>

这个示例中，我们和之前相比，主要增加了一个定时更新的功能。即每隔一段时间，就会自动更新一下所显示的时间。

我们定义了一个updateTime函数，用于更新时间并显示。接着我们调用了一次该函数，确保页面初次加载的时候，时间就已经正确显示了。

接下来，我们使用setInterval方法，定时执行updateTime函数，时间间隔为1秒。这样页面就会每秒自动更新一次时间。