Taschenrechner - Website X5 Helpsite

Logo Schriftzug
Logo WSX5
Newsletter anmelden
Scan QR or Download Android App

Direkt zum Seiteninhalt

Taschenrechner

Scripte > Attachment

3 Javascript Taschenrechner für die Homepage

Taschenrechner sind in der heutigen Zeit nicht mehr weg zu denken. Sie beherrschen allerlei Rechenoperationen, von einfachen mathematischen Aufgaben bis hin zu komplexen Berechnungen. Man kennt diese als Hand- und Tischgerät, im Handy und auch für die Webseite.
Obwohl mit PHP auch gerechnet werden kann, kommt fast ausschließlich Javascript für die Rechenoperationen zur Anwendung.
Eine Auswahl haben wir hier eingestellt, die alle über die jeweiligen CSS-Eigenschaften an die Homepage angepasst werden können.
Entsprechende ZIP-Datei auswählen und in ein beliebiges Verzeichnis auf dem PC entpacken.
HEAD-Code in den HEAD-Bereich <head>...</head> und HTML-Code in den BODY-Bereich <body>...</body> der aufrufende Datei einfügen.
Eine demo.html ist jeweils beigefügt, die zum Test in das Root-Verzeichnis des Webservers kopiert werden kann.
Aufruf: "http://www.domain.tld/demo.html". Diese kann aber auch durch einen Doppelklick ausgeführt werden.

Javascript-Rechner 1

Download Button
Downloads:
Code für den <HEAD> Bereich
<link rel="stylesheet" href="wsX5Obj/Obj76_1/js_calc1.css" />
<script src="wsX5Obj/Obj76_1/js_calc1.js"></script>
Code für den <BODY> Bereich
<div align="center">
<form name="calculator">
<table>
<tr>
<td>
<table class="Obj76_1a" width="100%">
<tr>
<td class="Obj76_1c" colspan="4">
<input type="text" name="calcResults" size="10" value="0"></td>
</tr>
<tr>
<td><button class="Obj76_1b" type="button" name="calclear"
onclick="gCalculator.OnClick('c')">C</button>
</td>
<td></td>
<td></td>
<td><button class="Obj76_1b" type="button" name="calequal"
onclick="gCalculator.OnClick('=')">=</button>
</td>
</tr>
<tr>
<td><button class="Obj76_1b" type="button" name="cal7"
onclick="gCalculator.OnClick('7')" ondblclick="gCalculator.OnClick('7')">7</button></td>
<td><button class="Obj76_1b" type="button" name="cal8"
onclick="gCalculator.OnClick('8')" ondblclick="gCalculator.OnClick('8')">8</button></td>
<td><button class="Obj76_1b" type="button" name="cal9"
onclick="gCalculator.OnClick('9')" ondblclick="gCalculator.OnClick('9')">9</button></td>
<td><button class="Obj76_1b" type="button" name="caldiv"
onclick="gCalculator.OnClick('/')">/</button>
</td>
</tr>
<tr>
<td><button class="Obj76_1b" type="button" name="cal4"
onclick="gCalculator.OnClick('4')" ondblclick="gCalculator.OnClick('4')">4</button></td>
<td><button class="Obj76_1b" type="button" name="cal5"
onclick="gCalculator.OnClick('5')" ondblclick="gCalculator.OnClick('5')">5</button></td>
<td><button class="Obj76_1b" type="button" name="cal6"
onclick="gCalculator.OnClick('6')" ondblclick="gCalculator.OnClick('6')">6</button></td>
<td><button class="Obj76_1b" type="button" name="calmul"
onclick="gCalculator.OnClick('*')">*</button>
</td>
</tr>
<tr>
<td><button class="Obj76_1b" type="button" name="cal1"
onclick="gCalculator.OnClick('1')" ondblclick="gCalculator.OnClick('1')">1</button></td>
<td><button class="Obj76_1b" type="button" name="cal2"
onclick="gCalculator.OnClick('2')" ondblclick="gCalculator.OnClick('2')">2</button></td>
<td><button class="Obj76_1b" type="button" name="cal3"
onclick="gCalculator.OnClick('3')" ondblclick="gCalculator.OnClick('3')">3</button></td>
<td><button class="Obj76_1b" type="button" name="calplus"
onclick="gCalculator.OnClick('+')">+</button>
</td>
</tr>
<tr>
<td><button class="Obj76_1b" type="button" name="cal0"
onclick="gCalculator.OnClick('0')" ondblclick="gCalculator.OnClick('0')">0</button></td>
<td><button class="Obj76_1b" type="button" name="caldec"
onclick="gCalculator.OnClick('.')">.</button>
</td>
<td></td>
<td><button class="Obj76_1b" type="button" name="calminus"
onclick="gCalculator.OnClick('-')">-</button>
</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</div>
Code Datei "js_calc1.css"
.Obj76_1a { font-size: 12px; background-color: #E0E0E0; border: 1px solid #000; padding-left: 3px; }
.Obj76_1b { background-color: #fff; border: 1px solid #000; width: 40px; height: 40px; margin: 3px;
font-size: 18px; font-weight: bold; text-align: center; vertical-align: middle; }
.Obj76_1c { height: 30px; font-size: 16px; font-weight: bold; background-color: #EFEFEF; vertical-align: middle;
border-bottom: 2px solid #000; margin: 3px; text-align: center; padding-top: 2px; padding-bottom: 2px; }

Javascript-Rechner 2

Download Button
Downloads:
Code für den <HEAD> Bereich
<link rel="stylesheet" href="wsX5Obj/Obj76_2/js_calc2.css" />
<script src="wsX5Obj/Obj76_2/js_calc2.js"></script>
Code für den <BODY> Bereich
<div align="center">
<div class="Obj76_2d"><input id="calc" type="text" size="14"></div>
<table class="Obj76_2a" style="text-align:center;">
<tr>
<td><button class="Obj76_2b" type="button" onclick="insert(7)">7</button><td>
<td><button class="Obj76_2b" type="button" onclick="insert(8)">8</button><td>
<td><button class="Obj76_2b" type="button" onclick="insert(9)">9</button><td>
</tr>
<tr>
<td><button class="Obj76_2b" type="button" onclick="insert(4)">4</button><td>
<td><button class="Obj76_2b" type="button" onclick="insert(5)">5</button><td>
<td><button class="Obj76_2b" type="button" onclick="insert(6)">6</button><td>
</tr>
<tr>
<td><button class="Obj76_2b" type="button" onclick="insert(1)">1</button><td>
<td><button class="Obj76_2b" type="button" onclick="insert(2)">2</button><td>
<td><button class="Obj76_2b" type="button" onclick="insert(3)">3</button><td>
</tr>
<tr>
<td><button class="Obj76_2b" type="button" onclick="insert(0)">0</button><td>
<td><button class="Obj76_2b" type="button" onclick="insert('.')">,</button><td>
<td><button class="Obj76_2b" type="button" onclick="insert('+')">+</button><td>
</tr>
<tr>
<td><button class="Obj76_2b" type="button" onclick="insert('*')">x</button><td>
<td><button class="Obj76_2b" type="button" onclick="insert('/')">:</button><td>
<td><button class="Obj76_2b" type="button" onclick="insert('-')">-</button><td>
</tr>
</table>
<div style="text-align:center;">
<td><button class="Obj76_2c" type="button" onclick="calc()">=</button><td>
<td><button class="Obj76_2c" type="reset" onclick="document.getElementById('calc').value = '';">DEL</button>
<td>
</div>
</div>
Code Datei "js_calc2.css"
.Obj76_2a { background-color: #666; border: 1px solid #000; width: 165px; padding: 10px; }
.Obj76_2b { font-size: 18px; background-color: #fff; border: 1px solid #000; width: 55px; height: 35px;
margin: 2px; }
.Obj76_2c { font-size: 18px; background-color: #666; border: 1px solid #000; color: #FFF; width: 98px;
height: 30px; margin: 2px; }
.Obj76_2d { font-size: 18px; background-color: #666; border: 1px solid #000; width: 195px; height: 30px;
text-align: center; vertical-align: middle; padding: 3px; }

Javascript-Rechner 3







Download Button
Downloads:
Code für den <HEAD> Bereich
<link rel="stylesheet" href="wsX5Obj/Obj76_3/js_calc3.css" />
<script src="wsX5Obj/Obj76_3/js_calc3.js"></script>
Code für den <BODY> Bereich
<div align="center">
<form name="tr_4">
<table width="220">
<tr>
<td class="Obj76_3a">
<input class="Obj76_3f" align="center" type="text" name="Eingabe" id="ausgabe" readonly><br>
<button class="Obj76_3d" type="reset" name="Ruecksatz">AC</button>
<button class="Obj76_3d" type="button" onclick="Rechne(document.tr_4.Eingabe.value)">=</button><br>
<button class="Obj76_3c" type="button" onclick="add(7)">7</button>
<button class="Obj76_3c" type="button" onclick="add(8)">8</button>
<button class="Obj76_3c" type="button" onclick="add(9)">9</button>
<button class="Obj76_3c" type="button" onclick="add('-')">-</button><br>
<button class="Obj76_3c" type="button" onclick="add(4)">4</button>
<button class="Obj76_3c" type="button" onclick="add(5)">5</button>
<button class="Obj76_3c" type="button" onclick="add(6)">6</button>
<button class="Obj76_3c" type="button" onclick="add('/')">/</button><br>
<button class="Obj76_3c" type="button" onclick="add(1)">1</button>
<button class="Obj76_3c" type="button" onclick="add(2)">2</button>
<button class="Obj76_3c" type="button" onclick="add(3)">3</button>
<button class="Obj76_3c" type="button" onclick="add('*')">*</button><br>
<button class="Obj76_3d" type="button" onclick="add(0)">0</button>
<button class="Obj76_3d" type="button" onclick="add('.')">,</button>
<button class="Obj76_3c" type="button" onclick="add('+')">+</button><br>
<div align="right">
<a href="javascript:open_functions()" id="a_w">
<button class="Btn_text" type="button">Mehr Funktionen...</button>
</a>
</div>
</td>
</tr>
<tr>
<td class="Obj76_3b">
<div id="w_div" style="display:none;">
<button class="Obj76_3d" type="button" onclick="cosi(document.tr_4.Eingabe.value)">COS</button>
<button class="Obj76_3d" type="button" onclick="sin()">SIN</button><br>
<button class="Obj76_3d" type="button" onclick="add(Math.PI)">PI</button>
<button class="Obj76_3d" type="button" onclick="tan1()">TAN</button>
<button class="Obj76_3c" type="button" onclick="sqr()">x ²</button><br>
<button class="Obj76_3d" type="button" onclick="log1()">LOG</button>
<button class="Obj76_3d" type="button" onclick="add(Math.random()*100)">RAND</button>
<button class="Obj76_3c" type="button" onclick="squaret()">√</button><br>
<button class="Obj76_3c" type="button" onclick="add('(')">(</button>
<button class="Obj76_3c" type="button" onclick="add(')')">)</button>
<button class="Obj76_3c" type="button"
onclick="document.tr_4.Eingabe.value='('+document.tr_4.Eingabe.value+')'">(  )</button><br>
<div align="right">
<a href="javascript:close_functions()">
<button class="Obj76_3e" type="button">Funktionen schließen</button>
</a>
</div>
</div>
</td>
</tr>
</table>
</form>
</div>
Code Datei "js_calc3.css"
.Obj76_3a { background-color: #E0E0E0; border-top: 1px solid #000; border-left: 1px solid #000; border-right:
1px solid #000; padding-top: 10px; padding-left: 10px; padding-right: 10px; font-size: 1.8em; }
.Obj76_3b { background-color: #E0E0E0; border-left: 1px solid #000; border-bottom: 1px solid #000; border-right:
1px solid #000; padding-left: 10px; padding-right: 10px; padding-bottom: 10px; font-size: 1.8em; }
.Obj76_3c { width: 43px; height: 25px; background-color: #666; font-family: arial; color: #FFF;
border-left-color: #666; border-right-color: #333; border-top-color: #666; border-bottom-color: #333; }
.Obj76_3d { width: 68px; height: 25px; background-color: #666; font-family: arial; color: #FFF;
border-left-color: #666; border-right-color: #333; border-top-color: #666; border-bottom-color: #333; }
.Obj76_3e { background-color: #FFF; font-family: arial; color: #000; }
.Obj76_3f { font-family: arial; width: 200px; height: 28px; background-color: #FFF; vertical-align: middle;
text-align: left; }
Feedbacks zu ""
2 Kommentare
Durchschnittliche Bewertung: 125.0/5
Admin-Antwort
2018-11-13 08:40:48
Ich bedanke mich auch recht herzlich.
2018-11-13 08:39:54
Sehr gut erklärt und schöne beispiele(inhaltlich und auch das Layout) Vielen Dank
Vielen Dank für Dein Feedback.
Logo Host Europe
Button Spenden

© 2009 - 2020





Besucher Statistik
» 4 Online
» 165 Heute
» 2 Gestern
» 618 Woche
» 9384 Monat
» 42663 Jahr
» 513331 Gesamt
Record: 1679 (15.02.2020)
Gesamt Downloads:
Hosting by
Zurück zum Seiteninhalt