Question

我需要一个jQuery插件来将测量的时间输入到文本输入中。我已经谷歌搜索了很长时间，所有出现的都是为了进入一个时间（例如上午11:30）而不是时间的测量（例如65小时32分8秒）我认为在我制作之前作为最后的手段我自己会问，是否有人知道我可以使用的那个。

理想情况下，点击输入字段会产生每小时分钟和秒的输入/旋转器。当时间被输入时，它以格式良好的方式出现在文本字段中，并且可以作为总秒数放入隐藏字段中以便于处理/存储。

感谢。

Answer 1

好吧，我仍然找不到任何东西，所以我最终制作了自己的...下面的代码......这是一个急需的工作，只是为了满足我自己的需求，但可能对其他人有用。

(function ( $ ) {


    $.fn.inputmytime = function(options) {

        // Handle options.
        var settings = $.extend({
            // These are the defaults.
            title: "Input Time",            
            maxHours: 99,


            onEntered: function() {},
            onOpen: function() {}

        }, options );

         return this.each(function() {

             var textField = $(this);
             var currentValue = $(textField).val();

             // On Focus bring up the inputs
             textField.focus(function() {

                 // Close any existing input box
                 removeInputBox()

                 // Open a new input box
                 addInputBox(textField);

                 // Set spinners from current value
                 setSpinners(currentValue);

                 onOpenCall();
             });

             // Call this function when th edata is entered
             onEnteredCall();

         });


         function setSpinners(currentValue) {
             var parts = hrsMinsSecsFromString(currentValue);

             $('#inputMyTimeInputHrs').val(parts['h']);
             $('#inputMyTimeInputMins').val(parts['m']);
             $('#inputMyTimeInputSecs').val(parts['s']);
         }

         function hrsMinsSecsFromString(timeString) {
             var parts = ['h', 'm', 's'];
             var timeArray = [];

             $.each(parts, function(key, value) {
                 if(timeString.indexOf(value) !== -1) {
                     var splits = timeString.split(value);
                     timeArray[value] = splits[0];
                     timeString = splits[1].substring(1);
                 } else {
                     timeArray[value] = 0;
                 }
             });

             return timeArray;
         }

         function secondsToTime (seconds) {
            var hours   = Math.floor(seconds / 3600);
            var minutes = Math.floor((seconds - (hours * 3600)) / 60);
            var seconds = seconds - (hours * 3600) - (minutes * 60);
            var time = "";

            if (hours != 0) {
              time = hours+"h ";
            }
            if (minutes != 0 || time !== "") {
              minutes = (minutes < 10 && time !== "") ? "0"+minutes : String(minutes);
              time += minutes+"m ";
            }
            seconds = (seconds < 10) ? "0"+seconds : String(seconds);
            time += seconds+"s";
            return time;
        }

        function timeToSeconds (hours, minutes, seconds) {
            var totalSeconds = (hours * 3600) + (minutes * 60) + (seconds * 1);
            return totalSeconds;
        }

         function addInputBox(textField) {

             var minsRange =  {from: 0, to: 59};
             var secsRange =  {from: 0, to: 59};
             var hoursRange = {from: 0, to: settings.maxHours};

             // Build the html for the inputs
             boxHtml = '<div id="inputMyTimeBoxContainer">';
             boxHtml += '<div id="inputMyTimeTitleBar">' +settings.title +'</div>';
             boxHtml += '<table id="inputMyTimeInputsTable">';
             boxHtml += '<tr id="inputMyTimeInputsTableHeader"><td>Hrs</td><td id="inputMyTimeBoxTableMinsCell">Mins</td><td>Secs</td></tr>';
             boxHtml += '<tr>';
             boxHtml += '<td><select class="inputMyTimeInput" id="inputMyTimeInputHrs">';
             for(var i=hoursRange.from; i<= hoursRange.to; i++) {
                 boxHtml += '<option value="' +i +'">' +i +'</option>';
             }
             boxHtml += '</select></td>';
             boxHtml += '<td><select class="inputMyTimeInput" id="inputMyTimeInputMins">';
             for(var i=minsRange.from; i<= minsRange.to; i++) {
                 boxHtml += '<option value="' +i +'">' +i +'</option>';
             }
             boxHtml += '</select></td>';
             boxHtml += '<td><select class="inputMyTimeInput" id="inputMyTimeInputSecs">';
             for(var i=secsRange.from; i<= secsRange.to; i++) {
                 boxHtml += '<option value="' +i +'">' +i +'</option>';
             }
             boxHtml += '</select></td>';
             boxHtml += '</tr>';
             boxHtml += '</table>';
             boxHtml += '<div id="inputMyTimeGoButton">Go</div>';
             boxHtml += '</div>';

             // Add to the page
             textField.after(boxHtml)

             $("#inputMyTimeBoxContainer").position({
                my:        "right middle",
                at:        "right middle",
                of:        textField, 
                collision: "fit"
            })

            // To do when Go button is clicked
             $('#inputMyTimeGoButton').click(function() {
                 var hours = $('#inputMyTimeInputHrs').val();
                 var mins = $('#inputMyTimeInputMins').val();
                 var secs = $('#inputMyTimeInputSecs').val();

                 var totalSeconds = timeToSeconds (hours, mins, secs);

                 // Format and put in to input box
                 textField.val(secondsToTime (totalSeconds));

                 removeInputBox();

                 // Call onEntered
                 onEnteredCall(seconds)

             });
         }

         function removeInputBox() {
             $('#inputMyTimeBoxContainer').remove();
         }


         function onOpenCall() {

            // Returns data for callback function to use
            var data = []

            // Stuff to show the image here...

            // Here's the callback:
            settings.onOpen.call( data );
         }

         function onEnteredCall(seconds) {

            // Returns data for callback function to use
            var data = {seconds: seconds};

            // Stuff to show the image here...

            // Here's the callback:
            settings.onEntered.call( data );
         }

    };

}( jQuery ));

以及随身携带的CSS

@charset "utf-8";

#inputMyTimeBoxContainer {
    text-align:center;
    background-color:#666666;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    display:inline-block;
    font-family:Helvetica, Arial, sans-serif;
    font-size:16px;
    color:#FFFFFF;
    position:absolute;
    z-index:1004;
}
#inputMyTimeTitleBar {
    background-color:#333333;
    color:#009900;
    font-weight:bold;
    padding:10px;
    -moz-border-radius: 5px 5px 0px 0px;
    -webkit-border-radius: 5px 5px 0px 0px;
    border-radius: 5px 5px 0px 0px;
}
#inputMyTimeInputsTable {
    border-collapse:collapse;
    margin:10px;
}
#inputMyTimeInputsTableHeader {
    font-weight:bold;
}
#inputMyTimeBoxTableMinsCell {
    padding-left:10px;
    padding-right:10px;
}
#inputMyTimeGoButton {
    color:#009900;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    border: thin solid #009900;
    padding-top:5px;
    padding-bottom:5px;
    font-weight:bold;
    font-size:12px;
    background-color:#FFFFFF;
    cursor:pointer;
    margin:10px;
}
#inputMyTimeGoButton:hover {
    color:#0F0;
    background-color:#F7F7F7;
}

我可能会将代码弄清楚并将其发展为未来更完整的代码，但现在就是这样，你可以用它来做它。

用于输入时间测量的jQuery插件

1 个答案: