正文

打造简易实用原生HTML5时间滑动选择器，轻松实现日期时间选择功能

/0 浏览量
0413

在网页设计中，日期时间选择器是一个常用的功能，它可以帮助用户轻松选择日期和时间。使用原生HTML5，我们可以创建一个简易而实用的时间滑动选择器，无需依赖任何外部库或框架。下面，我将详细讲解如何实现这一功能。

1. 准备工作

首先，我们需要一个HTML文件，并在其中添加以下基本结构：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>时间滑动选择器</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="time-picker">
        <input type="text" id="time-input" readonly>
        <button id="set-time">设置时间</button>
    </div>
    <script src="script.js"></script>
</body>
</html>

接下来，我们需要为这个时间选择器添加一些样式。创建一个名为styles.css的文件，并添加以下样式：

.time-picker {
    position: relative;
    width: 300px;
    margin: 20px auto;
}

#time-input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

#set-time {
    display: block;
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 4px;
    background-color: #5cb85c;
    color: white;
    cursor: pointer;
}

最后，我们需要编写JavaScript代码来实现时间滑动选择器的功能。创建一个名为script.js的文件，并添加以下代码：

document.addEventListener('DOMContentLoaded', function() {
    var timeInput = document.getElementById('time-input');
    var setTimeBtn = document.getElementById('set-time');

    setTimeBtn.addEventListener('click', function() {
        var currentTime = new Date();
        var hours = currentTime.getHours();
        var minutes = currentTime.getMinutes();
        var seconds = currentTime.getSeconds();

        var timeString = hours + ':' + (minutes < 10 ? '0' + minutes : minutes) + ':' + (seconds < 10 ? '0' + seconds : seconds);
        timeInput.value = timeString;
    });
});

2. 实现时间滑动选择器

现在，我们已经完成了基本的结构和样式。接下来，我们将实现时间滑动选择器的核心功能。

2.1 创建时间选择器界面

首先，我们需要创建一个时间选择器界面，让用户可以选择小时、分钟和秒。在HTML文件中，我们可以添加以下结构：

<div class="time-picker">
    <input type="text" id="time-input" readonly>
    <button id="set-time">设置时间</button>
    <div class="time-selector">
        <div class="selector-item">
            <label for="hours">小时</label>
            <input type="number" id="hours" min="0" max="23">
        </div>
        <div class="selector-item">
            <label for="minutes">分钟</label>
            <input type="number" id="minutes" min="0" max="59">
        </div>
        <div class="selector-item">
            <label for="seconds">秒</label>
            <input type="number" id="seconds" min="0" max="59">
        </div>
    </div>
</div>

2.2 添加时间选择器样式

接下来，我们需要为时间选择器界面添加一些样式。在styles.css文件中，添加以下样式：

.time-selector {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    border: 1px solid #ccc;
    border-top: none;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    background-color: white;
    z-index: 1000;
}

.selector-item {
    padding: 10px;
}

.selector-item label {
    display: block;
    margin-bottom: 5px;
}

.selector-item input {
    width: 100%;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

2.3 实现时间选择器功能

最后，我们需要编写JavaScript代码来实现时间选择器的功能。在script.js文件中，添加以下代码：

document.addEventListener('DOMContentLoaded', function() {
    var timeInput = document.getElementById('time-input');
    var setTimeBtn = document.getElementById('set-time');
    var hoursInput = document.getElementById('hours');
    var minutesInput = document.getElementById('minutes');
    var secondsInput = document.getElementById('seconds');
    var timeSelector = document.querySelector('.time-selector');

    setTimeBtn.addEventListener('click', function() {
        timeSelector.style.display = 'block';
    });

    timeInput.addEventListener('click', function() {
        timeSelector.style.display = 'block';
    });

    hoursInput.addEventListener('change', function() {
        var hours = parseInt(hoursInput.value, 10);
        var minutes = parseInt(minutesInput.value, 10);
        var seconds = parseInt(secondsInput.value, 10);
        var timeString = hours + ':' + (minutes < 10 ? '0' + minutes : minutes) + ':' + (seconds < 10 ? '0' + seconds : seconds);
        timeInput.value = timeString;
    });

    minutesInput.addEventListener('change', function() {
        var hours = parseInt(hoursInput.value, 10);
        var minutes = parseInt(minutesInput.value, 10);
        var seconds = parseInt(secondsInput.value, 10);
        var timeString = hours + ':' + (minutes < 10 ? '0' + minutes : minutes) + ':' + (seconds < 10 ? '0' + seconds : seconds);
        timeInput.value = timeString;
    });

    secondsInput.addEventListener('change', function() {
        var hours = parseInt(hoursInput.value, 10);
        var minutes = parseInt(minutesInput.value, 10);
        var seconds = parseInt(secondsInput.value, 10);
        var timeString = hours + ':' + (minutes < 10 ? '0' + minutes : minutes) + ':' + (seconds < 10 ? '0' + seconds : seconds);
        timeInput.value = timeString;
    });

    timeSelector.addEventListener('click', function(event) {
        if (event.target === timeSelector) {
            timeSelector.style.display = 'none';
        }
    });
});

现在，我们已经完成了时间滑动选择器的实现。用户可以通过输入小时、分钟和秒来设置时间，并通过点击设置按钮或时间输入框来触发时间选择器。

-- 展开阅读全文 --