JS实现时间双选组件

左手的ㄟ右手 2024-04-18 23:12 33阅读 0赞

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

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

**jeDate：**

*  js版：[http://www.jemui.com/uidoc/jedate.html][http_www.jemui.com_uidoc_jedate.html]
 *  jquery版：[http://www.jemui.com/uidoc/jedate-jquery.html][http_www.jemui.com_uidoc_jedate-jquery.html]

**layDate：**[https://www.layui.com/demo/laydate.html][https_www.layui.com_demo_laydate.html]

**my97DatePicker**: [http://www.my97.net/demo/index.htm][http_www.my97.net_demo_index.htm]

### 一、效果图 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3R5cDE4MDU_size_16_color_FFFFFF_t_70][]

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

### 二、代码解析 ###

**1、html部分**

**注： **

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

**2、css样式**

**注：**

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

**3、js部分**

**注：**

*  使用时需要引入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> ~ " +
                "<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>

[http_www.jemui.com_uidoc_jedate.html]: http://www.jemui.com/uidoc/jedate.html
[http_www.jemui.com_uidoc_jedate-jquery.html]: http://www.jemui.com/uidoc/jedate-jquery.html
[https_www.layui.com_demo_laydate.html]: https://www.layui.com/demo/laydate.html
[http_www.my97.net_demo_index.htm]: http://www.my97.net/demo/index.htm
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3R5cDE4MDU_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/405026a1246a4cda8330109fa7c952f0.png