Widget:Zinseszinsrechner: Unterschied zwischen den Versionen
Aus quickguide.bitcointoolz.com
Zur Navigation springenZur Suche springen
Marko (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
Marko (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
||
| Zeile 11: | Zeile 11: | ||
{{#widget:Zinseszinsrechner|initialAge=30|monthlySavings=150|annualReturn=8}} | {{#widget:Zinseszinsrechner|initialAge=30|monthlySavings=150|annualReturn=8}} | ||
</noinclude><includeonly> | </noinclude><includeonly> | ||
<div id=" | <div id="compoundInterestCalculator_{$wgWidgetsRand}" style="font-family: sans-serif; max-width: 400px; margin: auto; padding: 15px; border: 1px solid #ccc; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);"> | ||
<h3 style="text-align: center; color: #333; margin-top: 0;">₿ITCOINTOOLZ.COM - Zinseszinsrechner</h3> | |||
<div style="margin-bottom: 10px;"> | |||
<label for="initialAge_{$wgWidgetsRand}" style="display: block; margin-bottom: 5px; color: #555;">Aktuelles Alter:</label> | |||
<input type="number" id="initialAge_{$wgWidgetsRand}" value="{if isset($initialAge)}{$initialAge}{else}25{/if}" min="1" style="width: calc(100% - 12px); padding: 8px; border: 1px solid #ddd; border-radius: 4px;"> | |||
</div> | |||
<div style="margin-bottom: 10px;"> | |||
<label for="retirementAge_{$wgWidgetsRand}" style="display: block; margin-bottom: 5px; color: #555;">Alter bei Renteneintritt:</label> | |||
<input type="number" id="retirementAge_{$wgWidgetsRand}" value="{if isset($retirementAge)}{$retirementAge}{else}65{/if}" min="1" style="width: calc(100% - 12px); padding: 8px; border: 1px solid #ddd; border-radius: 4px;"> | |||
</div> | |||
<div style="margin-bottom: 10px;"> | |||
<label for="monthlySavings_{$wgWidgetsRand}" style="display: block; margin-bottom: 5px; color: #555;">Monatliche Sparrate (€):</label> | |||
<input type="number" id="monthlySavings_{$wgWidgetsRand}" value="{if isset($monthlySavings)}{$monthlySavings}{else}100{/if}" min="0" step="any" style="width: calc(100% - 12px); padding: 8px; border: 1px solid #ddd; border-radius: 4px;"> | |||
</div> | |||
<div style="margin-bottom: 10px;"> | |||
<label for="annualReturn_{$wgWidgetsRand}" style="display: block; margin-bottom: 5px; color: #555;">Jährliche Rendite (%):</label> | |||
<input type="number" id="annualReturn_{$wgWidgetsRand}" value="{if isset($annualReturn)}{$annualReturn}{else}7{/if}" min="0" step="any" style="width: calc(100% - 12px); padding: 8px; border: 1px solid #ddd; border-radius: 4px;"> | |||
</div> | |||
<button onclick="calculateCompoundInterest_{$wgWidgetsRand}()" style="width: 100%; padding: 10px; background-color: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 16px;">Berechnen</button> | |||
<div style="margin-top: 15px; padding-top: 10px; border-top: 1px solid #eee;"> | |||
<h4 style="text-align: center; color: #333; margin-bottom: 5px;">Ergebnis:</h4> | |||
<p id="result_{$wgWidgetsRand}" style="text-align: center; font-size: 1.1em; font-weight: bold; color: #007bff;">Geben Sie Ihre Werte ein und klicken Sie auf 'Berechnen'.</p> | |||
</div> | |||
</div> | </div> | ||
<script> | <script> | ||
function | // Funktion muss einen eindeutigen Namen haben, wenn mehrere Widgets auf einer Seite sind | ||
function calculateCompoundInterest_{$wgWidgetsRand}() { | |||
const initialAge = parseInt(document.getElementById('initialAge_{$wgWidgetsRand}').value); | |||
const retirementAge = parseInt(document.getElementById('retirementAge_{$wgWidgetsRand}').value); | |||
const monthlySavings = parseFloat(document.getElementById('monthlySavings_{$wgWidgetsRand}').value); | |||
const annualReturn = parseFloat(document.getElementById('annualReturn_{$wgWidgetsRand}').value) / 100; | |||
if (isNaN(initialAge) || isNaN(retirementAge) || isNaN(monthlySavings) || isNaN(annualReturn)) { | |||
document.getElementById('result_{$wgWidgetsRand}').innerText = "Bitte alle Felder ausfüllen."; | |||
return; | |||
} | |||
if (initialAge >= retirementAge) { | |||
document.getElementById('result_{$wgWidgetsRand}').innerText = "Das Renteneintrittsalter muss höher sein als das aktuelle Alter."; | |||
return; | |||
} | |||
if (annualReturn < 0) { | |||
document.getElementById('result_{$wgWidgetsRand}').innerText = "Die jährliche Rendite muss positiv sein."; | |||
return; | |||
} | |||
const yearsToInvest = retirementAge - initialAge; | |||
const monthlyReturn = annualReturn / 12; | |||
const totalMonths = yearsToInvest * 12; | |||
let futureValue = 0; | |||
for (let i = 0; i < totalMonths; i++) { | |||
futureValue = (futureValue + monthlyReturn) * monthlySavings + futureValue * monthlyReturn; // Korrigierte Zinseszinsformel | |||
} | |||
futureValue = monthlySavings * ((Math.pow(1 + monthlyReturn, totalMonths) - 1) / monthlyReturn) * (1 + monthlyReturn); // Einfachere, korrekte Zinseszinsformel (monatliche Einzahlung) | |||
document.getElementById(' | // Falls Sie einen initialen Startbetrag hinzufügen möchten, müssten Sie diesen auch noch berücksichtigen. | ||
// Hier gehen wir davon aus, dass futureValue nur aus den monatlichen Sparraten berechnet wird. | |||
document.getElementById('result_{$wgWidgetsRand}').innerText = `Geschätztes angespartes Vermögen: ${futureValue.toLocaleString('de-DE', { style: 'currency', currency: 'EUR', minimumFractionDigits: 0, maximumFractionDigits: 0 })}`; | |||
} | } | ||
</script> | </script> | ||
</includeonly> | </includeonly> | ||
Aktuelle Version vom 2. Juli 2025, 18:12 Uhr
Dies ist ein Widget zur Berechnung des Zinseszinseffekts. Parameter:
- initialAge (optional): Startalter des Sparers (Standard: 25)
- retirementAge (optional): Alter bei Renteneintritt (Standard: 65)
- monthlySavings (optional): Monatliche Sparrate in Euro (Standard: 100)
- annualReturn (optional): Jährliche Rendite in Prozent (Standard: 7)
Beispiel:
₿ITCOINTOOLZ.COM - Zinseszinsrechner
Ergebnis:
Geben Sie Ihre Werte ein und klicken Sie auf 'Berechnen'.
₿ITCOINTOOLZ.COM - Zinseszinsrechner
Ergebnis:
Geben Sie Ihre Werte ein und klicken Sie auf 'Berechnen'.
