Forum - Das neue Template Xobor (v6) » Taschenrechner im HTML-Format!

Um alle Funktionen nutzen zu k�nnen, aktivieren Sie bitte JavaScript in ihrem Browser!

Der Treffpunkt f�r Hilfe, Tricks & Tipps � XOBOR-Foren und Homepages � Das neue Template Xobor (v6) � Taschenrechner im HTML-Format!

Themen-Einstellungen

Thema drucken

Bereich wechseln

Start Willkommen! Ank�ndigungen & Termine, wichtige News! Stellen Sie Ihr eigene Webseite vor! Betriebssystem MS Windows Betriebssystem MS Windows 10, 8.1, 8 und 7 - Tricks & Tipps MS Windows 10, 8.1, 8 und 7 - Fragen & Antworten �rger mit Ihrem PC? �rger mit dem PC - Vorbeugung und Hilfe �rger mit dem PC - Fragen & Antworten Fragen zu DSL, VDSL, LTE und anderen Netzempfangsarten XOBOR-Foren und Homepages Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten Das neue Template Xobor (v6) Energieerzeugung im neuen Zeitalter - Revolution�r! Videos und Webseiten zur Freien Energie Wasserstoff - Energietr�ger der Zukunft. Die besten Links Empfehlenswerte und interessante Links! Link - Suche Verschiedenes Faszinationen & Unglaubliches! Tricks & Tipps f�r Smartphones und iPhones Lob, Kritik & Verbesserungsvorschl�ge Spiel & Spa�, Witz & gute Laune! Spiritualit�t, Seele, New Age, Yoga, Gesundheit Alles, was noch so �brig bleibt Bannertausch Wie funktioniert der Bannertausch? Bannerrotation und Bannerwechsel

#1 | Taschenrechner im HTML-Format! datum

23.04.2009 00:05 (zuletzt bearbeitet: 16.10.2022 21:36)

Wolfgang

Administrator

Informationen anzeigen

Beitr�ge:	3186
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag � Forum Spende
Likes	1097

Taschenrechner im HTML-Format - Teil 1
Aktualisiert 16.10.22

Je nach dem, um welchen Themenbereich es in der Homepage oder in dem Forum geht, kann es von Nutzen sein, einen Taschenrechner zur Verfügung zu stellen.
Der hier vorgestellte Taschenrechner ist frei formatierbar und wird in den meisten Browsern gleich dargestellt.
Die CSS des Taschenrechners ist so gewählt, dass die Foren-CSS das Aussehen nicht beeinträchtigt!
Der Taschenrechner kann auch unter "" angelegt werden und über die Navigation aufgerufen werden!

Eigene Seiten unter "Admin > Layout > Eigene Seiten > Seite bearbeiten" aufrufen!
Link "HTML Quelltext direkt bearbeiten?" anklicken und danach den Button "Editor ausschalten"!
Namen vergeben, Skript eintragen und speichern!
"Zurück zur Seiten-Übersicht" anklicken!
Taschenrechner heraussuchen, Taschenrechner aufrufen oder bearbeiten oder unter "Seite der Navigation hinzufügen" ein Link in der Navigation anlegen!
Beim Erstellen eines Navigationslinks, empfiehlt es sich die Option "Im neuen Fenster öffnen?" auszuwählen!
Fertig!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
 
<style>
.display_1 {max-width:80%;text-align:right; font-family:System,sans-serif; font-size:30px; font-weight:bold; border-radius:9px; cursor:pointer; background-color:#ffffff; color:#111111 !important; margin:7px; border:1px solid #111111; float:right; box-shadow: none;}
.display_1:focus {background-color:#eeeeee !important;}
.button_1 { max-width:80px; text-align:center; font-family:System,sans-serif; font-size: 20px; font-weight:bold; border-radius:4px;cursor:pointer; background-color:#efefef;color:#000000 !important;padding:5px;border:1px solid #111111;box-shadow: none;letter-spacing: 0;}
.tab_1{ width:auto !important; border:6px solid #aaaaaa; margin-right:10px; }
.tab_1 td{padding:4px;}
</style>
 
<form name="Calc">
<table class="tab_1" border="5" cellpadding="10" cellspacing="0">
<tr>
<td bgcolor="#777777">
<center><input type="text" name="input_1" class="display_1"></center></td>
</tr>
<tr>
<td  bgcolor="#333333">
<table border="0" cellpadding="0" cellspacing="2">
<tr>
<td><input class="button_1" value="  1  " onclick="Calc.input_1.value += '1'"></td>
<td><input class="button_1" value="  2  " onclick="Calc.input_1.value += '2'"></td>
<td><input class="button_1" value="  3  " onclick="Calc.input_1.value += '3'"></td>
<td><input  style="margin-left:10px;" class="button_1" value="  +  " onclick="Calc.input_1.value += '+'"></td>
<td><input class="button_1" value="  C  " onclick="Calc.input_1.value = ''"></td>
</tr>
<tr>
<td><input class="button_1" value="  4  " onclick="Calc.input_1.value += '4'"></td>
<td><input class="button_1" value="  5  " onclick="Calc.input_1.value += '5'"></td>
<td><input class="button_1" value="  6  " onclick="Calc.input_1.value += '6'"></td>
<td><input style="margin-left:10px;" class="button_1" value="  -  " onclick="Calc.input_1.value += '-'"></td>
<td><input class="button_1" value="  (  " onclick="Calc.input_1.value += '('"></td>
</tr>
<tr>
<td><input class="button_1" value="  7  " onclick="Calc.input_1.value += '7'"></td>
<td><input class="button_1" value="  8  " onclick="Calc.input_1.value += '8'"></td>
<td><input class="button_1" value="  9  " onclick="Calc.input_1.value += '9'"></td>
<td><input style="margin-left:10px;" class="button_1" value="  *  " onclick="Calc.input_1.value += '*'"></td>
<td><input class="button_1" value="  )  " onclick="Calc.input_1.value += ')'"></td>
</tr>
<tr>
<td><input class="button_1" value="  0  " onclick="Calc.input_1.value = '0'"></td>
<td><input class="button_1" value="  00  " onclick="Calc.input_1.value += '00'"></td>
<td><input class="button_1" value="  .  " onclick="Calc.input_1.value += '.'"></td>
<td><input style="margin-left:10px;" class="button_1" value="  /  " onclick="Calc.input_1.value += '/'"></td>
<td><input class="button_1" value="  =  " onclick="Calc.input_1.value = eval(Calc.input_1.value)"></td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</center>
 

Schlie�en

Der Taschenrechner in Funktion: Taschenrechner 1

Bis dann und viel Spass
Wolfgang

Antworten

#2 | Taschenrechner mit neuen Funktionen - Teil 2 datum

29.04.2012 02:24 (zuletzt bearbeitet: 16.10.2022 21:43)

Wolfgang

Administrator

Informationen anzeigen

Beitr�ge:	3186
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag � Forum Spende
Likes	1097

Taschenrechner mit neuen Funktionen - Teil 2
Aktualisiert 16.10.22

Je nach dem, um welchen Themenbereich es in der Homepage oder in dem Forum geht, kann es von Nutzen sein, einen Taschenrechner zur Verfügung zu stellen. Der hier vorgestellte Taschenrechner ist frei formatierbar und wird in meisten Browser annähert gleich dargestellt. Die Sonderzeichen ×, ÷, √ und x² sind durch HTML ISO-Nummern dargestellt worden.
Der Taschenrechner kann auch unter "" angelegt werden und über die Navigation aufgerufen werden!

Eigene Seiten unter "Admin > Layout > Eigene Seiten > Seite bearbeiten" aufrufen!
Link "HTML Quelltext direkt bearbeiten?" anklicken und danach den Button "Editor ausschalten"!
Namen vergeben, Skript eintragen und speichern!
"Zurück zur Seiten-Übersicht" anklicken!
Taschenrechner heraussuchen, Taschenrechner aufrufen oder bearbeiten oder unter "Seite der Navigation hinzufügen" ein Link in der Navigation anlegen!
Beim Erstellen eines Navigationslinks, empfiehlt es sich die Option "Im neuen Fenster öffnen?" auszuwählen!
Fertig!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
 
<style>
.display_2 {max-width:80%; text-align:right; font-family:System,sans-serif; font-size:30px; font-weight:bold; border-radius:9px; cursor:pointer; background-color:#ffffff; color:#111111 !important; margin:7px; border:1px solid #111111; float:right; box-shadow: none;}
.display_2:focus {background-color:#eeeeee !important;}
.button_2 { max-width:100px; text-align:center; font-family:System,sans-serif; font-size: 20px; font-weight:bold; border-radius:4px; cursor:pointer; background-color:#efefef; color:#000000 !important; padding:5px; border:1px solid #111111; box-shadow: none;letter-spacing: 0;}
.button_2:hover {background-color:#ffffff; border:1px solid #ffffff;}
.tab_2{ width: auto !important; border:6px solid #aaaaaa;}
.tab_2 td {padding:4px;}
</style>
 
 
<form name="Rechner" action="" onsubmit="Ergebnis(); return false;">
<table border="5" cellpadding="10" cellspacing="0" class="tab_2">
<tr>
<td bgcolor="#777777">
<center><input type="text" name="Display" align="right" class="display_2"></center></td>
</tr><tr>
<td  bgcolor="#333333">
<table border="0" cellpadding="0" cellspacing="2">
<tr>
<td><input class="button_2" value="  7  " onclick="Hinzufuegen('7')"></td>
<td><input class="button_2" value="  8  " onclick="Hinzufuegen('8')"></td>
<td><input class="button_2" value="  9  " onclick="Hinzufuegen('9')"></td>
<td><input style="margin-left:10px;" title="Zwischen Zahl und Klammer muss ein Rechenzeichen stehen!" class="button_2" value="  (  " onClick="Hinzufuegen('(')"></td>
<td><input title="Zwischen Zahl und Klammer muss ein Rechenzeichen stehen!" class="button_2" value="  )  " onClick="Hinzufuegen(')')"></td>
</tr>
<tr>
<td><input class="button_2" value="  4  " onclick="Hinzufuegen('4')"></td>
<td><input class="button_2" value="  5  " onclick="Hinzufuegen('5')"></td>
<td><input class="button_2" value="  6  " onclick="Hinzufuegen('6')"></td>
<td><input style="margin-left:10px;" title="Addition" class="button_2" value="  +  " onClick="Hinzufuegen('+')"></td>
<td><input title="Subtraktion" class="button_2" value="  -  " onClick="Hinzufuegen('-')"></td>
</tr>
<tr>
<td><input class="button_2" value="  1  " onclick="Hinzufuegen('1')"></td>
<td><input class="button_2" value="  2  " onclick="Hinzufuegen('2')"></td>
<td><input class="button_2" value="  3  " onclick="Hinzufuegen('3')"></td>
<td><input style="margin-left:10px;" title="Multiplikation" class="button_2" value="  ×  " onClick="Hinzufuegen('*')"></td>
<td><input title="Division" class="button_2" value="  &#247;  " onClick="Hinzufuegen('/')"></td>
</tr>
<tr>
<td><input class="button_2" value="  0  " onClick="Hinzufuegen('0')"></td>
<td><input class="button_2" value="  00  " onClick="Hinzufuegen('00')"></td>
<td><input class="button_2" value="  000  " onClick="Hinzufuegen('000')"></td>
<td><input style="margin-left:10px;"  title="Komma" class="button_2" value="  .  " onClick="Hinzufuegen('.')"></td>
<td><input title="Ergebnis" class="button_2" value="  =  " onClick="Ergebnis()"></td>
</tr>
<tr>
<td><input title="Quadratwurzel aus X" class="button_2" value=" &#8730; " onClick="Sonderfunktion('sqrt')"></td>
<td><input title="X zum Quadrat" class="button_2" value=" x&#178; " onClick="Sonderfunktion('pow')"></td>
<td><input title="Natürlicher Logeritmus von X" class="button_2" value=" ln " onClick="Sonderfunktion('ln')"></td>
<td><input style="margin-left:10px;" title="Die Konstante Pi" class="button_2" value="  &#960; " onClick="Hinzufuegen('3.1415927')"></td>
<td><input title="Anzeige löschen" class="button_2" value="  C  " onclick="Rechner.Display.value = ''" ></td>
</tr>
</table>
</td></tr></table>
</form>
 
 
<script type="text/javascript">
$('.button_2').attr({'maxlength':'1','readonly':'readonly'});
 
function Check (Eingabe) {
  var nur_das = "0123456789[]()-+*%/.";
  for (var i = 0; i < Eingabe.length; i++)
    if (nur_das.indexOf(Eingabe.charAt(i)) < 0)
      return false;
  return true;
}
 
function Ergebnis () {
  var x = 0;
  if (Check(window.document.Rechner.Display.value))
    x = eval(window.document.Rechner.Display.value);
  window.document.Rechner.Display.value = x;
}
 
function Hinzufuegen (Zeichen) {
  window.document.Rechner.Display.value = window.document.Rechner.Display.value + Zeichen;
}
 
function Sonderfunktion (Funktion) {
  if (Check(window.document.Rechner.Display.value)) {
    if (Funktion == "sqrt") {
      var x = 0;
      x = eval(window.document.Rechner.Display.value);
      window.document.Rechner.Display.value = Math.sqrt(x);
    }
    if (Funktion == "pow") {
      var x = 0;
      x = eval(window.document.Rechner.Display.value);
      window.document.Rechner.Display.value = x * x;
    }
    if (Funktion == "ln") {
      var x = 0;
      x = eval(window.document.Rechner.Display.value);
      window.document.Rechner.Display.value = Math.log(x);
    }
  } else
    window.document.Rechner.Display.value = 0}
</script>
 

Schlie�en

Der Taschenrechner in Funktion: Taschenrechner 2

Hilfreiche Links:

Sonderzeichen fürs Forum bereitstellen

Bis dann und viel Spass
Wolfgang

Antworten

#3 | Online Taschenrechner als Widgats datum

30.04.2012 00:44 (zuletzt bearbeitet: 07.06.2019 19:28)

Online Taschenrechner als Widgats

Auf der Webseite von "Web 2.0 Rechner" werden Taschenrechner online für alle Fälle angeboten, ob wissenschaftlich oder einfach. Hier bleiben kaum noch Wünsche offen. Die Webseite verfügt außerdem über eine interaktive Formelsammlung, einer Hilfeseite und einem Mathe Forum. Zu alledem werden auch noch Widegats zu 3 verschiedenen Taschenrechnern angeboten, die in den Foren oder Homepages Platz finden und eingebaut werden können. Die Taschenrechner sind so angelegt, dass sie die komplette Rechnung in einem darüberstehenden Feld anzeigen. Außerdem werden alle Rechenvorgänge gespeichert, die jederzeit abrufbar sind!

Hier kommen 3 verschiedenen Taschenrechner als Widegats:

Web 2.0 Rechner - Widget für Deine Webseite: Widget

Weitere interessante Links auf Web 2.0 Rechner.de:

Interaktive Formelsammlung: Formelsammlung

Mathe Forum: Mathe Forum

Hilfe zum Taschenrechner: Hilfe

Bis dann und viel Spaß
Wolfgang

Antworten

#4 | Taschenrechner per Grafik-Button immer verfügbar - Teil 3 datum

23.10.2020 21:52 (zuletzt bearbeitet: 16.10.2022 21:46)

Wolfgang

Administrator

Informationen anzeigen

Beitr�ge:	3186
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag � Forum Spende
Likes	1097

Taschenrechner per Grafik-Button immer verfügbar - Teil 3

Im folgenden Beitrag kann der Taschenrechner überall eingeblendet werden!
Der Taschenrechner wird über ein fixierten Grafik-Button per Mausklick ein- und ausgeblendet!
Der Button kann beliebig platziert werden!
Ist der Taschenrechner aufgerufen, wird er weiterhin, auch bei einem Seiten-Reload angezeigt!
Der Taschenrechner kann, wenn er an einer Stelle stört, frei verschoben werden!
Über ein "X" lässt sich der Taschenrechner schließen!
Die Farben werden automatisch den Templates angepasst!
Bei Klammer-Multiplikationen wird automatisch ein Multiplikatorzeichen vor oder nach der Klammer gesetzt!
Neu! Taschenrechner kann mit Tastenkombination "Alt+T" aufgerufen werden! Tastenkombination wird im Display angezeigt!
Neu! Taschenrechner kann bei Bedarf auch in der Fußleiste eingebaut werden!

Installation für alle Templates (v1-6)

Das Skript und der CSS-Eintrag wird am besten als PIugin in den "bottom_header" eingetragen!
Zum schnellen Ausprobieren kann das komplette Skript auch in die "Fußzeile" kopiert werden, nur werden die Farben nicht mehr den Templates automatisch angepasst!
Mit "top" und "right" in Zeile 6 kann die Position des Taschenrechners, in Zeile 10 die des Taschenrechner-Button bestimmt werden!
In Zeile 21 kann die Auslöse-Grafik des Taschenrechner-Buttons ausgetauscht werden!
In Zeile 10 kann mit "width" die Größe der Auslösegrafik angepasst werden!
In Zeile 141 ist Xobor eigene "jQueryUI-Script" eingetragen, das für das Verschieben des Taschenrechners zuständig ist!
Zeile 91 ersetzt type="button", damit die Template eigene Formatierungen keinen Einfluss auf das Aussehen des Taschenrechners haben!
Zeile 95 setzt automatisch bei Klammer-Multiplikationen ein Multiplikatorzeichen vor und nach der Klammer, z.B. 5x(-8) oder (-8)x5!
In [i]Zeile 83-89[/] wird die Tastenkombination bestimmt (alt+T)!
Über Zeile 71 kann der Taschenrechner über die Fußleiste aufgerufen werden, nur Business (v4)!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
 
<style>
.display_2 {width:80%;text-align:right;font-family:System,sans-serif; font-size:20px; font-weight:bold; border-radius:9px; cursor:pointer;background-color:#ffffff;color:#111111 !important;margin:6px;padding-right:5px;border:1px solid #111111;float:right;box-shadow: none;}
.display_2:focus {background-color:#eeeeee !important;}
.button_2 { width:100px; text-align:center; font-family:System,sans-serif; font-size: 20px; font-weight:bold; border-radius:4px;cursor:pointer; background-color:#efefef;color:#000000 !important;padding:5px;border:1px solid #111111;box-shadow: none;letter-spacing: 0;cursor:pointer}
.button_2:hover {background-color:#ffffff;border:1px solid #ffffff}
.tab_2 {top: 50px;right:130px;border:6px solid #eeeeee;border:6px solid {{template==144.start}}{{global_box_header_background|rgb_lightness(80)}}{{template==144.end}}{{template==1.start}}#aaaaaa{{template==1.end}}{{template==110.start}}{{global_postbg3|rgb_lightness(70)}}{{template==110.end}}{{template==111.start}}{{global_tabs_color|rgb_lightness(70)}}{{template==111.end}};width:auto;position:fixed;z-index:999999;cursor:move;display:none;}
.tab_2 td {padding:4px;}
.exit_tasch {font-size:20px;color:#ffffff;position:absolute;text-align:center;padding:10px;cursor:pointer;}
.exit_tasch:hover {color:#222222;font-weight:bold;}
.tasch_on {top:500px;right:15px;width:100px;position:fixed;cursor:pointer;z-index:999999;}
.tasch_dis {background-color: #bbbbbb;background-color: {{template==144.start}}{{global_box_header_background|rgb_lightness(90)}}{{template==144.end}}{{template==1.start}}#777777{{template==1.end}}{{template==110.start}}{{global_postbg3|rgb_lightness(95)}}{{template==110.end}}{{template==111.start}}{{global_tabs_color|rgb_lightness(85)}}{{template==111.end}};}
.tasch_back {background-color: #777777; background-color: {{template==144.start}}{{global_box_header_background|rgb_lightness(85)}}{{template==144.end}}{{template==1.start}}#333333{{template==1.end}}{{template==110.start}}{{global_postbg3|rgb_lightness(90)}}{{template==110.end}}{{template==111.start}}{{global_tabs_color|rgb_lightness(80)}}{{template==111.end}};}
 
.tasch_fuss {font-size:14px;position:absolute;left: 40px;cursor:pointer;padding-top:4px;}
.tasch_fuss img {width:20px;z-index:999999  !important;}
.tasch_fuss:hover img{width:150px;margin-top:-130px;}
.tasch_fuss:hover span{display:none;}
.display_2::placeholder {font-size:16px;opacity: 0.8 !important;}
</style>
 
<img class="tasch_on" src="https://files.homepagemodules.de/b104774/f31t318p3889n5_nHqryzRT.png">
 
<form name="Rechner" action="" onsubmit="Ergebnis();return false;">
<table border="5" cellpadding="10" cellspacing="0" class="tab_2" style="display:none;">
<tr>
<td class="tasch_dis">
<span class="exit_tasch" title="Exit">x</span><input type="text" name="Display" align="right" class="display_2" placeholder="Alt+T"></td>
</tr><tr>
<td class="tasch_back">
<table border="0" cellpadding="0" cellspacing="2">
<tr>
<td><input class="button_2" value="7" onclick="Hinzufuegen('7')"></td>
<td><input class="button_2" value="8" onclick="Hinzufuegen('8')"></td>
<td><input class="button_2" value="9" onclick="Hinzufuegen('9')">&nbsp;&nbsp;</td>
<td><input title="Zwischen Zahl und Klammer muss ein Rechenzeichen stehen!" class="button_2" value="(" onClick="Hinzufuegen('(')"></td>
<td><input title="Zwischen Zahl und Klammer muss ein Rechenzeichen stehen!" class="button_2" value=")" onClick="Hinzufuegen(')')"></td>
</tr>
<tr>
<td><input class="button_2" value="4" onclick="Hinzufuegen('4')"></td>
<td><input class="button_2" value="5" onclick="Hinzufuegen('5')"></td>
<td><input class="button_2" value="6" onclick="Hinzufuegen('6')">&nbsp;&nbsp;</td>
<td><input title="Addition" class="button_2" value="+" onClick="Hinzufuegen('+')"></td>
<td><input title="Subtraktion" class="button_2" value="-" onClick="Hinzufuegen('-')"></td>
</tr>
<tr>
<td><input class="button_2" value="1" onclick="Hinzufuegen('1')"></td>
<td><input class="button_2" value="2" onclick="Hinzufuegen('2')"></td>
<td><input class="button_2" value="3" onclick="Hinzufuegen('3')">&nbsp;&nbsp;</td>
<td><input title="Multiplikation" class="button_2" value="×" onClick="Hinzufuegen('*')"></td>
<td><input title="Division" class="button_2" value="÷" onClick="Hinzufuegen('/')"></td>
</tr>
<tr>
<td><input class="button_2" value="0" onClick="Hinzufuegen('0')"></td>
<td><input class="button_2" value="00" onClick="Hinzufuegen('00')"></td>
<td><input class="button_2" value="000" onClick="Hinzufuegen('000')">&nbsp;&nbsp;</td>
<td><input title="Komma" class="button_2" value="." onClick="Hinzufuegen('.')"></td>
<td><input title="Ergebnis" class="button_2" value="=" onClick="Ergebnis()"></td>
</tr>
<tr>
<td><input title="Quadratwurzel aus X" style="font-weight:bolder;" class="button_2" value="&#8730;" onClick="Sonderfunktion('sqrt')"></td>
<td><input title="X zum Quadrat" class="button_2" value="x²" onClick="Sonderfunktion('pow')"></td>
<td><input title="Natürlicher Logeritmus von X" class="button_2" value="ln" onClick="Sonderfunktion('ln')">&nbsp;&nbsp;</td>
<td><input title="Die Konstante Pi" class="button_2" value="&#960;" onClick="Hinzufuegen('3.1415927')"></td>
<td><input title="Anzeige löschen" class="button_2" value="C" onclick="Rechner.Display.value =''" ></td>
</tr>
</table>
</td></tr></table>
</form>
 
<script>
$(function(){$('.footer').prepend('<div onclick="$(\'.tab_2\').toggle(0,function () {localStorage.setItem(\'taschenrech\', $(\'.tab_2\').is(\':visible\'));});" class="tasch_fuss"><img src="//files.homepagemodules.de/b104774/f31t318p3889n5_nHqryzRT.png"> <span><u>T</u>aschenrechner</span></div>');});
 
var sidebarVisible = localStorage.getItem('taschenrech') == 'true'; 
$('.tab_2').toggle(sidebarVisible);
$('.tasch_on,.exit_tasch').mouseup(function(){
if (!$('.ui-draggable-dragging').length) {
$(".tab_2").toggle(0,function () {
localStorage.setItem('taschenrech', $('.tab_2').is(':visible'));
});
};
});
 
$(document).keydown(function(e) {
if (e.altKey && e.keyCode == 84) { /* alt+T */
$('.tab_2').toggle(0,function () {
localStorage.setItem('taschenrech', $('.tab_2').is(':visible'));
});
};
});
 
$('.button_2').attr({'maxlength':'1','readonly':'readonly'})
.click(function(){
var newstring = $("[name=Display]").val(function (index, tasch) {
return tasch
.replace('1(', '1*(').replace('2(', '2*(').replace('3(', '3*(').replace('4(', '4*(').replace('5(', '5*(').replace('6(', '6*(').replace('7(', '7*(').replace('8(', '8*(').replace('9(', '9*(').replace('0(', '0*(').replace(')1', ')*1').replace(')2', ')*2').replace(')3', ')*3').replace(')4', ')*4').replace(')5', ')*5').replace(')6', ')*6').replace(')7', ')*7').replace(')8', ')*8').replace(')9', ')*9');
}); 
});
$('[name=Display]').val(newstring);
  
function Check (Eingabe) {
var nur_das = "0123456789[]()-+*%/.";
for (var i = 0; i < Eingabe.length; i++)
if (nur_das.indexOf(Eingabe.charAt(i)) < 0)
return false;
return true;
}
 
function Ergebnis () {
var x = 0;
if (Check(window.document.Rechner.Display.value))
x = eval(window.document.Rechner.Display.value);
window.document.Rechner.Display.value = x;
}
 
function Hinzufuegen (Zeichen) {
window.document.Rechner.Display.value = window.document.Rechner.Display.value + Zeichen;
}
 
function Sonderfunktion (Funktion) {
if (Check(window.document.Rechner.Display.value)) {
if (Funktion == "sqrt") {
var x = 0;
x = eval(window.document.Rechner.Display.value);
window.document.Rechner.Display.value = Math.sqrt(x);
}
if (Funktion == "pow") {
var x = 0;
x = eval(window.document.Rechner.Display.value);
window.document.Rechner.Display.value = x * x;
}
if (Funktion == "ln") {
var x = 0;
x = eval(window.document.Rechner.Display.value);
window.document.Rechner.Display.value = Math.log(x);
}
} else
window.document.Rechner.Display.value = 0}
	
</script>
 
<script src="https://img.homepagemodules.de/ds/static/jquery/min/jquery-ui-1.8.12.noeffects.min.js"></script>
<script>
$('.tab_2,.tasch_on').draggable(); 
</script>
 

Schlie�en

Das Skript und der CSS-Eintrag wird am besten als PIugin in den "bottom_header" eingetragen!
Mit "top" und "right" in Zeile 6 kann die Position des Taschenrechners, in Zeile 10 die des Taschenrechner-Button bestimmt werden!
In Zeile 16 kann die Auslöse-Grafik des Taschenrechner-Buttons ausgetauscht werden!
In Zeile 10 kann mit "width" die Größe der Auslösegrafik angepasst werden!
Da im V6 die Farb-Variablen noch nicht zur Verfügung stehen, müssen in Zeile 6 "border", in Zeile 11+12 "background" angepasst werden!
In Zeile 66 ist Xobor eigene "jQueryUI-Script" eingetragen, das für das Verschieben des Taschenrechners zuständig ist!
Zeile 91 ersetzt type="button", damit die Template eigene Formatierungen keinen Einfluss auf das Aussehen des Taschenrechners haben!
Zeile 95 setzt automatisch bei Klammer-Multiplikationen ein Multiplikatorzeichen vor und nach der Klammer, z.B. 5x(-8) oder (-8)x5!
In Zeile 83-89 wird die Tastenkombination bestimmt (alt+T)!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
 
<style>
.display_2 {width:80%;text-align:right;font-family:System,sans-serif; font-size:20px; font-weight:bold; border-radius:9px; cursor:pointer;background-color:#ffffff;color:#111111 !important;margin:5px;padding-right:5px;border:1px solid #111111;float:right;box-shadow: none;}
.display_2:focus {background-color:#eeeeee !important;}
.button_2 { width:50px; text-align:center; font-family:System,sans-serif; font-size: 20px; font-weight:bold; border-radius:4px;cursor:pointer; background-color:#efefef;color:#000000 !important;padding:0px 5px;border:1px solid #111111;box-shadow: none;letter-spacing: 0;cursor:pointer}
.button_2:hover {background-color:#ffffff;border:1px solid #ffffff}
.tab_2 {top:70px;right:30px;border:6px solid #eeeeee;width:auto;position:fixed;z-index:999999;cursor:move;display:none;}
.tab_2 td {padding:4px;}
.exit_tasch {font-size:20px;color:#ffffff;position:absolute;text-align:center;padding:4px 5px;cursor:pointer;}
.exit_tasch:hover {color:#222222;font-weight:bold;}
.tasch_on {top:400px;right:15px;width:100px;position:fixed;cursor:pointer;z-index:999999;}
.tasch_dis {background-color: #3285be;}
.tasch_back {background-color: #397aa0;}
.display_2::placeholder {font-size:16px;opacity: 0.8 !important;}
</style>
 
<img class="tasch_on" src="https://files.homepagemodules.de/b104774/f31t318p3889n4_ZHbIPCsN.png">
 
<form name="Rechner" action="" onsubmit="Ergebnis();return false;">
<table border="5" cellpadding="10" cellspacing="0" class="tab_2" style="display:none;">
<tr>
<td class="tasch_dis" title="Verschieben!">
<span class="exit_tasch" title="Exit">x</span><input type="text" name="Display" align="right" class="display_2" placeholder="Alt+T"></td>
</tr><tr>
<td class="tasch_back">
<table border="0" cellpadding="0" cellspacing="2">
<tr>
<td><input class="button_2" value="7" onclick="Hinzufuegen('7')"></td>
<td><input class="button_2" value="8" onclick="Hinzufuegen('8')"></td>
<td><input class="button_2" value="9" onclick="Hinzufuegen('9')">&nbsp;&nbsp;</td>
<td><input title="Zwischen Zahl und Klammer muss ein Rechenzeichen stehen!" class="button_2" value="(" onClick="Hinzufuegen('(')"></td>
<td><input title="Zwischen Zahl und Klammer muss ein Rechenzeichen stehen!" class="button_2" value=")" onClick="Hinzufuegen(')')"></td>
</tr>
<tr>
<td><input class="button_2" value="4" onclick="Hinzufuegen('4')"></td>
<td><input class="button_2" value="5" onclick="Hinzufuegen('5')"></td>
<td><input class="button_2" value="6" onclick="Hinzufuegen('6')">&nbsp;&nbsp;</td>
<td><input title="Addition" class="button_2" value="+" onClick="Hinzufuegen('+')"></td>
<td><input title="Subtraktion" class="button_2" value="-" onClick="Hinzufuegen('-')"></td>
</tr>
<tr>
<td><input class="button_2" value="1" onclick="Hinzufuegen('1')"></td>
<td><input class="button_2" value="2" onclick="Hinzufuegen('2')"></td>
<td><input class="button_2" value="3" onclick="Hinzufuegen('3')">&nbsp;&nbsp;</td>
<td><input title="Multiplikation" class="button_2" value="×" onClick="Hinzufuegen('*')"></td>
<td><input title="Division" class="button_2" value="÷" onClick="Hinzufuegen('/')"></td>
</tr>
<tr>
<td><input class="button_2" value="0" onClick="Hinzufuegen('0')"></td>
<td><input class="button_2" value="00" onClick="Hinzufuegen('00')"></td>
<td><input class="button_2" value="000" onClick="Hinzufuegen('000')">&nbsp;&nbsp;</td>
<td><input title="Komma" class="button_2" value="." onClick="Hinzufuegen('.')"></td>
<td><input title="Ergebnis" class="button_2" value="=" onClick="Ergebnis()"></td>
</tr>
<tr>
<td><input title="Quadratwurzel aus X" style="font-weight:bolder;" class="button_2" value="&#8730;" onClick="Sonderfunktion('sqrt')"></td>
<td><input title="X zum Quadrat" class="button_2" value="x²" onClick="Sonderfunktion('pow')"></td>
<td><input title="Natürlicher Logeritmus von X" class="button_2" value="ln" onClick="Sonderfunktion('ln')">&nbsp;&nbsp;</td>
<td><input title="Die Konstante Pi" class="button_2" value="&#960;" onClick="Hinzufuegen('3.1415927')"></td>
<td><input title="Anzeige löschen" class="button_2" value="C" onclick="Rechner.Display.value =''" ></td>
</tr>
</table>
</td></tr></table>
</form>
 
<script type="text/javascript" src="//img.homepagemodules.de/ds/static/jquery/min/jquery-1.7.1.min.js"></script>
<script src="//img.homepagemodules.de/ds/static/jquery/min/jquery-ui-1.8.12.noeffects.min.js"></script>
 
<script>
{{template==177.start}}
{{footerjs.start}}
{{footerjs}}
 
var sidebarVisible = localStorage.getItem('taschenrech') == 'true'; 
$('.tab_2').toggle(sidebarVisible);
$('.tasch_on,.exit_tasch').mouseup(function(){
if (!$('.ui-draggable-dragging').length) {
$(".tab_2").toggle(0,function () {
localStorage.setItem('taschenrech', $('.tab_2').is(':visible'));
});
};
});
 
$(document).keydown(function(e) {
if (e.altKey && e.keyCode == 84) {   /* alt+T */
$('.tab_2').toggle(0,function () {
localStorage.setItem('taschenrech', $('.tab_2').is(':visible'));
});
};
});
 
$('.button_2').attr({'maxlength':'1','readonly':'readonly'})
.click(function(){
var newstring = $("[name=Display]").val(function (index, tasch) {
return tasch
.replace('1(', '1*(').replace('2(', '2*(').replace('3(', '3*(').replace('4(', '4*(').replace('5(', '5*(').replace('6(', '6*(').replace('7(', '7*(').replace('8(', '8*(').replace('9(', '9*(').replace('0(', '0*(').replace(')1', ')*1').replace(')2', ')*2').replace(')3', ')*3').replace(')4', ')*4').replace(')5', ')*5').replace(')6', ')*6').replace(')7', ')*7').replace(')8', ')*8').replace(')9', ')*9');
}); 
});
$('[name=Display]').val(newstring);
  
function Check (Eingabe) {
var nur_das = "0123456789[]()-+*%/.";
for (var i = 0; i < Eingabe.length; i++)
if (nur_das.indexOf(Eingabe.charAt(i)) < 0)
return false;
return true;
}
 
function Ergebnis () {
var x = 0;
if (Check(window.document.Rechner.Display.value))
x = eval(window.document.Rechner.Display.value);
window.document.Rechner.Display.value = x;
}
 
function Hinzufuegen (Zeichen) {
window.document.Rechner.Display.value = window.document.Rechner.Display.value + Zeichen;
}
 
function Sonderfunktion (Funktion) {
if (Check(window.document.Rechner.Display.value)) {
if (Funktion == "sqrt") {
var x = 0;
x = eval(window.document.Rechner.Display.value);
window.document.Rechner.Display.value = Math.sqrt(x);
}
if (Funktion == "pow") {
var x = 0;
x = eval(window.document.Rechner.Display.value);
window.document.Rechner.Display.value = x * x;
}
if (Funktion == "ln") {
var x = 0;
x = eval(window.document.Rechner.Display.value);
window.document.Rechner.Display.value = Math.log(x);
}
} else
window.document.Rechner.Display.value = 0};
 
{{footerjs.end}}
  
$('.tab_2,.tasch_on').draggable(); 
{{template==177.end}}
</script>
 

Schlie�en

Weitere Grafiken (Adresse erfahren durch Mausklick):

Bis dann und viel Spaß
Wolfgang

Daishi findet das Top!

Antworten

Formatierbare Tooltipps oder Quickinfos - Version 1-5 � � Plugin "Ecke 7 Links" modifizieren!

�hnliche Themen

Antworten

Letzter Beitrag

HTML im Gästebuch
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten von Anne 2 06.12.2021 21:06
Anne • Zugriffe: 247
Eigenes Kontaktformular für Gäste - HTML
Erstellt im Forum Das neue Template Xobor (v6) von Wolfgang 7 26.08.2023 04:08
Daishi • Zugriffe: 2233
Eigene HTML-Box im Xobor (v6)-Template einbauen?
Erstellt im Forum Das neue Template Xobor (v6) von Nara 19 24.10.2021 01:18
844er • Zugriffe: 3064
FAQ verbessern und interessanter gestalten - (v4, v6 + Mobil)
Erstellt im Forum Das neue Template Xobor (v6) von Wolfgang 5 09.07.2023 12:13
Daishi • Zugriffe: 2807

Smileys für Themen-Markierungen einfügen und bearbeiten! - Teil 1+2
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang

16.06.2023 18:30
von

Kipper-Spedition • Zugriffe: 2106

Suche html für
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten von Aquostic 2 08.11.2015 00:10
Aquostic • Zugriffe: 1005
HTML Generator
Erstellt im Forum Link - Suche von Emanuel 2 04.08.2018 11:09
Wolfgang • Zugriffe: 1620
Kommentare in HTML, CSS, JavaScript, VBScript, TCL und VRML
Erstellt im Forum Empfehlenswerte und interessante Links! von Wolfgang 0 15.06.2007 23:46
wolf.andres • Zugriffe: 2437
TAB-Menü / TAB-Spoiler / Boxen für Texte und Bildern
Erstellt im Forum Das neue Template Xobor (v6) von Wolfgang 20 28.10.2022 18:49
Daishi • Zugriffe: 13837

Foren Spende

Hallo !

Wir hoffen, dass Dir unser Forum gef�llt und Du Dich hier genauso wohlf�hlst wie wir.

Um Dir und den anderen Mitgliedern das Bestm�gliche bieten zu k�nnen, w�rden wir das Forum gern werbefrei gestalten, mit tollen neuen Extras erg�nzen.

Wenn Du uns dabei unterst�tzen m�chtest, kannst Du mit Hilfe einer kleinen Spende dazu beitragen.

Deine Spende hilft!

Spendenziel: 85 €

141%