<!DOCTYPE html>
<html lang="de">
<head>
<link rel="stylesheet" type="text/css" href="ControlPanelStyles.css" media="all">
<script src="ControlPanelX.js"></script>
<style>
body { background-color: #eee; font-family: Arial, Verdana, sans-serif; }
div.Page { background-color: white; border: 2px solid #888; width: 760px; position: relative; left: 50%; margin-left: -380px; padding: 1em 2em; }
table { border: 1px solid #ddd; }
table th, table td { text-align: left; padding-top: 3px; padding-bottom: 3px; }
table th { background-color: #ddd; }
.lbtn { color:white; background:black; border:1px solid gray; padding:0px 4px 1px 4px; font-size:90%; }
a { text-decoration:none; }
</style>
</head>
<body>
<div class="Page">
<h1>Einfaches Beispiel für ControlPanels's</h1>
<script>
function Rechner() {
this.Startkapital = 10000;
this.Zins = 0.05;
this.Zeitraum = 10;
this.Endkapital = 0;
}
Rechner.prototype.BerechneEndkapital = function() {
this.Endkapital = this.Startkapital * Math.pow( 1 + this.Zins, this.Zeitraum );
}
var Model = new Rechner();
function Berechnung() {
Model.BerechneEndkapital();
ControlPanels.Update();
}
function Reset() {
ControlPanels.Reset();
Berechnung();
}
ControlPanels.NewPanel( {
ModelRef: 'Model',
NCols: 2,
Format: 'fix0',
Digits: 2,
OnModelChange: Berechnung
} ).AddHeader( {
Text: 'Zinseszins-Rechner' + ControlPanels.ResetButtonR(),
ColSpan: 4
} ).AddTextField( {
Name: 'Startkapital',
Units: 'CHF'
} ).AddTextField( {
Name: 'Zins',
Format: 'std',
Digits: 8,
Units: '%',
Mult: 0.01
} ).AddTextField( {
Name: 'Zeitraum',
Format: 'std',
Digits: 8,
Units:
'Jahre'
} ).AddTextField( {
Name: 'Endkapital',
ReadOnly: true,
Units: 'CHF',
Description: 'Mehr zu ControlPanel\'s auf walter.bislins.ch',
Link: 'http://walter.bislins.ch/doku/ControlPanel'
} ).Render();
xOnLoad( Berechnung );
</script>
<p>Gib einen Wert in eines der Eingabefelder ein und drücke dann <i>Enter</i>.</p>
<p>Um ein Feld auf den Anfangswert zurückzusetzen, klicke in das Feld und drücke dann die <i>Esc</i> Taste oder lösche das Feld und drücke Enter oder gib ein Leerzeichen ein und drücke Enter.</p>
<p>Beachte die Zahlenformatierung bei grossen Werten!</p>
</div>
</body>