Question

此系统计算两个日期之间的天数。该天数乘以一个值。但是当客户想要更改出发日期时，总价值不变。

<?php
date_default_timezone_set('America/Argentina/Buenos_Aires');
$tarjeta = 200;
$efectivo = $tarjeta*0.5;
?>

<script>
function data(valor) {
let ingreso = document.getElementById("ingreso").value;
let retiro = document.getElementById("retiro").value;
let fechaInicio = new Date(ingreso).getTime();
let fechaFin    = new Date(retiro).getTime();
let diff = fechaFin - fechaInicio; //Diferencia en milisegundos
let dias = diff/(1000*60*60*24); //Diferencia en dias
document.getElementById("totaldias").value = dias;
document.getElementById("valor").value = dias*valor;
document.getElementById("dolares").value = valor*tasa_cambio;
}

表格

<h2>Sistema</h2>
<form action="" method="post">
<input type="date" name="ingreso" id="ingreso" autocomplete="off"><br>
<input type="date" name="salida" id="retiro" autocomplete="off"><br>
<input type="radio" id="efectivo" name="pago" value="efectivo" onChange="data(<?php echo $tarjeta;?>)">
<label for="efectivo">Tarjeta 100%</label><br>
<input type="radio" id="tarjeta" name="pago" value="tarjeta" onChange="data(<?php echo $efectivo;?>)">
<label for="tarjeta">Tarjeta 50%</label><br>
<label for="totaldias">Total dias</label>
<input type="text" name="dias" id="totaldias" readonly="readonly"><br>
<label for="valor">A pagar</label>
<input type="text" name="valor" id="valor" readonly="readonly">
</form>

Answer 1

请确保在任何输入（不仅是单选按钮）更改时执行重新计算。一种很好的方法：在JavaScript代码中，侦听HTML文档中发生的所有“更改”事件。如果这样做，则应删除HTML中当前的onChange属性。

data函数具有一个每天价格的参数，但是如果该函数不具有该参数，而是自己查看所选的单选按钮，然后从该选择中得出结论，则更好。使用哪个价格。

其他一些需要解决的问题：

HTML部分缺少“ dolares”（您在JS代码中引用）的（只读）输入元素。
以美元为单位的价格计算还需要在公式中使用valor。
未定义变量tasa_cambio。
当某些日期尚未填写时，它不应输出“ NaN”之类的内容，而可能只将结果留空。

这就是代码的样子-检查注释：

<?php
date_default_timezone_set('America/Argentina/Buenos_Aires');
$tarjeta = 200;
$efectivo = $tarjeta*0.5;
$tasa_cambio = 1.13; // Need to define this variable
?>

<script>
const tasa_cambio = <?=$tasa_cambio?>; // Need to define this variable

function data(valor) {
    let ingreso = document.getElementById("ingreso").value;
    let retiro = document.getElementById("retiro").value;
    let fechaInicio = new Date(ingreso).getTime();
    let fechaFin    = new Date(retiro).getTime();
    let diff = fechaFin - fechaInicio;
    let dias = diff/(1000*60*60*24);
    // Clear the output when not all values available, so add: || ""
    document.getElementById("totaldias").value = dias || ""; 
    document.getElementById("valor").value = dias*valor || "";
    // Must multiply with number of days also:
    document.getElementById("dolares").value = valor*dias*tasa_cambio || ""; 
}

// Use this listener instead of onChange attributes.
document.addEventListener("change", function () {
    // Inject the two PHP values in this expression:
    data(document.getElementById("tarjeta").checked ? <?=$tarjeta?> : <?= $efectivo?>);
});

表格：

<h2>Sistema</h2>
<form action="" method="post">
    <input type="date" name="ingreso" id="ingreso" autocomplete="off"><br>
    <input type="date" name="salida" id="retiro" autocomplete="off"><br>
    <input type="radio" id="efectivo" name="pago" value="efectivo">
    <label for="efectivo">Tarjeta 100%</label><br>
    <input type="radio" id="tarjeta" name="pago" value="tarjeta">
    <label for="tarjeta">Tarjeta 50%</label><br>
    <label for="totaldias">Total dias</label>
    <input type="text" name="dias" id="totaldias" readonly="readonly"><br>
    <label for="valor">A pagar</label>
    <input type="text" name="valor" id="valor" readonly="readonly"><br>
    <!-- Add the follow element -->
    <label for="dolares">Dolares</label>
    <input type="text" id="dolares" readonly="readonly"><br>
</form>

更改日期时不更改值

1 个答案: