Taschenrechner - Website X5 Hilfe - Die Helpsite

Direkt zum Seiteninhalt

Hauptmenü:

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.


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 ""

es gibt insgesamt 1 Kommentar(e)


  1. Tony Montana http://jetonhamiti.bplaced.net schreibt am 09.10.2017, 08.52 Uhr

    Sehr gut erklärt und schöne beispiele(inhaltlich und auch das Layout) Vielen Dank
    Admin-Antwort: Ich bedanke mich auch recht herzlich.


Name*
Vorname
Kommentar*
Email *
Homepage
Telefon
Sicherheitscode *
 
Logo HTML5
Button Spenden

© 2009 - 2018




  Besucher Statistik
 » 13 Online
 » 175 Heute
 » 175 Woche
 » 3930 Monat
 » 29754 Jahr
 » 276332 Gesamt
Rekord: 1420 (10.04.2014)
Zurück zum Seiteninhalt | Zurück zum Hauptmenü