Taschenrechner - Website X5 Hilfe - Die Helpsite

Logo Schriftzug
Logo WSX5
Newsletter anmelden
Scan QR or Download Android App
Direkt zum Seiteninhalt

Taschenrechner

Scripte > Attachment

Taschenrechner für die Homepage

Taschenrechner sind in der heutigen Zeit nicht mehr weg zu denken. Sie beherrschen allerlei Rechenoperationen.
Man kennt diese als Hant- und Tischgerät, im Handy und auch für die Webseite.
Eine Auswahl habe ich hier eingestellt, die alle über die CSS-Eigenschaften an die Homepage angepasst werden können. Die Rechenoperationen erfolgen über Javascript.
In der ZIP-Datei befinden sich alle drei Rechner. ZIP-Datei 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.
Download Button
x runter geladen!

Javascript-Rechner 1:

Javascript-Rechner 2:

Javascript-Rechner 3:







Code Javascript-Rechner 1:

Code für den <HEAD> Bereich
<style type="text/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; }
</style>
Code für den <BODY> Bereich
<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="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 Javascript-Rechner 2:

Code für den <HEAD> Bereich
<style type="text/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; }
</style>
Code für den <BODY> Bereich
<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="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 Javascript-Rechner 3:

Code für den <HEAD> Bereich
<style type="text/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; }
</style>
Code für den <BODY> Bereich
<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="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>
</td>
</tr>
</table>
</form>
</div>
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.
HTML5
Button Spenden

© 2009 - 2019





Besucher Statistik
» 1 Online
» 133 Heute
» 182 Gestern
» 828 Woche
» 3148 Monat
» 126518 Jahr
» 454274 Gesamt
Record: 2382 (29.03.2019)
Gesamt Downloads:
Zurück zum Seiteninhalt