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

Question

我需要一个 jQuery 插件来将测量时间输入文本输入。我已经谷歌搜索了很长时间，出现的所有内容都是为了输入时间（例如 11:30 am）而不是时间测量（例如 65hrs 32mins 8 secs），我认为这是我做之前的最后手段我自己的我会问是否有人知道我可以使用的。

理想情况下，单击输入字段会在每时每刻调出输入/微调器。输入时间后，它会以格式良好的方式出现在文本字段中，并且可以作为总秒数放入隐藏字段中，以便于处理/存储。

谢谢。

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 用于输入时间度量的插件

jQuery plugin for entering a measurement of time

javascript

time

jquery

input