Taschenrechner - Website X5 Helpsite

Logo Schriftzug
Logo WSX5
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
x runter geladen
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
x runter geladen
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
x runter geladen
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; }

» nach oben «
Logo Host Europe
Button Spenden
🏠 © 2009 - 2024
Hosting by
Zurück zum Seiteninhalt