Widget:Zinseszinsrechner: Unterschied zwischen den Versionen

Aus quickguide.bitcointoolz.com
Zur Navigation springenZur Suche springen
(Die Seite wurde neu angelegt: „<noinclude> 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: {{#widget:Zinseszinsrechner}} {{#widget:Zinseszinsrechner|initialAge=30|monthlySavings=150|a…“)
 
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="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);">
<div id="compoundInterestCalculator" 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>
     <h3 style="text-align: center; color: #333; margin-top: 0;">₿ITCOINTOOLZ.COM - Zinseszinsrechner</h3>
     <div style="margin-bottom: 10px;">
     <div style="margin-bottom: 10px;">
         <label for="initialAge_{$wgWidgetsRand}" style="display: block; margin-bottom: 5px; color: #555;">Aktuelles Alter:</label>
         <label for="initialAge" 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;">
         <input type="number" id="initialAge" 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>
     <div style="margin-bottom: 10px;">
     <div style="margin-bottom: 10px;">
         <label for="retirementAge_{$wgWidgetsRand}" style="display: block; margin-bottom: 5px; color: #555;">Alter bei Renteneintritt:</label>
         <label for="retirementAge" 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;">
         <input type="number" id="retirementAge" 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>
     <div style="margin-bottom: 10px;">
     <div style="margin-bottom: 10px;">
         <label for="monthlySavings_{$wgWidgetsRand}" style="display: block; margin-bottom: 5px; color: #555;">Monatliche Sparrate (€):</label>
         <label for="monthlySavings" 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;">
         <input type="number" id="monthlySavings" 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>
     <div style="margin-bottom: 10px;">
     <div style="margin-bottom: 10px;">
         <label for="annualReturn_{$wgWidgetsRand}" style="display: block; margin-bottom: 5px; color: #555;">Jährliche Rendite (%):</label>
         <label for="annualReturn" 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;">
         <input type="number" id="annualReturn" 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>
     </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>
     <button onclick="calculateCompoundInterest()" 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;">
     <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>
         <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>
         <p id="result" 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>
</div>


<script>
<script>
// Funktion muss einen eindeutigen Namen haben, wenn mehrere Widgets auf einer Seite sind
function calculateCompoundInterest() {
function calculateCompoundInterest_{$wgWidgetsRand}() {
     const initialAge = parseInt(document.getElementById('initialAge').value);
     const initialAge = parseInt(document.getElementById('initialAge_{$wgWidgetsRand}').value);
     const retirementAge = parseInt(document.getElementById('retirementAge').value);
     const retirementAge = parseInt(document.getElementById('retirementAge_{$wgWidgetsRand}').value);
     const monthlySavings = parseFloat(document.getElementById('monthlySavings').value);
     const monthlySavings = parseFloat(document.getElementById('monthlySavings_{$wgWidgetsRand}').value);
     const annualReturn = parseFloat(document.getElementById('annualReturn').value) / 100;
     const annualReturn = parseFloat(document.getElementById('annualReturn_{$wgWidgetsRand}').value) / 100;


     if (isNaN(initialAge) || isNaN(retirementAge) || isNaN(monthlySavings) || isNaN(annualReturn)) {
     if (isNaN(initialAge) || isNaN(retirementAge) || isNaN(monthlySavings) || isNaN(annualReturn)) {
         document.getElementById('result_{$wgWidgetsRand}').innerText = "Bitte alle Felder ausfüllen.";
         document.getElementById('result').innerText = "Bitte alle Felder ausfüllen.";
         return;
         return;
     }
     }
     if (initialAge >= retirementAge) {
     if (initialAge >= retirementAge) {
         document.getElementById('result_{$wgWidgetsRand}').innerText = "Das Renteneintrittsalter muss höher sein als das aktuelle Alter.";
         document.getElementById('result').innerText = "Das Renteneintrittsalter muss höher sein als das aktuelle Alter.";
         return;
         return;
     }
     }
     if (annualReturn < 0) {
     if (annualReturn < 0) {
         document.getElementById('result_{$wgWidgetsRand}').innerText = "Die jährliche Rendite muss positiv sein.";
         document.getElementById('result').innerText = "Die jährliche Rendite muss positiv sein.";
         return;
         return;
     }
     }
Zeile 66: Zeile 65:
     }
     }


     document.getElementById('result_{$wgWidgetsRand}').innerText = `Geschätztes angespartes Vermögen: ${futureValue.toLocaleString('de-DE', { style: 'currency', currency: 'EUR', minimumFractionDigits: 0, maximumFractionDigits: 0 })}`;
     document.getElementById('result').innerText = `Geschätztes angespartes Vermögen: ${futureValue.toLocaleString('de-DE', { style: 'currency', currency: 'EUR', minimumFractionDigits: 0, maximumFractionDigits: 0 })}`;
}
}
</script>
</script>
</includeonly>
</includeonly>

Version vom 2. Juli 2025, 18:08 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'.

   

Abgerufen von „https://quickguide.bitcointoolz.com/index.php?title=Widget:Zinseszinsrechner&oldid=15638“