JS实现时间双选组件

最新推荐文章于 2025-05-16 09:30:00 发布

tansci

最新推荐文章于 2025-05-16 09:30:00 发布

阅读量912

点赞数 1

CC 4.0 BY-SA版权

分类专栏： JS 文章标签： js html

本文链接：https://blog.youkuaiyun.com/typ1805/article/details/100807050

JS 专栏收录该内容

12 篇文章

订阅专栏

由于项目需求，需要实现一个只选择小时和分钟的时间段组件，并且分钟以5分钟为间断的，设置的默认时间是08:00~23:00。

网上时间日期空间很多，推荐几种比较好用的：

jeDate：

js版：http://www.jemui.com/uidoc/jedate.html
jquery版：http://www.jemui.com/uidoc/jedate-jquery.html

layDate：https://www.layui.com/demo/laydate.html

my97DatePicker: http://www.my97.net/demo/index.htm

一、效果图

注：正常选择如图一所示，开始时间大于结束时间时有提示图二所示。

二、代码解析

1、html部分

<body>
<div class="content">
    <div id="time" class="time" onclick="timeRanges()">08:00 ~ 23:00</div>
</div>
</body>

注：

<div class="content">可删除，不是必须的；
<div id="time" class="time" οnclick="timeRanges()">08:00 ~ 23:00</div>id、class、onclick可根据具体js代码重构。

2、css样式

<style>
        .content {
            margin-left: 50%;
        }

        .time {
            width: 200px;
            height: 35px;
            border: 1px solid #cccccc;
            background-color: #0da0ab;
            border-radius: 4px;
            font-size: 14px;
            color: #ffffff;
            line-height: 35px;
            text-align: center;
            cursor: pointer;
        }

        .timediv {
            width: 301px;
            height: 330px;
            border: 1px solid #cccccc;
            display: none;
            margin-top: 4px;
            position: absolute;
            z-index: 1;
        }

        .timetitle {
            width: 300px;
            height: 40px;
            color: #9c9c9c;
            float: left;
            text-align: center;
            line-height: 40px;
            border-bottom: 1px solid #cccccc;
        }

        .timeval1 {
            float: left;
            width: 150px;
            height: 250px;
            border-right: 1px solid #cccccc;
        }

        .timeval2 {
            float: left;
            width: 150px;
            height: 250px;
        }

        .hour-minute {
            float: left;
            width: 69px;
            overflow-y: hidden;
            height: 249px;
            margin-top: 0;
            margin-bottom: 0;
            padding-left: 5px;
            text-align: center;
        }

        .hour-minute:hover {
            overflow-y: scroll;
        }

        li {
            list-style: none;
            cursor: pointer;
            padding: 5px;
        }

        li:hover {
            color: #ffffff;
            background-color: #d2d2c6;
        }

        .timebottom {
            float: left;
            width: 301px;
            height: 39px;
            border-top: 1px solid #cccccc;
            padding-top: 8px;
        }

        .timeval {
            color: #9c9c9c;
            width: 200px;
            float: left;
            text-align: center;
        }

        .timebutton {
            float: left;
            width: 100px;
        }

        button {
            cursor: pointer;
        }

        .hour-minute::-webkit-scrollbar {
            width: 10px;
            height: 1px;
        }

        .hour-minute::-webkit-scrollbar-thumb {
            border-radius: 10px;
            box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
            background: #9c9c9c;
        }

        .hour-minute::-webkit-scrollbar-track {
            box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
            border-radius: 10px;
            background: #ededed;
        }
    </style>

注：

class="content"根据自己需求可删除，这是的作用是在页面的显示位置；
这里修改原始的滚动条样式，根据个人爱好可调整色彩。

3、js部分

<script type="text/javascript" src="js/jquery.min.js"></script>
<script>
    function timeRanges() {
        // 初始化
        $("#timediv").remove();
        var timediv = "<div id='timediv' class='timediv'>" +
            "<div class='timetitle'><span>开始时间</span><span style='margin-left: 85px'>结束时间</span></div>" +
            "<div id='timeval1' class='timeval1'></div>" +
            "<div id='timeval2' class='timeval2'></div>" +
            "<div class='timebottom'>" +
            "<div id='timeval' class='timeval'>" +
            "<span id='startHour'>08</span>:" +
            "<span id='startMinute'>00</span>&nbsp;~&nbsp;" +
            "<span id='endHour'>23</span>:" +
            "<span id='endMinute'>00</span></div>" +
            "<div class='timebutton'><button onclick='clone()'>清空</button><button onclick='save()' style='margin-left: 10px'>确定</button></div>" +
            "</div>" +
            "</div>";
        $("#time").after(timediv);
        // 初始化小时
        var starthour = "<ul class='hour-minute'>";
        var endhour = "<ul class='hour-minute'>";
        for (var i = 0; i < 24; i++) {
            starthour += "<li onclick=\"lival(this,'hour','start')\">" + (i < 10 ? "0" + i : i) + "</li>";
            endhour += "<li onclick=\"lival(this,'hour','end')\">" + (i < 10 ? "0" + i : i) + "</li>";
        }
        starthour += "</ul>";
        endhour += "</ul>";
        $("#timeval1").append(starthour);
        $("#timeval2").append(endhour);

        // 初始化分钟
        var startminute = "<ul class='hour-minute' style='border-left: 1px solid #cccccc'>";
        var endminute = "<ul class='hour-minute' style='border-left: 1px solid #cccccc'>";
        for (var j = 0; j < 60; j++) {
            if (j % 5 == 0) {
                startminute += "<li onclick=\"lival(this,'minute','start')\">" + (j < 10 ? "0" + j : j) + "</li>";
                endminute += "<li onclick=\"lival(this,'minute','end')\">" + (j < 10 ? "0" + j : j) + "</li>";
            }
        }
        startminute += "</ul>";
        endminute += "</ul>";
        $("#timeval1").append(startminute);
        $("#timeval2").append(endminute);
        $("#timediv").toggle();
    }

    // 选择时间范围及赋值
    function lival(val, type1, type2) {
        if ("hour" == type1 && "start" == type2) {
            $("#startHour").html($(val).text());
        } else if ("hour" == type1 && "end" == type2) {
            $("#endHour").html($(val).text());
        } else if ("minute" == type1 && "start" == type2) {
            $("#startMinute").html($(val).text());
        } else if ("minute" == type1 && "end" == type2) {
            $("#endMinute").html($(val).text());
        }
    }

    // 清空
    function clone() {
        $("#startHour").html("00");
        $("#startMinute").html("00");
        $("#endHour").html("00");
        $("#endMinute").html("00");
    }

    // 确认
    function save() {
        var startHour = $("#startHour").text();
        var endHour = $("#endHour").text();
        var startMinute = $("#startMinute").text();
        var endMinute = $("#endMinute").text();
        if ((startHour > endHour) || (startHour == endHour && startMinute >= endMinute)) {
            alert("开始时间不能大于或等于结束时间")
            return;
        } else {
            $("#time").html($("#timeval").text());
            $("#timediv").toggle();
        }
    }
</script>

注：

使用时需要引入jQuery.js；
部分html代码在js中初始化了，可调整至body中。

三、完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>时间控件</title>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <style>
        .content {
            margin-left: 50%;
        }

        .time {
            width: 200px;
            height: 35px;
            border: 1px solid #cccccc;
            background-color: #0da0ab;
            border-radius: 4px;
            font-size: 14px;
            color: #ffffff;
            line-height: 35px;
            text-align: center;
            cursor: pointer;
        }

        .timediv {
            width: 301px;
            height: 330px;
            border: 1px solid #cccccc;
            display: none;
            margin-top: 4px;
            position: absolute;
            z-index: 1;
        }

        .timetitle {
            width: 300px;
            height: 40px;
            color: #9c9c9c;
            float: left;
            text-align: center;
            line-height: 40px;
            border-bottom: 1px solid #cccccc;
        }

        .timeval1 {
            float: left;
            width: 150px;
            height: 250px;
            border-right: 1px solid #cccccc;
        }

        .timeval2 {
            float: left;
            width: 150px;
            height: 250px;
        }

        .hour-minute {
            float: left;
            width: 69px;
            overflow-y: hidden;
            height: 249px;
            margin-top: 0;
            margin-bottom: 0;
            padding-left: 5px;
            text-align: center;
        }

        .hour-minute:hover {
            overflow-y: scroll;
        }

        li {
            list-style: none;
            cursor: pointer;
            padding: 5px;
        }

        li:hover {
            color: #ffffff;
            background-color: #d2d2c6;
        }

        .timebottom {
            float: left;
            width: 301px;
            height: 39px;
            border-top: 1px solid #cccccc;
            padding-top: 8px;
        }

        .timeval {
            color: #9c9c9c;
            width: 200px;
            float: left;
            text-align: center;
        }

        .timebutton {
            float: left;
            width: 100px;
        }

        button {
            cursor: pointer;
        }

        .hour-minute::-webkit-scrollbar {
            width: 10px;
            height: 1px;
        }

        .hour-minute::-webkit-scrollbar-thumb {
            border-radius: 10px;
            box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
            background: #9c9c9c;
        }

        .hour-minute::-webkit-scrollbar-track {
            box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
            border-radius: 10px;
            background: #ededed;
        }
    </style>
</head>
<script>
    function timeRanges() {
        // 初始化
        $("#timediv").remove();
        var timediv = "<div id='timediv' class='timediv'>" +
            "<div class='timetitle'><span>开始时间</span><span style='margin-left: 85px'>结束时间</span></div>" +
            "<div id='timeval1' class='timeval1'></div>" +
            "<div id='timeval2' class='timeval2'></div>" +
            "<div class='timebottom'>" +
            "<div id='timeval' class='timeval'>" +
            "<span id='startHour'>08</span>:" +
            "<span id='startMinute'>00</span>&nbsp;~&nbsp;" +
            "<span id='endHour'>23</span>:" +
            "<span id='endMinute'>00</span></div>" +
            "<div class='timebutton'><button onclick='clone()'>清空</button><button onclick='save()' style='margin-left: 10px'>确定</button></div>" +
            "</div>" +
            "</div>";
        $("#time").after(timediv);
        // 初始化小时
        var starthour = "<ul class='hour-minute'>";
        var endhour = "<ul class='hour-minute'>";
        for (var i = 0; i < 24; i++) {
            starthour += "<li onclick=\"lival(this,'hour','start')\">" + (i < 10 ? "0" + i : i) + "</li>";
            endhour += "<li onclick=\"lival(this,'hour','end')\">" + (i < 10 ? "0" + i : i) + "</li>";
        }
        starthour += "</ul>";
        endhour += "</ul>";
        $("#timeval1").append(starthour);
        $("#timeval2").append(endhour);

        // 初始化分钟
        var startminute = "<ul class='hour-minute' style='border-left: 1px solid #cccccc'>";
        var endminute = "<ul class='hour-minute' style='border-left: 1px solid #cccccc'>";
        for (var j = 0; j < 60; j++) {
            if (j % 5 == 0) {
                startminute += "<li onclick=\"lival(this,'minute','start')\">" + (j < 10 ? "0" + j : j) + "</li>";
                endminute += "<li onclick=\"lival(this,'minute','end')\">" + (j < 10 ? "0" + j : j) + "</li>";
            }
        }
        startminute += "</ul>";
        endminute += "</ul>";
        $("#timeval1").append(startminute);
        $("#timeval2").append(endminute);
        $("#timediv").toggle();
    }

    // 选择时间范围及赋值
    function lival(val, type1, type2) {
        if ("hour" == type1 && "start" == type2) {
            $("#startHour").html($(val).text());
        } else if ("hour" == type1 && "end" == type2) {
            $("#endHour").html($(val).text());
        } else if ("minute" == type1 && "start" == type2) {
            $("#startMinute").html($(val).text());
        } else if ("minute" == type1 && "end" == type2) {
            $("#endMinute").html($(val).text());
        }
    }

    // 清空
    function clone() {
        $("#startHour").html("00");
        $("#startMinute").html("00");
        $("#endHour").html("00");
        $("#endMinute").html("00");
    }

    // 确认
    function save() {
        var startHour = $("#startHour").text();
        var endHour = $("#endHour").text();
        var startMinute = $("#startMinute").text();
        var endMinute = $("#endMinute").text();
        if ((startHour > endHour) || (startHour == endHour && startMinute >= endMinute)) {
            alert("开始时间不能大于或等于结束时间")
            return;
        } else {
            $("#time").html($("#timeval").text());
            $("#timediv").toggle();
        }
    }
</script>
<body>
<div class="content">
    <div id="time" class="time" onclick="timeRanges()">08:00 ~ 23:00</div>
</div>
</body>
</html>