[英]JavaScript Change click button for automatic
我有這個腳本
<script>
function calculaDiferenca(data_inicio, data_fim) {
var date1 = new Date(data_inicio);
var date2 = new Date(data_fim);
var timeDiff = Math.abs(date2.getTime() - date1.getTime());
var diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24));
alert(diffDays + ' dias');
}
(function() {
var calcBtn = document.getElementById('calcular');
calcBtn.addEventListener('click', function(){
var data_inicio = document.getElementById('data_inicio').value;
var data_fim = document.getElementById('data_fim').value;
calculaDiferenca(data_inicio, data_fim);
});
})();
</script>
我可以更改而不是單擊按鈕來計算當 date1 和 date2 被填充時進行計算嗎?
var calcBtn = document.getElementById('calcular');
這是一個工作片段:
function calculaDiferenca(ev) { var date1 = new Date(ini.value); var date2 = new Date(fim.value); var timeDiff = Math.abs(date2.getTime() - date1.getTime()); var diffDays = Math.ceil(timeDiff/(1000*3600*24)); dif.textContent=diffDays+' dia'+(diffDays===1?'':'s'); } const [ini,fim,dif] = "data_inicio,data_fim,dif".split(",").map(t=>document.getElementById(t)); [ini,fim].forEach(e=>e.addEventListener("input",calculaDiferenca));
<input type="date" id="data_inicio" placeholder="inicio"> <input type="date" id="data_fim" placeholder="fim"><br> <p>Diferenca: <span id="dif"></span></p>
您可以在輸入字段上偵聽change
事件並調用計算 function。
let first = document.getElementById('data_inicio');
let last = document.getElementById('data_fim');
first.addEventListener('change', (e) => {
calculaDiferenca(e.target.value, last.value)
})
last.addEventListener('change', (e) => {
calculaDiferenca(first.value, e.target.value)
})
@Khalil 的回答很好。 我只是想添加一些東西來使過程有順序。
禁用 date2 字段。 作為:
<input type="date" id="data_fim" disabled/>
然后讓它依賴於 date1。
let first = document.getElementById('data_inicio');
let last = document.getElementById('data_fim');
first.addEventListener('change', (e) => {
last.disabled = false
calculaDiferenca(e.target.value, last.value)
})
last.addEventListener('change', (e) => {
calculaDiferenca(first.value, e.target.value)
})
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.