我有一些完全可用的 Javascript，它正在执行一些计算并将其显示到表格中 - 它是一个 12 行表格，代表 12 个月的预测
我添加了字段 - (additionalInvestment) 和 (month) - 我希望在我输入的任何输入字段中都这样说，例如:
1000 (additionalAmount) 2 (month) - javascript 会将值 1000 添加到脚本中第 2 个月的起始余额...(相当于 Index2)...所以说第 1 个月的期末余额是 1000 - 脚本使第 2 个月的开始余额等于第 1 个月的结束余额，等等 - 但如果一组输入字段是 1000(附加金额)和(月)2，它将在第 2 个月的开始余额上添加 1000....如果我将第 3 个月放入第二组输入字段中，它会将 X 值添加到第 3 个月的起始余额...
https://codepen.io/george-richardson/pen/RdYjPJ
忽略forecastClient(日期)的脚本
function forecastClient() {
const bankHolidays = new Set([
Date.parse("April, 19 2019"),
Date.parse("April, 22 2019"),
Date.parse("May, 6 2019"),
Date.parse("May, 27 2019"),
Date.parse("August, 26 2019"),
Date.parse("December, 25 2019"),
Date.parse("December, 26 2019"),
Date.parse("January, 1 2020"),
]);
function addWorkingDays(date, days) {
function workingDay(date) {
while (true) {
let day = (date.getDay() + 1) % 7;
if (day < 2)
date.setDate(date.getDate() + 2 - day);
if (!bankHolidays.has(date.getTime())) break;
date.setDate(date.getDate() + 1);
}
}
workingDay(date);
while (days--) {
date.setDate(date.getDate() + 1);
workingDay(date);
}
return date;
}
const dateStr = document.querySelector("#startdate").value.replace(/-/g, "/");
const date = new Date(dateStr);
addWorkingDays(date, 0); // Make sure it is a working day
const td = document.querySelectorAll("#forecast td.date-forecast");
for (let i = 0; i < 12; i++) {
td[i * 2].textContent = date.toDateString();
td[i * 2 + 1].textContent = addWorkingDays(date, 27).toDateString();
addWorkingDays(date, 1);
}
};
function myfunction() {
event.preventDefault();
doForecast(0);
}
function doForecast(index) {
var nextIndex = index + 1;
var startBalance = null;
if (index == 0) {
startBalance = parseFloat(document.getElementById("startBalance" + index).value);
} else {
startBalance = parseFloat(document.getElementById("amount" + index).innerHTML);
}
var interestRate = parseFloat(document.getElementById("interestRate").value);
var fee = parseFloat(document.getElementById("fee").value);
parseFloat(document.getElementById("interestRate").value);
var vat = parseFloat(document.getElementById("vat").value);
interestRate = interestRate / 100;
fee = fee / 100;
vat = vat / 100;
var simpleInt = startBalance * interestRate;
var profitfee = simpleInt * fee;
var afterVAT = profitfee * vat;
var amount = (startBalance + simpleInt - profitfee - afterVAT).toFixed(2)
var stringIndex = "" + (nextIndex);
document.getElementById("startBalance" + stringIndex).innerHTML = startBalance.toFixed(2);
document.getElementById("simpleInt" + stringIndex).innerHTML = simpleInt.toFixed(2);
document.getElementById("profitfee" + stringIndex).innerHTML = profitfee.toFixed(2);
document.getElementById("afterVAT" + stringIndex).innerHTML = afterVAT.toFixed(2);
document.getElementById("amount" + stringIndex).innerHTML = amount;
if (nextIndex < 12) {
doForecast(nextIndex);
}
}
function start() {
forecastClient();
myfunction();
}<body onload="start();">
<div class="form-group col-mb-3">
<label onkeyup="" for="forecastLive">Live Date: <input value="03/27/2019" id="startdate"></label>
<label for="startBalance">Start Balance
<input onkeyup="myfunction()" id="startBalance0" value="1000">
</label>
<input type="hidden" onkeyup="myfunction()" id="interestRate" value="20">
<input type="hidden" onkeyup="myfunction()" id="fee" value="30">
<input type="hidden" onkeyup="myfunction()" id="vat" value="20">
</div>
<br>
<div class="form-group col-mb-3">
<label for="additionalAmount">Aditional Amount
<input onkeyup="myfunction()" id="additionalAmount1" value=""></label>
<label for="Month">Month
<input onkeyup="myfunction()" id="additionalMonth" value="">
</label>
<label for="additionalAmount">Aditional Amount
<input onkeyup="myfunction()" id="additionalAmount2" value=""></label>
<label for="Month">Month
<input onkeyup="myfunction()" id="additionalMonth" value="">
</label>
<br>
<br>
<style>
.forecast table,
.forecast tr,
.forecast td,
.forecast th {
border: 1px solid;
border-collapse: collapse;
}
</style>
<table class="forecast table table-striped" id="forecast" onload="myfunction()">
<tr>
<th scope="col">Month</th>
<th scope="col">Month Start</th>
<th scope="col">Investment</th>
<th scope="col">Return</th>
<th scope="col">Fee</th>
<th scope="col">Vat</th>
<th scope="col">Closing Balance</th>
<th scope="col">Month End</th>
</tr>
<tr>
<td>1</td>
<td class="date-forecast"></td>
<td><span>£</span><span id="startBalance1"></span></td>
<td><span>£</span><span id="simpleInt1"></span></td>
<td><span>£</span><span id="profitfee1"></span></td>
<td><span>£</span><span id="afterVAT1"></span></td>
<td><span>£</span><span id="amount1"></span></td>
<td class="date-forecast"></td>
</tr>
<tr>
<td>2</td>
<td class="date-forecast"></td>
<td><span>£</span><span id="startBalance2"></span></td>
<td><span>£</span><span id="simpleInt2"></span></td>
<td><span>£</span><span id="profitfee2"></span></td>
<td><span>£</span><span id="afterVAT2"></span></td>
<td><span>£</span><span id="amount2"></span></td>
<td class="date-forecast"></td>
</tr>
<tr>
<td>3</td>
<td class="date-forecast"></td>
<td><span>£</span><span id="startBalance3"></span></td>
<td><span>£</span><span id="simpleInt3"></span></td>
<td><span>£</span><span id="profitfee3"></span></td>
<td><span>£</span><span id="afterVAT3"></span></td>
<td><span>£</span><span id="amount3"></span></td>
<td class="date-forecast"></td>
</tr>
<tr>
<td>4</td>
<td class="date-forecast"></td>
<td><span>£</span><span id="startBalance4"></span></td>
<td><span>£</span><span id="simpleInt4"></span></td>
<td><span>£</span><span id="profitfee4"></span></td>
<td><span>£</span><span id="afterVAT4"></span></td>
<td><span>£</span><span id="amount4"></span></td>
<td class="date-forecast"></td>
</tr>
<tr>
<td>5</td>
<td class="date-forecast"></td>
<td><span>£</span><span id="startBalance5"></span></td>
<td><span>£</span><span id="simpleInt5"></span></td>
<td><span>£</span><span id="profitfee5"></span></td>
<td><span>£</span><span id="afterVAT5"></span></td>
<td><span>£</span><span id="amount5"></span></td>
<td class="date-forecast"></td>
</tr>
<tr>
<td>6</td>
<td class="date-forecast"></td>
<td><span>£</span><span id="startBalance6"></span></td>
<td><span>£</span><span id="simpleInt6"></span></td>
<td><span>£</span><span id="profitfee6"></span></td>
<td><span>£</span><span id="afterVAT6"></span></td>
<td><span>£</span><span id="amount6"></span></td>
<td class="date-forecast"></td>
</tr>
<tr>
<td>7</td>
<td class="date-forecast"></td>
<td><span>£</span><span id="startBalance7"></span></td>
<td><span>£</span><span id="simpleInt7"></span></td>
<td><span>£</span><span id="profitfee7"></span></td>
<td><span>£</span><span id="afterVAT7"></span></td>
<td><span>£</span><span id="amount7"></span></td>
<td class="date-forecast"></td>
</tr>
<tr>
<td>8</td>
<td class="date-forecast"></td>
<td><span>£</span><span id="startBalance8"></span></td>
<td><span>£</span><span id="simpleInt8"></span></td>
<td><span>£</span><span id="profitfee8"></span></td>
<td><span>£</span><span id="afterVAT8"></span></td>
<td><span>£</span><span id="amount8"></span></td>
<td class="date-forecast"></td>
</tr>
<tr>
<td>9</td>
<td class="date-forecast"></td>
<td><span>£</span><span id="startBalance9"></span></td>
<td><span>£</span><span id="simpleInt9"></span></td>
<td><span>£</span><span id="profitfee9"></span></td>
<td><span>£</span><span id="afterVAT9"></span></td>
<td><span>£</span><span id="amount9"></span></td>
<td class="date-forecast"></td>
</tr>
<tr>
<td>10</td>
<td class="date-forecast"></td>
<td><span>£</span><span id="startBalance10"></span></td>
<td><span>£</span><span id="simpleInt10"></span></td>
<td><span>£</span><span id="profitfee10"></span></td>
<td><span>£</span><span id="afterVAT10"></span></td>
<td><span>£</span><span id="amount10"></span></td>
<td class="date-forecast"></td>
</tr>
<tr>
<td>11</td>
<td class="date-forecast"></td>
<td><span>£</span><span id="startBalance11"></span></td>
<td><span>£</span><span id="simpleInt11"></span></td>
<td><span>£</span><span id="profitfee11"></span></td>
<td><span>£</span><span id="afterVAT11"></span></td>
<td><span>£</span><span id="amount11"></span></td>
<td class="date-forecast"></td>
</tr>
<tr>
<td>12</td>
<td class="date-forecast"></td>
<td><span>£</span><span id="startBalance12"></span></td>
<td><span>£</span><span id="simpleInt12"></span></td>
<td><span>£</span><span id="profitfee12"></span></td>
<td><span>£</span><span id="afterVAT12"></span></td>
<td><span>£</span><span id="amount12"></span></td>
<td class="date-forecast"></td>
</tr>
</table>最佳答案
我设法这样做:
function forecastClient() {
const bankHolidays = new Set([
Date.parse("April, 19 2019"),
Date.parse("April, 22 2019"),
Date.parse("May, 6 2019"),
Date.parse("May, 27 2019"),
Date.parse("August, 26 2019"),
Date.parse("December, 25 2019"),
Date.parse("December, 26 2019"),
Date.parse("January, 1 2020"),
]);
function addWorkingDays(date, days) {
function workingDay(date) {
while (true) {
let day = (date.getDay() + 1) % 7;
if (day < 2) date.setDate(date.getDate() + 2 - day);
if (!bankHolidays.has(date.getTime())) break;
date.setDate(date.getDate() + 1);
}
}
workingDay(date);
while (days--) {
date.setDate(date.getDate() + 1);
workingDay(date);
}
return date;
}
const dateStr = document.querySelector("#startdate").value.replace(/-/g, "/");
const date = new Date(dateStr);
addWorkingDays(date, 0); // Make sure it is a working day
const td = document.querySelectorAll("#forecast td.date-forecast");
for (let i = 0; i < 12; i++) {
td[i * 2].textContent = date.toDateString();
td[i * 2 + 1].textContent = addWorkingDays(date, 27).toDateString();
addWorkingDays(date, 1);
}
};
function myfunction() {
event.preventDefault();
doForecast(0);
}
function doForecast(index) {
var nextIndex = index + 1;
var startBalance = null;
var additionalAmount = (document.getElementById("additionalAmount").value != '') ? parseFloat(document.getElementById("additionalAmount").value) : null;
var additionalMonth = parseFloat(document.getElementById("additionalMonth").value);
var additionalAmount2 = (document.getElementById("additionalAmount2").value != '') ? parseFloat(document.getElementById("additionalAmount2").value) : null;
var additionalMonth2 = parseFloat(document.getElementById("additionalMonth2").value);
var additionalAmount3 = (document.getElementById("additionalAmount3").value != '') ? parseFloat(document.getElementById("additionalAmount3").value) : null;
var additionalMonth3 = parseFloat(document.getElementById("additionalMonth3").value);
if (index == 0) {
startBalance = parseFloat(document.getElementById("startBalance" + index).value);
if( additionalMonth == 1 && additionalAmount != undefined){
startBalance += additionalAmount;
}
if( additionalMonth2 == 1 && additionalAmount2 != undefined){
startBalance += additionalAmount2;
}
if( additionalMonth3 == 1 && additionalAmount3 != undefined){
startBalance += additionalAmount3;
}
} else {
startBalance = parseFloat(document.getElementById("amount" + index).innerHTML);
if( additionalMonth > 1 && additionalMonth == (index + 1) && additionalAmount != undefined){
startBalance += additionalAmount;
}
if( additionalMonth2 > 1 && additionalMonth2 == (index + 1) && additionalAmount2 != undefined){
startBalance += additionalAmount2;
}
if( additionalMonth3 > 1 && additionalMonth3 == (index + 1) && additionalAmount3 != undefined){
startBalance += additionalAmount3;
}
}
var interestRate = parseFloat(document.getElementById("interestRate").value);
var fee = parseFloat(document.getElementById("fee").value);
parseFloat(document.getElementById("interestRate").value);
var vat = parseFloat(document.getElementById("vat").value);
interestRate = interestRate / 100;
fee = fee / 100;
vat = vat / 100;
var simpleInt = startBalance * interestRate;
var profitfee = simpleInt * fee;
var afterVAT = profitfee * vat;
var amount = (startBalance + simpleInt - profitfee - afterVAT).toFixed(2)
var stringIndex = "" + (nextIndex);
document.getElementById("startBalance" + stringIndex).innerHTML = startBalance.toFixed(2);
document.getElementById("simpleInt" + stringIndex).innerHTML = simpleInt.toFixed(2);
document.getElementById("profitfee" + stringIndex).innerHTML = profitfee.toFixed(2);
document.getElementById("afterVAT" + stringIndex).innerHTML = afterVAT.toFixed(2);
document.getElementById("amount" + stringIndex).innerHTML = amount;
if (nextIndex < 12) {
doForecast(nextIndex);
}
}
function start() {
forecastClient();
myfunction();
}<body onload="start();">
<div class="form-group col-mb-3">
<label onkeyup="" for="forecastLive">Live Date: <input value="03/27/2019" id="startdate"></label>
<label for="startBalance">Start Balance
<input id="startBalance0" value="1000">
</label>
<input type="hidden" onkeyup="myfunction()" id="interestRate" value="20" />
<input type="hidden" onkeyup="myfunction()" id="fee" value="30" />
<input type="hidden" onkeyup="myfunction()" id="vat" value="20" />
</div>
<br>
<div class="form-group col-mb-3">
<label for="additionalAmount">Aditional Amount
<input onkeyup="myfunction()" id="additionalAmount" value=""></label>
<label for="Month">Month
<input onkeyup="myfunction()" id="additionalMonth" value="">
</label>
<br />
<label for="additionalAmount2">Aditional Amount
<input onkeyup="myfunction()" id="additionalAmount2" value=""></label>
<label for="Month">Month
<input onkeyup="myfunction()" id="additionalMonth2" value="">
</label>
<br />
<label for="additionalAmount3">Aditional Amount
<input onkeyup="myfunction()" id="additionalAmount3" value=""></label>
<label for="Month">Month
<input onkeyup="myfunction()" id="additionalMonth3" value="">
</label>
<br>
<br>
<style>
.forecast table,
.forecast tr,
.forecast td,
.forecast th {
border: 1px solid;
border-collapse: collapse;
}
</style>
<table class="forecast table table-striped" id="forecast" onload="myfunction()">
<tr>
<th scope="col">Month</th>
<th scope="col">Month Start</th>
<th scope="col">Investment</th>
<th scope="col">Return</th>
<th scope="col">Fee</th>
<th scope="col">Vat</th>
<th scope="col">Closing Balance</th>
<th scope="col">Month End</th>
</tr>
<tr>
<td>1</td>
<td class="date-forecast"></td>
<td><span>£</span><span id="startBalance1"></span></td>
<td><span>£</span><span id="simpleInt1"></span></td>
<td><span>£</span><span id="profitfee1"></span></td>
<td><span>£</span><span id="afterVAT1"></span></td>
<td><span>£</span><span id="amount1"></span></td>
<td class="date-forecast"></td>
</tr>
<tr>
<td>2</td>
<td class="date-forecast"></td>
<td><span>£</span><span id="startBalance2"></span></td>
<td><span>£</span><span id="simpleInt2"></span></td>
<td><span>£</span><span id="profitfee2"></span></td>
<td><span>£</span><span id="afterVAT2"></span></td>
<td><span>£</span><span id="amount2"></span></td>
<td class="date-forecast"></td>
</tr>
<tr>
<td>3</td>
<td class="date-forecast"></td>
<td><span>£</span><span id="startBalance3"></span></td>
<td><span>£</span><span id="simpleInt3"></span></td>
<td><span>£</span><span id="profitfee3"></span></td>
<td><span>£</span><span id="afterVAT3"></span></td>
<td><span>£</span><span id="amount3"></span></td>
<td class="date-forecast"></td>
</tr>
<tr>
<td>4</td>
<td class="date-forecast"></td>
<td><span>£</span><span id="startBalance4"></span></td>
<td><span>£</span><span id="simpleInt4"></span></td>
<td><span>£</span><span id="profitfee4"></span></td>
<td><span>£</span><span id="afterVAT4"></span></td>
<td><span>£</span><span id="amount4"></span></td>
<td class="date-forecast"></td>
</tr>
<tr>
<td>5</td>
<td class="date-forecast"></td>
<td><span>£</span><span id="startBalance5"></span></td>
<td><span>£</span><span id="simpleInt5"></span></td>
<td><span>£</span><span id="profitfee5"></span></td>
<td><span>£</span><span id="afterVAT5"></span></td>
<td><span>£</span><span id="amount5"></span></td>
<td class="date-forecast"></td>
</tr>
<tr>
<td>6</td>
<td class="date-forecast"></td>
<td><span>£</span><span id="startBalance6"></span></td>
<td><span>£</span><span id="simpleInt6"></span></td>
<td><span>£</span><span id="profitfee6"></span></td>
<td><span>£</span><span id="afterVAT6"></span></td>
<td><span>£</span><span id="amount6"></span></td>
<td class="date-forecast"></td>
</tr>
<tr>
<td>7</td>
<td class="date-forecast"></td>
<td><span>£</span><span id="startBalance7"></span></td>
<td><span>£</span><span id="simpleInt7"></span></td>
<td><span>£</span><span id="profitfee7"></span></td>
<td><span>£</span><span id="afterVAT7"></span></td>
<td><span>£</span><span id="amount7"></span></td>
<td class="date-forecast"></td>
</tr>
<tr>
<td>8</td>
<td class="date-forecast"></td>
<td><span>£</span><span id="startBalance8"></span></td>
<td><span>£</span><span id="simpleInt8"></span></td>
<td><span>£</span><span id="profitfee8"></span></td>
<td><span>£</span><span id="afterVAT8"></span></td>
<td><span>£</span><span id="amount8"></span></td>
<td class="date-forecast"></td>
</tr>
<tr>
<td>9</td>
<td class="date-forecast"></td>
<td><span>£</span><span id="startBalance9"></span></td>
<td><span>£</span><span id="simpleInt9"></span></td>
<td><span>£</span><span id="profitfee9"></span></td>
<td><span>£</span><span id="afterVAT9"></span></td>
<td><span>£</span><span id="amount9"></span></td>
<td class="date-forecast"></td>
</tr>
<tr>
<td>10</td>
<td class="date-forecast"></td>
<td><span>£</span><span id="startBalance10"></span></td>
<td><span>£</span><span id="simpleInt10"></span></td>
<td><span>£</span><span id="profitfee10"></span></td>
<td><span>£</span><span id="afterVAT10"></span></td>
<td><span>£</span><span id="amount10"></span></td>
<td class="date-forecast"></td>
</tr>
<tr>
<td>11</td>
<td class="date-forecast"></td>
<td><span>£</span><span id="startBalance11"></span></td>
<td><span>£</span><span id="simpleInt11"></span></td>
<td><span>£</span><span id="profitfee11"></span></td>
<td><span>£</span><span id="afterVAT11"></span></td>
<td><span>£</span><span id="amount11"></span></td>
<td class="date-forecast"></td>
</tr>
<tr>
<td>12</td>
<td class="date-forecast"></td>
<td><span>£</span><span id="startBalance12"></span></td>
<td><span>£</span><span id="simpleInt12"></span></td>
<td><span>£</span><span id="profitfee12"></span></td>
<td><span>£</span><span id="afterVAT12"></span></td>
<td><span>£</span><span id="amount12"></span></td>
<td class="date-forecast"></td>
</tr>
</table>代码也可以在这里:https://codepen.io/tmacpolo/pen/WmaRVr
编辑:更新代码以允许 3 种数量的可能性
关于javascript - 如何添加到特定索引处的 JavaScript 计算，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55264275/