Javascript 用于输入时间度量的jQuery插件
我需要一个jQuery插件将测量的时间输入到文本输入中。我已经在谷歌上搜索了很长时间,所有出现的东西都是用来输入时间的(比如上午11:30),而不是用来测量时间的(比如65小时32分钟8秒),我想在我做自己的之前,作为最后的手段,我会问是否有人知道我可以使用的时间 理想情况下,点击输入字段可以为每小时分和秒显示输入/微调器。当输入时间时,它以一种良好的格式显示在文本字段中,并且可以作为总秒数放入隐藏字段中,以便于处理/存储Javascript 用于输入时间度量的jQuery插件,javascript,jquery,input,time,Javascript,Jquery,Input,Time,我需要一个jQuery插件将测量的时间输入到文本输入中。我已经在谷歌上搜索了很长时间,所有出现的东西都是用来输入时间的(比如上午11:30),而不是用来测量时间的(比如65小时32分钟8秒),我想在我做自己的之前,作为最后的手段,我会问是否有人知道我可以使用的时间 理想情况下,点击输入字段可以为每小时分和秒显示输入/微调器。当输入时间时,它以一种良好的格式显示在文本字段中,并且可以作为总秒数放入隐藏字段中,以便于处理/存储 谢谢。嗯,我还是找不到任何东西,所以我自己做了一个。。。下面的代码。。。
谢谢。嗯,我还是找不到任何东西,所以我自己做了一个。。。下面的代码。。。这是一个有点匆忙的工作,只是为了满足我自己的需要,但可能对其他人有用
(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 ));
我可能会整理代码,并在将来将其开发成更完整的东西,但现在就是这样,您可以随心所欲地使用它。由于目前还没有可用的插件,我建议您创建一个……)你可能想看看
@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;
}