Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Olá a todos, sou novo aqui..
Mais tenho uma duvida que está acabando comigo, pode ser simples..
Precisava que quando preenchesse as informações o resultado aparecesse automaticamente sem necessidade de apertar em nenhum lugar;
E quando eu insiro em meu html com bootstrap o "input" aparece uma caixa de dialogo feia, haveria alguma outra maneira de exibir o resultado? "h1", "span" ?
HTML:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="jquery-ui.css" rel="stylesheet">
</head>
<body>
<p>
<label>Check in:</label>
<input name="din" type="text" id="din">
</p>
<p>
<label>Check out:</label>
<input name="dout" type="text" id="dout">
</p>
<p>
<label>Time in:</label>
<select id="tin" name="tin">
<option value="13">13:00</option>
<option value="19">19:00</option>
<option value="22">22:00</option>
</select>
</p>
<p>
<label>Time out:</label>
<select id="tout" name="tout">
<option value="12">12:00</option>
<option value="18">18:00</option>
<option value="22">22:00</option>
</select>
</p>
<p>
<label>Valor :</label>
<input name="diff" id="diff">
</p>
<script src="external/jquery/jquery.js"></script>
<script src="jquery-ui.js"></script>
<script src="reserva.js"></script>
</body>
</html>
JAVASCRIPT:
var _MS_PER_HOUR = 1000 * 60 * 60; // 3600000ms per hour
var outputTextWithSign = '{0}{1} Days(s) {2}{3} Hours(s)'; // included sign
var outputTextWithoutSign = '{0} Days(s) {1} Hours(s)'; // no sign
var formatacao = '{0}'; // no sign
$(function () {
$("#din, #dout").datepicker({
minDate: 0,
dateFormat: 'dd/mm/yy'
});
});
$(document).ready(function () {
$("#diff").focus(function () {
var startDate = $('#din').datepicker('getDate');
var endDate = $('#dout').datepicker('getDate');
// use native set hour to set the hours, assuming val is exact hours
// otherwise derive exact hour from your values
startDate.setHours($('#tin').val());
endDate.setHours($('#tout').val());
// convert date and time to UTC to take daylight savings into account
var utc1 = Date.UTC(startDate.getFullYear(), startDate.getMonth(), startDate.getDate(), startDate.getHours(), startDate.getMinutes(), startDate.getSeconds());
var utc2 = Date.UTC(endDate.getFullYear(), endDate.getMonth(), endDate.getDate(), endDate.getHours(), endDate.getMinutes(), endDate.getSeconds());
// get utc difference by always deducting less from more
// that way you always get accurate difference even if in reverse!
var utcDiff = utc1 > utc2 ? utc1 - utc2 : utc2 - utc1;
// get total difference in hours
var msDiff = Math.floor(utcDiff / _MS_PER_HOUR);
// get days from total hours
var dayDiff = Math.floor(msDiff / 24);
// get left over hours after deducting full days
var hourDiff = Math.floor((msDiff - (24 * dayDiff)));
//
// write out results
//
// if you really need to show - sign and not just the difference...
var sign = utc1 > utc2 ? '-' : '';
var diasph = (dayDiff*24);
var total = (diasph+hourDiff);
// format output text - with (-)sign if required
var txtWithSign = outputTextWithSign.format(dayDiff ? sign : '', dayDiff, hourDiff ? sign : '', hourDiff);
// simple format without sign
var txtNoSign = outputTextWithoutSign.format(dayDiff, hourDiff);
var circus = (total*0.95);
var completo = formatacao.format(circus.toPrecision(4));
// assign result - switch with/without sign result as needed
$("#diff").val(completo);
//$("#diff").val(txtNoSign);
});
});// Helper for easy string formatting.
String.prototype.format = function () {
//var s = arguments[0];
var s = this;
for (var i = 0; i < arguments.length; i++) {
var reg = new RegExp("\\{" + i + "\\}", "gm");
s = s.replace(reg, arguments[i]);
}
return s;
}Carregando comentários...