jQuery Taschenrechner

Nachdem wir das Memory Spiel erfolgreich umgesetzt haben, versuchen wir mal einen Taschenrechner zu bauen. Ob man sowas auf einer Webseite brauch weiß ich nicht, aber ob es funktioniert interessiert mich.

Wir erstellen uns als erstes, eine Tabelle im Taschenrechner Format. Für die Tasten wählen wir ein "span" Tag, dem wir die Funktion der Taste als Data hinterlegen.

NLD-TR-123

off
ON CE % /
7 8 9 *
4 5 6 -
1 2 3 +
0 , =

Der html Quellcode für unseren Rechner sieht so aus, eigentlich nur eine einfache Tabelle, die lässt sich gut Formatieren.

<div class="taschenrechner_outer clr">
	<p>NLD-<span>TR</span>-123<p>
	<table class="taschenrechner">
		<thead>
			<tr>
				<th colspan="4"><span class="taschenrechner_formel">off</span></th>
			</tr>
			<tr>
				<th colspan="4"><span class="taschenrechner_ergebnis"></span></th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td><span data-taste="on" class="taste_bg-red">ON</span></td>
				<td><span data-taste="ce">CE</span></td>
				<td><span data-taste="%">%</span></td>
				<td><span data-taste="/">/</span></td>
			</tr>
			<tr>
				<td><span data-taste="7">7</span></td>
				<td><span data-taste="8">8</span></td>
				<td><span data-taste="9">9</span></td>
				<td><span data-taste="*">*</span></td>
			</tr>
			<tr>
				<td><span data-taste="4">4</span></td>
				<td><span data-taste="5">5</span></td>
				<td><span data-taste="6">6</span></td>
				<td><span data-taste="-">-</span></td>
			</tr>
			<tr>
				<td><span data-taste="1">1</span></td>
				<td><span data-taste="2">2</span></td>
				<td><span data-taste="3">3</span></td>
				<td><span data-taste="+">+</span></td>
			</tr>
			<tr>
				<td><span data-taste="0">0</span></td>
				<td><span data-taste=".">,</span></td>
				<td colspan="2"><span data-taste="=" class="taste_bg-red">=</span></td>
			</tr>
		</tbody>
	</table>
</div>

Wir arbeiten ohne Bilder, das Aussehen, können wir sehr gut mit css gestalten.

.taschenrechner_outer {
	display: block;
	margin: 0px auto 0px auto;
	padding: 10px;
	width: 216px;
	background-color: #2e2e2e;
	border: 5px solid #000;
	box-shadow: 0px 0px 10px #000;
	border-radius: 10px;
}
.taschenrechner_outer p {
	display: block;
	margin: 0px;
	padding: 0 4px 0 4px;
	background-color: transparent;
	color: #666;
	font-size: 0.8em;
	text-shadow: 1px 1px 1px #000;
}
.taschenrechner_outer p span {
	background-color: transparent;
	color: orange;
}
table.taschenrechner {
	margin: 0px;
	width: 100%;
	text-shadow: none;
}
table.taschenrechner th,
table.taschenrechner td {
	padding: 4px;
	width: 46px;
}
table.taschenrechner th span {
	display: block;
	margin: 0px;
	padding: 5px 10px 5px 10px;
	height: 10px;
	background-color: #008765;
	color: #000;
	font-size: 10px;
	line-height: 10px;
	text-align: right;
	border: 5px inset #747474;
	font-weight: normal;
	text-transform: uppercase;
}
table.taschenrechner th span.taschenrechner_ergebnis {
	display: block;
	margin: 0 0 10px 0;
	padding: 10px;
	height: 15px;
	font-size: 15px;
	line-height: 15px;
}
table.taschenrechner td span {
	display: block;
	margin: 0px;
	padding: 0px;
	width: 100%;
	height: 46px;
	background-color: #a4a4a4;
	color: #fff;
	font-size: 1.1em;
	text-align: center;
	line-height: 50px;
	text-transform: uppercase;
	cursor: pointer;
	border-radius: 5px;
	text-shadow: 1px 1px 1px #000;
	box-shadow: 0px 0px 10px #000;
	transition: all 250ms linear;
}
table.taschenrechner td span.taste_bg-red {
	background-color: #c30000;
}
table.taschenrechner td span:hover {
	background-color: #eaeaea;
	box-shadow: inset 0px 0px 5px #000;
}

Etwas kompliziert ist das JavaScript, wir können "eval" die Rechnung, welche im span Tag "taschenrechner_formel" steht einfach berechnen. Leider kann die Funktion "eval" keine Prozentrechnung.

Also fragen wir ab, ob in unserer Formel ein Prozentzeichen vorhanden ist, wenn nicht, dann einfach berechnen. Falls die Aufgabe ein Prozentzeichen enthält müssen wir die Formel mit "split" auseinander nehmen und den zweiten Value vor dem mit % rausfinden.

Dieser ist der Prozentuale Ausgangspunkt für unsere Prozentrechnung.

jQuery(document).ready(function() {
	jQuery(".taschenrechner").each(function() {
		var this_taschenrechner = jQuery(this);
		this_taschenrechner.find("span[data-taste='on']").click(function() {
			if(this_taschenrechner.find(".taschenrechner_formel").text() == "off") {
				this_taschenrechner.find(".taschenrechner_formel").text("");
				this_taschenrechner.find(".taschenrechner_ergebnis").text("0");
				jQuery(this).text("off");
			} else {
				this_taschenrechner.find(".taschenrechner_formel").text("off");
				this_taschenrechner.find(".taschenrechner_ergebnis").text("");
				jQuery(this).text("on");
			}
		});
		this_taschenrechner.find("span[data-taste='ce']").click(function() {
			this_taschenrechner.find(".taschenrechner_formel").text("");
			this_taschenrechner.find(".taschenrechner_ergebnis").text("0");
		});
		this_taschenrechner.find("span").each(function() {
			jQuery(this).click(function() {
				if(this_taschenrechner.find(".taschenrechner_ergebnis").text() == 0) {
					if(this_taschenrechner.find("span[data-taste='on']").text() == "off" && jQuery(this).data("taste") != "on" && jQuery(this).data("taste") != "ce") {
						if(jQuery(this).data("taste") == "/" || jQuery(this).data("taste") == "*" || jQuery(this).data("taste") == "-" || jQuery(this).data("taste") == "+" || jQuery(this).data("taste") == "=") {
							this_taschenrechner.find(".taschenrechner_formel").append(" "+jQuery(this).data("taste")+" ");
						} else {
							this_taschenrechner.find(".taschenrechner_formel").append(jQuery(this).data("taste"));
						}
						if(jQuery(this).data("taste") == "=") {
							var formel = this_taschenrechner.find(".taschenrechner_formel").text().replace(" = ", "");
							var finden = /%/g;
							if(finden.test(formel)) {
								var values = formel.split(" ");
								var ergebnis = "";
								for(i=0; i<values.length; i++) {
									var prozent = /%/g;
									if(prozent.test(values[i])) {
										ergebnis += values[i - 2] / 100 * parseInt(values[i]);
									} else {
										ergebnis += values[i];
									}
								}
								this_taschenrechner.find(".taschenrechner_ergebnis").text(eval(ergebnis));
							} else {
								this_taschenrechner.find(".taschenrechner_ergebnis").text(eval(formel));
							} 
						}
					}
				} else {
					if(jQuery(this).data("taste") == "/" || jQuery(this).data("taste") == "*" || jQuery(this).data("taste") == "-" || jQuery(this).data("taste") == "+") {
						this_taschenrechner.find(".taschenrechner_formel").text(this_taschenrechner.find(".taschenrechner_ergebnis").text()+" "+jQuery(this).data("taste")+" ");
						this_taschenrechner.find(".taschenrechner_ergebnis").text("0");
					}
				}
			});
		});
	});
});

Wenn euch der Taschenrechner auch gut gefällt, könnt Ihr gern einen like hinterlassen. Habt Ihr Verbesserungsvorschläge, würden wir uns über einen Kommentar freuen.

Feel free to use jquery_taschenrechner.zip

Kommentare

Kommentare können nur mit einer Verifizierten E-Mail-Adresse geschrieben werden, die E-Mail-Adresse muss einmal bestätigt werden.
@
(success)