You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
496 lines
15 KiB
496 lines
15 KiB
/// VARIABLEN DEFINIEREN
|
|
|
|
var input = "";
|
|
var output = "";
|
|
var clearinput = false;
|
|
var R_O_C = document.getElementById("rollOutCanvas").getContext("2d");
|
|
var R_I_C = document.getElementById("rollInCanvas").getContext("2d");
|
|
var H_P_X = document.getElementById("hidePowX").getContext("2d");
|
|
var shift = false;
|
|
|
|
|
|
|
|
/// FUNKTIONEN BESTIMMEN
|
|
|
|
// Maths
|
|
|
|
function renderInput(){
|
|
// INPUTFELD AKTUALISIEREN
|
|
document.getElementById("input").innerHTML = input;
|
|
}
|
|
|
|
function renderOutput(){
|
|
// OUTPUTFELD AKTUALISIEREN
|
|
document.getElementById("output").innerHTML = output;
|
|
}
|
|
|
|
function clearInput(){
|
|
// INPUT ENTFERNEN
|
|
if (clearinput == true){
|
|
input = "";
|
|
}
|
|
clearinput = false;
|
|
}
|
|
|
|
|
|
function number(num){
|
|
// NUMMERNFELD
|
|
document.getElementById("num" + num).addEventListener("click", function(){
|
|
clearInput();
|
|
input += num;
|
|
renderInput();
|
|
});
|
|
}
|
|
|
|
function pow(pow_x){
|
|
// POTENZEN
|
|
document.getElementById("pow" + pow_x).addEventListener("click", function(){
|
|
clearInput();
|
|
switch(pow_x) {
|
|
case 2:
|
|
input += "²";
|
|
break;
|
|
case 3:
|
|
input += "³";
|
|
break;
|
|
case 4:
|
|
input += "⁴";
|
|
document.getElementById("inputForPowX").style.animation = "hidePowDiv 500ms ease";
|
|
window.setTimeout(hidePowDiv,250);
|
|
break;
|
|
case 5:
|
|
input += "⁵";
|
|
document.getElementById("inputForPowX").style.animation = "hidePowDiv 500ms ease";
|
|
window.setTimeout(hidePowDiv,250);
|
|
break;
|
|
case 6:
|
|
input += "⁶";
|
|
document.getElementById("inputForPowX").style.animation = "hidePowDiv 500ms ease";
|
|
window.setTimeout(hidePowDiv,250);
|
|
break;
|
|
case 7:
|
|
input += "⁷";
|
|
document.getElementById("inputForPowX").style.animation = "hidePowDiv 500ms ease";
|
|
window.setTimeout(hidePowDiv,250);
|
|
break;
|
|
case 8:
|
|
input += "⁸";
|
|
document.getElementById("inputForPowX").style.animation = "hidePowDiv 500ms ease";
|
|
window.setTimeout(hidePowDiv,250);
|
|
break;
|
|
case 9:
|
|
input += "⁹";
|
|
document.getElementById("inputForPowX").style.animation = "hidePowDiv 500ms ease";
|
|
window.setTimeout(hidePowDiv,250);
|
|
break;
|
|
}
|
|
renderInput();
|
|
});
|
|
}
|
|
|
|
function trigonometry(tri_x){
|
|
// TRIGONOMETRISCHE FUNKTIONEN
|
|
document.getElementById(tri_x).addEventListener("click", function(){
|
|
clearInput();
|
|
switch(tri_x) {
|
|
case "sine":
|
|
input += "sin(";
|
|
break;
|
|
case "cosine":
|
|
input += "cos(";
|
|
break;
|
|
case "tangent":
|
|
input += "tan(";
|
|
break;
|
|
case "arcsine":
|
|
input += "sin⁻¹(";
|
|
break;
|
|
case "arccosine":
|
|
input += "cos⁻¹(";
|
|
break;
|
|
case "arctangent":
|
|
input += "tan⁻¹(";
|
|
break;
|
|
}
|
|
renderInput();
|
|
});
|
|
}
|
|
|
|
function root(sqrt_cbrt){
|
|
// WURZELN
|
|
document.getElementById(sqrt_cbrt).addEventListener("click", function(){
|
|
clearInput();
|
|
if (sqrt_cbrt == "sqrt"){
|
|
input += "√(";
|
|
}else if (sqrt_cbrt == "cbrt"){
|
|
input += "∛(";
|
|
}
|
|
renderInput();
|
|
});
|
|
}
|
|
|
|
// Graphics
|
|
|
|
function hideArcTrigonometry(){
|
|
// TRIGONOMISCHE UMKEHRUNGEN ZU BEGINN VERSTECKEN
|
|
document.getElementById("arcsine").style.display = "none";
|
|
document.getElementById("arccosine").style.display = "none";
|
|
document.getElementById("arctangent").style.display = "none";
|
|
}
|
|
|
|
|
|
function drawRollOutCanvas(){
|
|
// CANVAS NACH LINKS AUSRICHTEN
|
|
document.getElementById("rollInCanvas").style.display = "none";
|
|
document.getElementById("rollOutCanvas").style.display = "";
|
|
document.getElementById("infoList").style.display = "none";
|
|
document.getElementById("setCommas").style.display = "none";
|
|
}
|
|
|
|
function drawRollInCanvas(){
|
|
// CANVAS NACH RECHTS AUSRICHTEN
|
|
document.getElementById("rollInCanvas").style.display = "";
|
|
document.getElementById("rollOutCanvas").style.display = "none";
|
|
window.setTimeout(showList_Range,500);
|
|
}
|
|
|
|
function showList_Range(){
|
|
// ANMERKUNGEN SICHTBAR MACHEN
|
|
document.getElementById("infoList").style.display = "";
|
|
document.getElementById("setCommas").style.display = "";
|
|
}
|
|
|
|
|
|
function hidePowDiv(){
|
|
document.getElementById("inputForPowX").style.display = "none";
|
|
powxVisible = false;
|
|
}
|
|
|
|
function deleteFlashing(){
|
|
// BLINKEN STOPPEN
|
|
document.getElementById("input").style.animation = "";
|
|
document.getElementById("output").style.animation = "";
|
|
}
|
|
|
|
|
|
/// AUSFÜHREN BEIM LADEN DER SEITE
|
|
|
|
document.getElementById("comma").addEventListener("click", function(){
|
|
// KOMMA
|
|
clearInput();
|
|
input += ",";
|
|
renderInput();
|
|
});
|
|
|
|
document.getElementById("add").addEventListener("click", function(){
|
|
// ADDIEREN
|
|
clearInput();
|
|
input += "+";
|
|
renderInput();
|
|
});
|
|
|
|
document.getElementById("subtract").addEventListener("click", function(){
|
|
// SUBTRAHIEREN
|
|
clearInput();
|
|
input += "-";
|
|
renderInput();
|
|
});
|
|
|
|
document.getElementById("multiply").addEventListener("click", function(){
|
|
// MULTIPLIZIEREN
|
|
clearInput();
|
|
input += "×";
|
|
renderInput();
|
|
});
|
|
|
|
document.getElementById("divide").addEventListener("click", function(){
|
|
// DIVIDIEREN
|
|
clearInput();
|
|
input += "÷";
|
|
renderInput();
|
|
});
|
|
|
|
document.getElementById("In").addEventListener("click", function(){
|
|
// LOGARITHMUS NATURALIS
|
|
clearInput();
|
|
input += "ln(";
|
|
renderInput();
|
|
});
|
|
|
|
document.getElementById("parantheseOpen").addEventListener("click", function(){
|
|
// KLAMMER AUF
|
|
clearInput();
|
|
input += "(";
|
|
renderInput();
|
|
});
|
|
|
|
document.getElementById("parantheseClose").addEventListener("click", function(){
|
|
// KLAMMER ZU
|
|
clearInput();
|
|
input += ")";
|
|
renderInput();
|
|
});
|
|
|
|
document.getElementById("answer").addEventListener("click", function(){
|
|
// ANTWORT BENUTZEN
|
|
clearInput();
|
|
if (output != 0){
|
|
var lastAnswer = output.toString();
|
|
input = input + lastAnswer;
|
|
renderInput();
|
|
}
|
|
});
|
|
|
|
document.getElementById("powX").addEventListener("click", function(){
|
|
// HOCH VIER BIS NEUN ELEMENT
|
|
if (powxVisible == false){
|
|
document.getElementById("inputForPowX").style.display = "";
|
|
document.getElementById("inputForPowX").style.animation = "showPowDiv 500ms ease";
|
|
powxVisible = true;
|
|
}else if(powxVisible == true){
|
|
document.getElementById("inputForPowX").style.animation = "hidePowDiv 500ms ease";
|
|
window.setTimeout(hidePowDiv,250);
|
|
}
|
|
});
|
|
|
|
document.getElementById("hidePowX").addEventListener("click", function(){
|
|
// HOCH VIER BIS NEUN ELEMENT VERSTECKEN
|
|
document.getElementById("inputForPowX").style.animation = "hidePowDiv 500ms ease";
|
|
window.setTimeout(hidePowDiv,250);
|
|
});
|
|
|
|
document.getElementById("equals").addEventListener("click", function(){
|
|
// ERGEBNIS AUSRECHNEN
|
|
rawInput = input;
|
|
|
|
//Sonderzeichen zu Math-Elementen umwandeln
|
|
rawInput = rawInput.replace(/,/g,".");
|
|
rawInput = rawInput.replace(/×/g,"*");
|
|
rawInput = rawInput.replace(/÷/g,"/");
|
|
rawInput = rawInput.replace(/\(([^\(]*)\)²/g,"Math.pow($1, 2)");
|
|
rawInput = rawInput.replace(/\(([^\(]*)\)³/g,"Math.pow($1, 3)");
|
|
rawInput = rawInput.replace(/\(([^\(]*)\)⁴/g,"Math.pow($1, 4)");
|
|
rawInput = rawInput.replace(/\(([^\(]*)\)⁵/g,"Math.pow($1, 5)");
|
|
rawInput = rawInput.replace(/\(([^\(]*)\)⁶/g,"Math.pow($1, 6)");
|
|
rawInput = rawInput.replace(/\(([^\(]*)\)⁷/g,"Math.pow($1, 7)");
|
|
rawInput = rawInput.replace(/\(([^\(]*)\)⁸/g,"Math.pow($1, 8)");
|
|
rawInput = rawInput.replace(/\(([^\(]*)\)⁹/g,"Math.pow($1, 9)");
|
|
rawInput = rawInput.replace(/sin\(([^\(]*)\)/g,"Math.sin($1*(Math.PI/180))");
|
|
rawInput = rawInput.replace(/cos\(([^\(]*)\)/g,"Math.cos($1*(Math.PI/180))");
|
|
rawInput = rawInput.replace(/tan\(([^\(]*)\)/g,"Math.tan($1*(Math.PI/180))");
|
|
rawInput = rawInput.replace(/sin⁻¹\(([^\(]*)\)/g,"(Math.asin($1)*(180/Math.PI))");
|
|
rawInput = rawInput.replace(/cos⁻¹\(([^\(]*)\)/g,"(Math.acos($1)*(180/Math.PI))");
|
|
rawInput = rawInput.replace(/tan⁻¹\(([^\(]*)\)/g,"(Math.atan($1)*(180/Math.PI))");
|
|
rawInput = rawInput.replace(/ln\(([^\(]*)\)/g,"Math.log($1)");
|
|
rawInput = rawInput.replace(/√\(([^\(]*)\)/g,"Math.sqrt($1)");
|
|
rawInput = rawInput.replace(/∛\(([^\(]*)\)/g,"Math.cbrt($1)");
|
|
|
|
try{
|
|
output = eval(rawInput); // Rechnen
|
|
clearinput = true;
|
|
if (output != null){
|
|
document.getElementById("output").style.animation = "FlashingOutput 250ms steps(3,start) 1";
|
|
window.setTimeout(deleteFlashing,250);
|
|
}
|
|
}catch(e){
|
|
document.getElementById("input").style.animation = "FlashingInput 250ms steps(3,start) 1";
|
|
window.setTimeout(deleteFlashing,250);
|
|
document.getElementById("verticalP").style.animation = "hide 0.5s ease-in";
|
|
document.getElementById("rollInOut").style.animation = "rollOut 0.5s ease-out";
|
|
document.getElementById("rollInOut").style.width = "500px";
|
|
document.getElementById("rollInOut").style.paddingRight = "30px";
|
|
document.getElementById("verticalP").style.opacity = "0.0";
|
|
drawRollInCanvas();
|
|
clearinput = false;
|
|
}
|
|
output = output.toString();
|
|
var commas = document.getElementById("Commas").value;
|
|
if (output.search("\\.") != -1){
|
|
P_comma = output.search("\\.");
|
|
afterComma = output.substr(P_comma+1, output.length-1);
|
|
afterComma = afterComma.toString();
|
|
lengthAfterComma = afterComma.length;
|
|
if (lengthAfterComma > commas){
|
|
output = parseFloat(output).toFixed(commas);
|
|
}
|
|
}
|
|
renderOutput();
|
|
});
|
|
|
|
document.getElementById("clear").addEventListener("click", function(){
|
|
// INPUT UND OUTPUT ENTFERNEN
|
|
input = "";
|
|
output = 0;
|
|
renderInput();
|
|
renderOutput();
|
|
});
|
|
|
|
document.getElementById("delete").addEventListener("click", function(){
|
|
// DELETE FUNKTION
|
|
if (input.substr(input.length-7, input.length-1) == "×" || input == "×"){ //Multiplikation
|
|
input = input.replace(/×/,"");
|
|
}else if (input.substr(input.length-8, input.length-1) == "÷" || input == "÷"){ //Division
|
|
input = input.replace(/÷/,"");
|
|
}else if (input.substr(input.length-6, input.length-1) == "²" || input == "²"){ //Potenz 2
|
|
input = input.replace(/²/,"");
|
|
}else if (input.substr(input.length-6, input.length-1) == "³" || input == "³"){ //Potenz 3
|
|
input = input.replace(/³/,"");
|
|
}else if (input.substr(input.length-7, input.length-1) == "⁴" || input == "⁴"){ //Potenz 4
|
|
input = input.replace(/⁴/,"");
|
|
}else if (input.substr(input.length-7, input.length-1) == "⁵" || input == "⁵"){ //Potenz 5
|
|
input = input.replace(/⁵/,"");
|
|
}else if (input.substr(input.length-7, input.length-1) == "⁶" || input == "⁶"){ //Potenz 6
|
|
input = input.replace(/⁶/,"");
|
|
}else if (input.substr(input.length-7, input.length-1) == "⁷" || input == "⁷"){ //Potenz 7
|
|
input = input.replace(/⁷/,"");
|
|
}else if (input.substr(input.length-7, input.length-1) == "⁸" || input == "⁸"){ //Potenz 8
|
|
input = input.replace(/⁸/,"");
|
|
}else if (input.substr(input.length-7, input.length-1) == "⁹" || input == "⁹"){ //Potenz 9
|
|
input = input.replace(/⁹/,"");
|
|
}else if (input.substr(input.length-4, input.length-1) == "sin(" || input == "sin("){ //Sinus
|
|
input = input.replace(/sin\(/,"");
|
|
}else if (input.substr(input.length-4, input.length-1) == "cos(" || input == "cos("){ //Cosinus
|
|
input = input.replace(/cos\(/,"");
|
|
}else if (input.substr(input.length-4, input.length-1) == "tan(" || input == "tan("){ //Tangens
|
|
input = input.replace(/tan\(/,"");
|
|
}else if (input.substr(input.length-17, input.length-1) == "sin⁻¹(" || input == "sin⁻¹("){ //Arcsinus
|
|
input = input.replace(/sin⁻¹\(/,"");
|
|
}else if (input.substr(input.length-17, input.length-1) == "cos⁻¹(" || input == "cos⁻¹("){ //Arccosinus
|
|
input = input.replace(/cos⁻¹\(/,"");
|
|
}else if (input.substr(input.length-17, input.length-1) == "tan⁻¹(" || input == "tan⁻¹("){ //Arctangens
|
|
input = input.replace(/tan⁻¹\(/,"");
|
|
}else if (input.substr(input.length-3, input.length-1) == "ln(" || input == "ln("){ //Logarithmus
|
|
input = input.replace(/ln\(/,"");
|
|
}else if (input.substr(input.length-8, input.length-1) == "√(" || input == "√("){ //Quadratwurzel
|
|
input = input.replace(/√\(/,"");
|
|
}else if (input.substr(input.length-8, input.length-1) == "∛(" || input == "∛("){ //Kubikwurzel
|
|
input = input.replace(/∛\(/,"");
|
|
}else{
|
|
input = input.substr(0, input.length-1);
|
|
}
|
|
clearinput = false;
|
|
renderInput();
|
|
});
|
|
|
|
document.getElementById("shift").addEventListener("click", function(){
|
|
if (shift == false){
|
|
shift = true;
|
|
}else if (shift == true){
|
|
shift = false;
|
|
}
|
|
if (shift == true){
|
|
document.getElementById("arcsine").style.display = "";
|
|
document.getElementById("arccosine").style.display = "";
|
|
document.getElementById("arctangent").style.display = "";
|
|
document.getElementById("sine").style.display = "none";
|
|
document.getElementById("cosine").style.display = "none";
|
|
document.getElementById("tangent").style.display = "none";
|
|
}else if (shift == false){
|
|
hideArcTrigonometry();
|
|
document.getElementById("sine").style.display = "";
|
|
document.getElementById("cosine").style.display = "";
|
|
document.getElementById("tangent").style.display = "";
|
|
}
|
|
});
|
|
|
|
|
|
|
|
|
|
// CANVAS PFEIL NACH LINKS AUSGERICHTET PLUS AKTIONEN
|
|
R_O_C.moveTo(25,10);
|
|
R_O_C.lineTo(10,50);
|
|
R_O_C.lineTo(25,90);
|
|
R_O_C.moveTo(40,10);
|
|
R_O_C.lineTo(25,50);
|
|
R_O_C.lineTo(40,90);
|
|
R_O_C.lineWidth = 3;
|
|
R_O_C.strokeStyle = "#666";
|
|
R_O_C.stroke();
|
|
document.getElementById("rollOutCanvas").addEventListener("mouseover", function(){
|
|
R_O_C.strokeStyle = "#000";
|
|
R_O_C.stroke();
|
|
});
|
|
document.getElementById("rollOutCanvas").addEventListener("mouseout", function(){
|
|
R_O_C.strokeStyle = "#666";
|
|
R_O_C.stroke();
|
|
});
|
|
document.getElementById("rollOutCanvas").addEventListener("click", function rollOut(){
|
|
document.getElementById("verticalP").style.animation = "hide 0.5s ease-in";
|
|
document.getElementById("rollInOut").style.animation = "rollOut 0.5s ease-out";
|
|
document.getElementById("rollInOut").style.width = "500px";
|
|
document.getElementById("rollInOut").style.paddingRight = "30px";
|
|
document.getElementById("verticalP").style.opacity = "0.0";
|
|
drawRollInCanvas();
|
|
});
|
|
|
|
// CANVAS PFEIL NACH RECHTS AUSGERICHTET PLUS AKTIONEN
|
|
R_I_C.moveTo(25,10);
|
|
R_I_C.lineTo(40,50);
|
|
R_I_C.lineTo(25,90);
|
|
R_I_C.moveTo(10,10);
|
|
R_I_C.lineTo(25,50);
|
|
R_I_C.lineTo(10,90);
|
|
R_I_C.lineWidth = 3;
|
|
R_I_C.strokeStyle = "#666";
|
|
R_I_C.stroke();
|
|
document.getElementById("rollInCanvas").addEventListener("mouseover", function(){
|
|
R_I_C.strokeStyle = "#000";
|
|
R_I_C.stroke();
|
|
});
|
|
document.getElementById("rollInCanvas").addEventListener("mouseout", function(){
|
|
R_I_C.strokeStyle = "#666";
|
|
R_I_C.stroke();
|
|
});
|
|
document.getElementById("rollInCanvas").addEventListener("click", function(){
|
|
document.getElementById("verticalP").style.animation = "show 0.5s ease-in";
|
|
document.getElementById("rollInOut").style.animation = "rollIn 0.5s ease-out";
|
|
document.getElementById("rollInOut").style.width = "50px";
|
|
document.getElementById("rollInOut").style.paddingRight = "0px";
|
|
document.getElementById("verticalP").style.opacity = "1.0";
|
|
drawRollOutCanvas();
|
|
});
|
|
|
|
H_P_X.moveTo(0,5);
|
|
H_P_X.lineTo(180,5);
|
|
H_P_X.lineTo(150,10);
|
|
H_P_X.lineTo(30,10);
|
|
H_P_X.lineTo(0,5);
|
|
H_P_X.lineWidth = 5;
|
|
H_P_X.strokeStyle = "#000";
|
|
H_P_X.stroke();
|
|
|
|
|
|
|
|
/// FUNKTIONEN AURUFEN
|
|
|
|
number("0");
|
|
number("1");
|
|
number("2");
|
|
number("3");
|
|
number("4");
|
|
number("5");
|
|
number("6");
|
|
number("7");
|
|
number("8");
|
|
number("9");
|
|
pow(2);
|
|
pow(3);
|
|
pow(4);
|
|
pow(5);
|
|
pow(6);
|
|
pow(7);
|
|
pow(8);
|
|
pow(9);
|
|
trigonometry("sine");
|
|
trigonometry("cosine");
|
|
trigonometry("tangent");
|
|
trigonometry("arcsine");
|
|
trigonometry("arccosine");
|
|
trigonometry("arctangent");
|
|
root("sqrt");
|
|
root("cbrt");
|
|
renderInput();
|
|
renderOutput();
|
|
drawRollOutCanvas();
|
|
hideArcTrigonometry();
|
|
hidePowDiv(); |