Taschenrechner - Website X5 Hilfe - Die Helpsite

Logo Schriftzug
Logo WSX5
Website hundertprozent CO2 neutral mit Host Europe
Newsletter anmelden
Direkt zum Seiteninhalt
Scan QR or Download Android App

Taschenrechner

Scripte > Attachment

Taschenrechner für die Homepage

Taschenrechner sind in der heutigen Zeit nicht mehr weg zu denken. Sie beherrschen allerlei Rechenoperationen.
Es gibt einige Scripte im Netz, die aber teilweise noch nicht auf Basis CSS3 fungieren.
Eine Auswahl habe ich hier eingestellt, die alle über die CSS-Eigenschaften angepasst werden können.
In der ZIP-Datei befinden sich alle vier Rechner. Diese entpacken und vom jeweiligem Rechner die Code in die entsprechenden Bereiche vom Head oder Body einfügen.


Button Download Script

Javascript-Rechner 1:

Javascript-Rechner 2:

Javascript-Rechner 3:

PHP-Rechner 4:







 

Ergebnis:


Zahl1:

Zahl2:


PLUS

MINUS

MAL

GETEILT


Code Javascript-Rechner 1:

Code für den HEAD-Bereich:

[Vor dem /HEAD|Bereich CSS]

<style type="text/css">
.calcTbl{ font-size: 12px; background-color: #E0E0E0; border: 1px solid #000; padding-left: 5px; }
.calcBtn
{ 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; }
.calcRes
{ background-color: #EFEFEF; border-bottom: 2px solid #000; margin: 3px; text-align: center;
vertical-align: middle; padding-top: 2px; padding-bottom: 2px;
}
</style>

Code für das HTML-Objekt:


<script language="JavaScript">
function Calculator_OnClick(keyStr) {
var resultsField = document.calculator.calcResults;
switch (keyStr)
{
case "0":
case "1":
case "2":
case "3":
case "4":
case "5":
case "6":
case "7":
case "8":
case "9":
case "0":
case ".":
if ((this.lastOp==this.opClear) || (this.lastOp==this.opOperator)) {
resultsField.value = keyStr; }
else {
// ignore extra decimals
if ((keyStr!=
".") || (resultsField.value.indexOf(".")<0)) {
resultsField.value += keyStr; }
}
this.lastOp = this.opNumber;
break;
case "*":
case "/":
case "+":
case "-":
if (this.lastOp==this.opNumber)
this.Calc();
this.evalStr += resultsField.value + keyStr;
this.lastOp = this.opOperator;
break;
case "=
":
this.Calc();
this.lastOp = this.opClear;
break;
case "
c":
resultsField.value = "0";
this.lastOp = this.opClear;
break;
default:
alert("'" + keyStr + "' not recognized."); }
}
function Calculator_Calc() {
var resultsField = document.calculator.calcResults;
//alert("eval:"+this.evalStr+resultsField.value);
resultsField.value = eval(this.evalStr+resultsField.value);
this.evalStr = ""; }
function Calculator() {
this.evalStr = "";
this.opNumber = 0;
this.opOperator = 1;
this.opClear = 2;
this.lastOp = this.opClear;
this.OnClick = Calculator_OnClick;
this.Calc = Calculator_Calc; }
gCalculator = new Calculator();
</script
>

<div align="center">
<form name="calculator">
<table>
<tr><td>
<table class="calcTbl" width="100%">
<tr><td class="calcRes" colspan="4">
<input type="text" name="calcResults" size="8" value="0"></td>
</tr><tr>
<td><button class="calcBtn" type="button" name="calclear" onclick="gCalculator.OnClick('c')">C</button></td>
<td></td><td></td>
<td><button class="calcBtn" type="button" name="calequal" onclick="gCalculator.OnClick('=')">=</button></td>
</tr><tr>
<td><button class="calcBtn" type="button" name="cal7" onclick="gCalculator.OnClick('7')"
ondblclick="gCalculator.OnClick('7')">7</button></td>
<td><button class="calcBtn" type="button" name="cal8" onclick="gCalculator.OnClick('8')" ondblclick="gCalculator.OnClick('8')">8</button></td>
<td><button class="calcBtn" type="button" name="cal9" onclick="gCalculator.OnClick('9')" ondblclick="gCalculator.OnClick('9')">9</button></td>
<td><button class="calcBtn" type="button" name="caldiv" onclick="gCalculator.OnClick('/')">/</button></td>
</tr><tr>
<td><button class="calcBtn" type="button" name="cal4" onclick="gCalculator.OnClick('4')" ondblclick="gCalculator.OnClick('4')">4</button></td>
<td><button class="calcBtn" type="button" name="cal5" onclick="gCalculator.OnClick('5')" ondblclick="gCalculator.OnClick('5')">5</button></td>
<td><button class="calcBtn" type="button" name="cal6" onclick="gCalculator.OnClick('6')" ondblclick="gCalculator.OnClick('6')">6</button></td>
<td><button class="calcBtn" type="button" name="calmul" onclick="gCalculator.OnClick('*')">*</button></td>
</tr><tr>
<td><button class="calcBtn" type="button" name="cal1" onclick="gCalculator.OnClick('1')" ondblclick="gCalculator.OnClick('1')">1</button></td>
<td><button class="calcBtn" type="button" name="cal2" onclick="gCalculator.OnClick('2')" ondblclick="gCalculator.OnClick('2')">2</button></td>
<td><button class="calcBtn" type="button" name="cal3" onclick="gCalculator.OnClick('3')" ondblclick="gCalculator.OnClick('3')">3</button></td>
<td><button class="calcBtn" type="button" name="calplus" onclick="gCalculator.OnClick('+')">+</button></td>
</tr><tr>
<td><button class="calcBtn" type="button" name="cal0" onclick="gCalculator.OnClick('0')" ondblclick="gCalculator.OnClick('0')">0</button></td>
<td><button class="calcBtn" type="button" name="caldec" onclick="gCalculator.OnClick('.')">.</button></td>
<td></td><td><button class="calcBtn" type="button" name="calminus" onclick="gCalculator.OnClick('-')">-</button></td>
</tr></table>
</td></tr>
</table>
</form></div>

Code Javascript-Rechner 2:

Code für den HEAD-Bereich:

[Vor dem /HEAD|Bereich CSS]

<style type="text/css">
.calTbl { background-color: #666; border: 1px solid #000; width: 165px; padding: 10px; }
.calBtn1
{ font-size:18px; background-color:#fff; border:1px solid #000; width:55px; height:35px; margin: 2px;}
.calBtn2
{ font-size: 18px; background-color: #666; border: 1px solid #000; color: #FFF; width: 98px; height: 30px; margin: 2px; }
.calRes
{ font-size: 18px; background-color: #666; border: 1px solid #000; width: 50%; height: 30px; text-align: center; vertical-align: middle; padding: 3px; }
</style>

Code für das HTML-Objekt:


<script type="text/javascript">
function insert(elem) {
document.getElementById("calc").value += elem; }
function calc() {
document.getElementById("calc").value = eval(document.getElementById("calc").value); }
</script>

<div align="center">
<div class="calRes"><input id="calc" type="text"></div>
<table class="calTbl" style="text-align:center;">
<tr>
<td><button class="calBtn1" type="button" onclick="insert(7)">7</button><td>
<td><button class="calBtn1" type="button" onclick="insert(8)">8</button><td>
<td><button class="calBtn1" type="button" onclick="insert(9)">9</button><td>
</tr><tr>
<td><button class="calBtn1" type="button" onclick="insert(4)">4</button><td>
<td><button class="calBtn1" type="button" onclick="insert(5)">5</button><td>
<td><button class="calBtn1" type="button" onclick="insert(6)">6</button><td>
</tr><tr>
<td><button class="calBtn1" type="button" onclick="insert(1)">1</button><td>
<td><button class="calBtn1" type="button" onclick="insert(2)">2</button><td>
<td><button class="calBtn1" type="button" onclick="insert(3)">3</button><td>
</tr><tr>
<td><button class="calBtn1" type="button" onclick="insert(0)">0</button><td>
<td><button class="calBtn1" type="button" onclick="insert('.')">,</button><td>
<td><button class="calBtn1" type="button" onclick="insert('+')">+</button><td>
</tr><tr>
<td><button class="calBtn1" type="button" onclick="insert('*')">x</button><td>
<td><button class="calBtn1" type="button" onclick="insert('/')">:</button><td>
<td><button class="calBtn1" type="button" onclick="insert('-')">-</button><td>
</table>
<div style="text-align:center;">
<td><button class="calBtn2" type="button" onclick="calc()">=</button><td>
<td><button class="calBtn2" type="reset" onclick="document.getElementById('calc').value = '';">DEL</button><td>
</div></div>

Code Javascript-Rechner 3:

Code für den HEAD-Bereich:

[Vor dem /HEAD|Bereich CSS]

<style type="text/css">
.calTbl1 { 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; }
.calTbl2
{ background-color: #E0E0E0; border-left: 1px solid #000; border-right: 1px solid #000; border-bottom: 1px solid #000; padding-left: 10px; padding-right: 10px; padding-bottom: 10px; font-size: 1.8em; }
.Btn_klein
{ background-color: #666666; font-family: arial; color: #FFFFFF; border-left-color: #666666; border-right-color:#333333; border-top-color:#666666; border-bottom-color:#333333; width:43px; height:25px; }
.Btn_gross
{ background-color: #666666; font-family: arial; color: #FFFFFF; border-left-color: #666666;  border-right-color:#333333; border-top-color:#666666; border-bottom-color:#333333; width:68px; height:25px; }
.Btn_text
{ background-color: #FFFFFF; font-family: arial; color: #000000; }
.input
{ font-family: arial; width: 200px; height: 28px; background-color: #FFFFFF; vertical-align: middle; text-align: left; }
</style>

Code für das HTML-Objekt:


<script type='text/javascript'>
function Rechne(Operation) {
 var Ergebnis = eval(Operation);
 document.tr_4.Eingabe.value = Ergebnis; }
function add(n) {
 var zahl = document.tr_4.Eingabe.value + n;
 document.tr_4.Eingabe.value = zahl; }
function open_functions(){
 document.getElementById("a_w").style.display=
"none";
 document.getElementById("w_div").style.display=
"block"; }
function close_functions(){
 document.getElementById("a_w").style.display=
"block";
 document.getElementById("w_div").style.display=
"none"; }
function cosi(Zahl){
 var x = Math.cos(Zahl);
 document.tr_4.Eingabe.value=x; }
function sin(){
 var zahl1 = document.tr_4.Eingabe.value;
 var x1 = Math.sin(zahl1);
 document.tr_4.Eingabe.value=x1; }
function tan1(){
 var zahl2 = document.tr_4.Eingabe.value;
 var x2 = Math.tan(zahl2);
 document.tr_4.Eingabe.value = x2; }
function log1(){
 var zahl3 = document.tr_4.Eingabe.value;
 var x3 = Math.log(zahl3);
 document.tr_4.Eingabe.value = x3; }
function squaret(){
 var zahl4 = document.tr_4.Eingabe.value;
 var x4 = Math.sqrt(zahl4);
 document.tr_4.Eingabe.value = x4; }
function sqr(){
 var zahl5 = document.tr_4.Eingabe.value;
 var x5 = zahl5*zahl5;
 document.tr_4.Eingabe.value = x5; }
</script>

<div align="center">
<form name="tr_4">
<table width="220">
<tr><td class="calTbl1">
<input class="input" align="center" type="text" name="Eingabe" id="ausgabe" readonly><br>
<button class="Btn_gross" type="reset" name="Ruecksatz">AC</button>
<button class="Btn_gross" type="button" onclick="Rechne(document.tr_4.Eingabe.value)">=</button><br>
<button class="Btn_klein" type="button" onclick="add(7)">7</button>
<button class="Btn_klein" type="button" onclick="add(8)">8</button>
<button class="Btn_klein" type="button" onclick="add(9)">9</button>
<button class="Btn_klein" type="button" onclick="add('-')">-</button><br>
<button class="Btn_klein" type="button" onclick="add(4)">4</button>
<button class="Btn_klein" type="button" onclick="add(5)">5</button>
<button class="Btn_klein" type="button" onclick="add(6)">6</button>
<button class="Btn_klein" type="button" onclick="add('/')">/</button><br>
<button class="Btn_klein" type="button" onclick="add(1)">1</button>
<button class="Btn_klein" type="button" onclick="add(2)">2</button>
<button class="Btn_klein" type="button" onclick="add(3)">3</button>
<button class="Btn_klein" type="button" onclick="add('*')">*</button><br>
<button class="Btn_gross" type="button" onclick="add(0)">0</button>
<button class="Btn_gross" type="button" onclick="add('.')">,</button>
<button class="Btn_klein" 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="calTbl2">
<div id="w_div" style="display:none;">
<button class="Btn_gross" type="button" onclick="cosi(document.tr_4.Eingabe.value)">COS</button>
<button class="Btn_gross" type="button" onclick="sin()">SIN</button><br>
<button class="Btn_gross" type="button" onclick="add(Math.PI)">PI</button>
<button class="Btn_gross" type="button" onclick="tan1()">TAN</button>
<button class="Btn_klein" type="button" onclick="sqr()">x ²</button><br>
<button class="Btn_gross" type="button" onclick="log1()">LOG</button>
<button class="Btn_gross" type="button" onclick="add(Math.random()*100)">RAND</button>
<button class="Btn_klein" type="button" onclick="squaret()"></button><br>
<button class="Btn_klein" type="button" onclick="add('(')">(</button>
<button class="Btn_klein" type="button" onclick="add(')')">)</button>
<button class="Btn_klein" 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="Btn_text" type="button">Funktionen schließen</button></a>
</div></td></tr>
</table></form>

</div>

Code PHP-Rechner 4:

Code für den HEAD-Bereich:

[Vor dem /HEAD|Bereich CSS]

<style type="text/css">
.table { width: 350px; background-color: #E0E0E0; border: 1px solid #000; }
.txt_bg
{ color: #FF0000; font-size:16px; font-weight: bold; text-indent: 20px; }
.txt_sm
{ color: #000; font-size: 12px; text-indent: 20px; }
.button
{ color: #000; font-size: 12px; font-weight: bold; font-family: tahoma; background-color: #efefef; border: 1px solid #000; padding: 7px; border-radius: 5px; }
.button:hover
{ padding-left: 15px; }
</style>

Code für das HTML-Objekt:


<div align="left">
<a name id="sprung">&nbsp;</a>
<table class="table">
<tr><td class="txt_bg" colspan="2"><br>
<?php
if ($operation == "plus") {
   $ergebnis = $zahl1 + $zahl2; }
if ($operation == "minus") {
   $ergebnis = $zahl1 - $zahl2; }
if ($operation == "mal") {
   $ergebnis = $zahl1 * $zahl2; }
if ($operation == "geteilt") {
   $ergebnis = $zahl1 / $zahl2; }
echo "<p
>Ergebnis: ",$ergebnis,"</p>";
?>

<form action="taschenrechner.php#sprung" method="get"><br>
<p class="txt_sm">Zahl1: <input type="text" name="zahl1" size=40 maxlength=40></p>
<p class="txt_sm">Zahl2: <input type="text" name="zahl2" size=40 maxlength=40></p><br>
</td></tr><tr><td>
<p class="txt_sm"><input type="radio" name="operation" value="plus" checked>PLUS</p>
<p class="txt_sm"><input type="radio" name="operation" value="minus">MINUS</p>
<p class="txt_sm"><input type="radio" name="operation" value="mal">MAL</p>
<p class="txt_sm"><input type="radio" name="operation" value="geteilt">GETEILT
</td><td align="center" rowspan="2"><button class="button" type="submit">Ausrechnen</button></p></td>
</tr><br>
<tr><td><br></td></tr>
</form></table>
</div>

Hier muss die ausführende Datei die Endung .php besitzen.

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 HTML5
Button Spenden

© 2009 - 2018





Besucher Statistik
» 1 Online
» 441 Heute
» 552 Gestern
» 1502 Woche
» 8734 Monat
» 63277 Jahr
» 309855 Gesamt
Record: 1420 (10.04.2014)
Zurück zum Seiteninhalt