zoukankan html css js c++ java

一个简易的选择小时（时分秒）的插件

老规矩，先上图，效果如下所示：

图片.png

首先引入boostrap和juqery相关

<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">  
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>、

再引入timepicker插件

<!-- 时间插件 -->
<link rel="stylesheet" type="text/css" href="css/timePicker.css">
<script type="text/javascript" src="js/jquery-timepicker.js"/>"></script>

简洁的js代码

//时间选择
        $("#beginTime").hunterTimePicker();
        $("#endTime").hunterTimePicker();

代码示例：


<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">  
        <!-- 小时 -->
        <link rel="stylesheet" type="text/css" href="css/timePicker.css">
    </head>

    <body>
        <div class="row">
        <div class="form-group">
            <label class="col-sm-1 control-label" for="" id="">开始时间</label>
            <div class="col-sm-5">
                <input type="text" class="form-control" id="beginTime"></input>
                <font color="red" id="validateBeginTime"></font>
            </div>
        </div>
        </div>
        
        <div class="row">
        <div class="form-group">
            <label class="col-sm-1 control-label" for="" id="">结束时间</label>
            <div class="col-sm-5">
                <input type="text" class="form-control" id="endTime" ></input>
                <font color="red" id="validateEndTime"></font>
            </div>
        </div>
         </div>
        
    </body>
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <!-- 时间插件 -->
    <script type="text/javascript" src="js/jquery-timepicker.js"/>"></script>
    <script>
        //时间选择
        $("#beginTime").hunterTimePicker();
        $("#endTime").hunterTimePicker();
    </script>

</html>

附上：
timePicker.css

.Hunter-time-picker{
    position: absolute;
    border: 2px solid #c9cbce;
     390px;
    background: #ffffff;
    z-index: 999999;
    font-size: 0;
}
.Hunter-time-picker:before, .Hunter-time-picker:after{
    content: '';
    display: block;
     0;
    height: 0;
    border- 10px;
    border-style: solid;
    position: absolute;
    left: 20px;
    z-index: 999999;
}
.Hunter-time-picker:before{
    border-color: transparent transparent #ffffff;
    top: -17px;
    z-index: 9999999;
}
.Hunter-time-picker:after{
    border-color: transparent transparent #c9cbce;
    top: -20px;
}
.Hunter-time-picker *{
    box-sizing: border-box;
    margin: 0 auto;
    padding: 0;
    color: #666666;
    font-family: "Microsoft YaHei";
    font-size: 14px;
}
.Hunter-time-picker ul{
    list-style: none;
}
.Hunter-time-picker ul li{
    display: inline-block;
    position: relative;
    margin: 4px;
    cursor: pointer;
}
.Hunter-time-picker p{
    font-weight: bold;
    padding: 0 4px;
    margin-top: 4px;
    margin-bottom: 10px;
}
.Hunter-time-picker .line{
     340px;
    margin: 0 auto;
    margin-top: 4px;
    border-bottom: 1px solid #d8d8d8;
}

/*选择小时*/
.Hunter-time-picker .Hunter-wrap{
    position: relative;
     100%;
    background: #ffffff;
    padding: 9px;
}
.Hunter-time-picker .Hunter-hour-name{
    display: inline-block;
     50px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    position: relative;
    background-color: #f5f5f5;
}
.Hunter-time-picker .Hunter-hour-name:hover{
    color: #002DFF;
}

.Hunter-time-picker .Hunter-hour.active{
    z-index: 999999999;
}
.Hunter-time-picker .active .Hunter-hour-name{
    color: #ffffff;
    background-color: #3A7ADB;
}
.Hunter-time-picker .Hunter-minute-wrap{
    display: none;
    border: 1px solid #D8D8D8;
    background: #ffffff;
    position: absolute;
    top: 29px;
     370px;
    padding: 10px 10px 5px 10px;
}
.Hunter-time-picker .Hunter-minute{
     50px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    color: #999999;
    background-color: #f5f5f5;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.Hunter-time-picker .Hunter-minute:hover{
    color: #002DFF;
}
.Hunter-time-picker .Hunter-minute.active {
    color: #ffffff;
    background-color: #3A7ADB;
}
.Hunter-time-picker .Hunter-clean-btn{
     108px;
    height: 30px;
    background-color: #3A7ADB!important;
    color: #ffffff;
    background-image: none !important;
    border: 5px solid #3A7ADB;
    border-radius: 0;
}
.Hunter-time-picker .Hunter-clean-btn:hover{
    background-color: #0B4B94 !important;
    border-color: #3A7ADB;
}

附上：
jquery-timepicker.js

/**
 *
 * @author  李凯飞
 *
 * 描述：选择时间组件，先选择小时再选择分钟，只支持00-23小时、00-05-10...50-55分钟。回调函数的e为源对象。
 *
 * 示例如下：
 *
 * $("#timePicker").hunterTimePicker();
 *
 * $('.time-picker').hunterTimePicker({
 *      callback: function(e){
 *          ....
 *      }
 * });
 *
 */

(function ($) {
    $.hunterTimePicker = function (box, options) {
        var dates = {
          hour: ['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23'],
          minute: ['00', '05', '10', '15', '20', '25', '30', '35', '40', '45', '50', '55'],
        };

        var box = $(box);

        var template = $('<div class="Hunter-time-picker" id="Hunter_time_picker"><div class="Hunter-wrap"><ul class="Hunter-wrap" id="Hunter_time_wrap"></ul></div></div>');

        var time_wrap = $('#Hunter_time_wrap', template);

        $(document).click(function() {
            template.remove();
        });

        box.click(function(event){
            event.preventDefault();
            event.stopPropagation();
            $('.Hunter-time-picker').remove();
            var _this = $(this);
            var offset = _this.offset();
            var top = offset.top + _this.outerHeight() + 15;
            template.css({
                'left': offset.left,
                'top': top
            });
            buildTimePicker();
            $('body').append(template);

            $('.Hunter-time-picker').click(function(event){
                event.preventDefault();
                event.stopPropagation();
            });
        });

        function buildTimePicker(){
            buildHourTpl();
            hourEvent();
            minuteEvent();
            cleanBtnEvent();
        };

        function buildHourTpl(){
            var hour_html = '<p>小时</p>';
            for(var i = 0; i < dates.hour.length; i++){
                var temp = box.val().split(":")[0];
                if(dates.hour[i]==temp){
                    hour_html += '<li class="Hunter-hour active" data-hour="' + dates.hour[i] +'"><ul class="Hunter-minute-wrap"></ul><div class="Hunter-hour-name">' + dates.hour[i] + '</div></li>';
                }else{
                    hour_html += '<li class="Hunter-hour" data-hour="' + dates.hour[i] +'"><ul class="Hunter-minute-wrap"></ul><div class="Hunter-hour-name">' + dates.hour[i] + '</div></li>';
                }
            }

            hour_html += '<li class="Hunter-clean"><input type="button" class="Hunter-clean-btn" id="Hunter_clean_btn" value="清 空"></li>'
            
            time_wrap.html(hour_html);
        };

        function buildMinuteTpl(cur_time){
            var poi = cur_time.position();
            var minute_html = '<p>分钟</p>';
            var temp = box.val().split(":")[1];
            for(var j = 0; j < dates.minute.length;j++){
                if(dates.minute[j]==temp){
                    minute_html += '<li class="Hunter-minute active" data-minute="' + dates.minute[j] + '">' + dates.minute[j] + '</li>';
                }else{
                    minute_html += '<li class="Hunter-minute" data-minute="' + dates.minute[j] + '">' + dates.minute[j] + '</li>';
                }
            }
            cur_time.find('.Hunter-minute-wrap').html(minute_html).css('left', '-' + (poi.left - 37) + 'px').show();
        };

        function hourEvent(){
            time_wrap.on('click', '.Hunter-hour', function(event){
                event.preventDefault();
                event.stopPropagation();
                var _this = $(this);

                time_wrap.find('.Hunter-hour').removeClass('active');
                time_wrap.find('.Hunter-hour-name').removeClass('active');
                time_wrap.find('.Hunter-minute-wrap').hide().children().remove();

                _this.addClass('active');
                _this.find('.Hunter-hour').addClass('active');

                var hourValue = _this.data('hour');
                var temp = box.val().split(":");
                if(temp.length > 1){
                    box.val(hourValue+":"+temp[1]);
                }else{
                    box.val(hourValue+":00");
                }
                buildMinuteTpl(_this);
                
                if(options.callback) options.callback(box);

                return false;
            });
        };

        function minuteEvent(){
            time_wrap.on('click', '.Hunter-minute', function(event) {
                event.preventDefault();
                event.stopPropagation();
                var _this = $(this);

                var minuteValue = _this.data('minute');
                var temp = box.val().split(":")[0]+":"+minuteValue;
                box.val(temp);
                template.remove();

                if(options.callback) options.callback(box);

                return false;
            });
        };

        function cleanBtnEvent(){
            time_wrap.on('click', '#Hunter_clean_btn', function(event){
                event.preventDefault();
                event.stopPropagation();

                box.val('');
                template.remove();
                if(options.callback) options.callback(box);
                return false;
            });
        };
    };

    $.fn.extend({
        hunterTimePicker: function (options) {
            options = $.extend({}, options);
            this.each(function () {
                new $.hunterTimePicker(this, options);
            });
            return this;
        }
    });
})(jQuery);

查看全文

相关阅读:
ASP.NET 表单验证 Part.1（理解表单验证）
Silverlight 简介 Part.3（设计 Siverlight 页面）
ASP.NET 成员资格 Part.3（LoginStatus、LoginView、PasswordRecovery）
ASP.NET 网站部署 Part.1（安装IIS、复制文件部署网站）
ASP.NET Dynamic Data Part.1（创建动态数据应用程序）
ASP.NET 安全模型 Part.2（SSL）
ASP.NET MVC Part.2（扩展基本的 MVC 应用程序）
ASP.NET 网站部署 Part.2（使用 Web 部署）
开发高级 Web 部件
 创建 Web 部件（WebPart 类、简单的 Web 部件）

原文地址：https://www.cnblogs.com/ting6/p/9725336.html