jquery实现时间选择器

2023年5月27日下午3:23 • JavaScript

下面是关于"jquery实现时间选择器"的完整攻略。

1.准备工作

在使用jquery实现时间选择器之前，我们需要先准备好jquery库和相关的CSS样式文件。可以在jquery官方网站上下载相应的文件，也可以使用CDN的方式引入。

2.基本结构

时间选择器需要一个文本框作为输入框，支持用户输入时间。同时，需要一个按钮来触发时间选择器的弹出和隐藏。

HTML基本结构如下：

<input type="text" id="timePicker">
<button id="pickerBtn">选择时间</button>

3.样式定义

时间选择器的样式需要进行定义，可以设置浮动、宽度、高度等属性，以及调整字体颜色、背景色等样式属性。

CSS代码示例：

.time-picker {
    position: absolute;
    background: #fff;
    border: 1px solid #ccc;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
    z-index: 999;
    padding: 10px;
    width: 200px;
    height: 200px;
    overflow-y: scroll;
    font-size: 14px;
    color: #333;
    display: none;
}

.time-picker ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.time-picker ul li {
    height: 30px;
    line-height: 30px;
    cursor: pointer;
}

4.绑定事件

点击按钮后，时间选择器显示。同时可以使用鼠标滚轮进行快速选择时间。在时间选择后，需要将所选时间回填到输入框中，并隐藏时间选择器。

JavaScript代码示例：

// 弹出时间选择器
$("#pickerBtn").click(function () {
    $(".time-picker").show();
});

// 阻止时间选择器点击事件冒泡
$(".time-picker").click(function (e) {
    e.stopPropagation();
});

// 点击其他区域，关闭时间选择器
$(document).click(function () {
    $(".time-picker").hide();
});

// 滚轮事件快速选择时间
$(".time-picker ul").bind('mousewheel', function(e){
    var ul = $(this),
        ulTop = ul.scrollTop();
    if(e.originalEvent.wheelDelta /120 > 0) {
        ul.scrollTop(ulTop - 30);
    }else {
        ul.scrollTop(ulTop + 30);
    }
});

// 点击时间，回填到输入框中
$(".time-picker ul").on("click", "li", function () {
    var time = $(this).text();
    $("#timePicker").val(time);
    $(".time-picker").hide();
});

5.完整代码示例

下面给出完整的代码示例，可以参考使用：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jquery时间选择器</title>
    <style type="text/css">
         .time-picker {
            position: absolute;
            background: #fff;
            border: 1px solid #ccc;
            box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
            z-index: 999;
            padding: 10px;
            width: 200px;
            height: 200px;
            overflow-y: scroll;
            font-size: 14px;
            color: #333;
            display: none;
        }

        .time-picker ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        .time-picker ul li {
            height: 30px;
            line-height: 30px;
            cursor: pointer;
        }
    </style>
</head>
<body>

<input type="text" id="timePicker">
<button id="pickerBtn">选择时间</button>

<div class="time-picker">
    <ul>
        <li>00:00</li>
        <li>01:00</li>
        <li>02:00</li>
        <li>03:00</li>
        <li>04:00</li>
        <li>05:00</li>
        <li>06:00</li>
        <li>07:00</li>
        <li>08:00</li>
        <li>09:00</li>
        <li>10:00</li>
        <li>11:00</li>
        <li>12:00</li>
        <li>13:00</li>
        <li>14:00</li>
        <li>15:00</li>
        <li>16:00</li>
        <li>17:00</li>
        <li>18:00</li>
        <li>19:00</li>
        <li>20:00</li>
        <li>21:00</li>
        <li>22:00</li>
        <li>23:00</li>
    </ul>
</div>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
    // 弹出时间选择器
    $("#pickerBtn").click(function () {
        $(".time-picker").show();
    });

    // 阻止时间选择器点击事件冒泡
    $(".time-picker").click(function (e) {
        e.stopPropagation();
    });

    // 点击其他区域，关闭时间选择器
    $(document).click(function () {
        $(".time-picker").hide();
    });

    // 滚轮事件快速选择时间
    $(".time-picker ul").bind('mousewheel', function(e){
        var ul = $(this),
            ulTop = ul.scrollTop();
        if(e.originalEvent.wheelDelta /120 > 0) {
            ul.scrollTop(ulTop - 30);
        }else {
            ul.scrollTop(ulTop + 30);
        }
    });

    // 点击时间，回填到输入框中
    $(".time-picker ul").on("click", "li", function () {
        var time = $(this).text();
        $("#timePicker").val(time);
        $(".time-picker").hide();
    });
</script>

</body>
</html>

6.示例说明

这里给出两个时间选择器示例，一个是24小时格式，一个是12小时格式：

24小时格式示例：

<div class="time-picker">
    <ul>
        <li>00:00</li>
        <li>01:00</li>
        <li>02:00</li>
        <li>03:00</li>
        <li>04:00</li>
        <li>05:00</li>
        <li>06:00</li>
        <li>07:00</li>
        <li>08:00</li>
        <li>09:00</li>
        <li>10:00</li>
        <li>11:00</li>
        <li>12:00</li>
        <li>13:00</li>
        <li>14:00</li>
        <li>15:00</li>
        <li>16:00</li>
        <li>17:00</li>
        <li>18:00</li>
        <li>19:00</li>
        <li>20:00</li>
        <li>21:00</li>
        <li>22:00</li>
        <li>23:00</li>
    </ul>
</div>

12小时格式示例：

<div class="time-picker">
    <ul>
        <li>12:00 AM</li>
        <li>01:00 AM</li>
        <li>02:00 AM</li>
        <li>03:00 AM</li>
        <li>04:00 AM</li>
        <li>05:00 AM</li>
        <li>06:00 AM</li>
        <li>07:00 AM</li>
        <li>08:00 AM</li>
        <li>09:00 AM</li>
        <li>10:00 AM</li>
        <li>11:00 AM</li>
        <li>12:00 PM</li>
        <li>01:00 PM</li>
        <li>02:00 PM</li>
        <li>03:00 PM</li>
        <li>04:00 PM</li>
        <li>05:00 PM</li>
        <li>06:00 PM</li>
        <li>07:00 PM</li>
        <li>08:00 PM</li>
        <li>09:00 PM</li>
        <li>10:00 PM</li>
        <li>11:00 PM</li>
    </ul>
</div>

以上就是关于"jquery实现时间选择器"的完整攻略，希望能对大家有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jquery实现时间选择器 - Python技术站