Taschenrechner fürs Webfront

Hi zusammen,

da ist mir per Zufall gestern was über den Weg gelaufen das ich Euch einfach nicht vorenthalten möchte :smiley:
Sinnvoll oder nicht - überlasse ich Euch! Ich fands lustig und habe es heute sogar schon nutzen können.

Es ist ein ganz einfacher kleiner Taschenrechner via JS mit etwas CSS.

So sieht es dann im Webfront aus …

und hier das kleine Script dazu …


<?
################################################################################
# Scriptbezeichnung: Other.Calculator.ips.php
# Version: 1.0.20180726
# Author:  Heiko Wilknitz (@Pitti)
#          gefunden auf free-codes.org (Best HTML Codes)
#
# ------------------------------- Installation ---------------------------------
#
# Dieses Skript richtet automatisch alle nötigen Objekte bei manueller
# Ausführung auf der Console ein.
#
################################################################################

if ($_IPS['SENDER'] == "Execute") {
	// INSTALL & INITIALIZE 
	Install();
}

# -------------------------------- FUNKTIONEN ----------------------------------

// Legt alle notwendigen Variablen an!
function Install()
{
	// Rechner
	$vid = CreateVariableByName($_IPS['SELF'], "Rechner2", 3);
	IPS_SetVariableCustomProfile($vid, '~HTMLBox');
	// HTML schreiben
	CreateCalculator($vid);
}

// Erzeugt eine Variable unterhalb {id} mit dem Namen {name} vom Typ [type}
// Existiert die Variable schon wird diese zurückgeliefert.
// Types: 0 = Boolean, 1 = Integer, 2 = Float, 3 = String
function CreateVariableByName($id, $name, $type) 
{ 
	$vid = @IPS_GetVariableIDByName($name, $id); 
	if($vid===false) { 
		$vid = IPS_CreateVariable($type); 
		IPS_SetParent($vid, $id); 
		IPS_SetName($vid, $name); 
	}
	return $vid; 
}

// HTML für JS Rechner in HTMLBox schreiben
// Der einfachheit halber per Heredoc Syntax 
function CreateCalculator($vid)
{
$html = <<< EOT
<style>
.res {display:inline-block;height:84px;width:500px;text-align: right;vertical-align:bottom; border:1px solid rgba(255, 255, 255, 0.1);margin:2px; font-size:72px;}
.btn {display:inline-block;height:90px;width:108px;text-align: center;border:1px solid rgba(255, 255, 255, 0.1);margin:2px; font-size:72px;}
.dig {padding: 5px; color: rgb(255, 255, 255); background-color: #0d1724; background-image: linear-gradient(top,rgba(255,255,255,0.18) 0,rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.3) 100%); background-image: -o-linear-gradient(top,rgba(255,255,255,0.18) 0,rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.3) 100%); background-image: -moz-linear-gradient(top,rgba(255,255,255,0.18) 0,rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.3) 100%); background-image: -webkit-linear-gradient(top,rgba(255,255,255,0.18) 0,rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.3) 100%); background-image: -ms-linear-gradient(top,rgba(255,255,255,0.18) 0,rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.3) 100%); }
.eql {padding: 5px; color: rgb(255, 255, 255); background-color: orange; background-image: linear-gradient(top,rgba(255,255,255,0.18) 0,rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.3) 100%); background-image: -o-linear-gradient(top,rgba(255,255,255,0.18) 0,rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.3) 100%); background-image: -moz-linear-gradient(top,rgba(255,255,255,0.18) 0,rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.3) 100%); background-image: -webkit-linear-gradient(top,rgba(255,255,255,0.18) 0,rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.3) 100%); background-image: -ms-linear-gradient(top,rgba(255,255,255,0.18) 0,rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.3) 100%); }
.ops {padding: 5px; color: rgb(255, 255, 255); background-color: grey; background-image: linear-gradient(top,rgba(255,255,255,0.18) 0,rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.3) 100%); background-image: -o-linear-gradient(top,rgba(255,255,255,0.18) 0,rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.3) 100%); background-image: -moz-linear-gradient(top,rgba(255,255,255,0.18) 0,rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.3) 100%); background-image: -webkit-linear-gradient(top,rgba(255,255,255,0.18) 0,rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.3) 100%); background-image: -ms-linear-gradient(top,rgba(255,255,255,0.18) 0,rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.3) 100%); }
</style>
<script>
var Accumulate = 0;
var FlagNewNum = false;
var PendingOp  = "";

function Number (Num) {
	if (FlagNewNum) {
		document.getElementById('outResult').innerHTML  = Num;
		FlagNewNum = false;
	}
	else {
		if (document.getElementById('outResult').innerHTML == "0")
			document.getElementById('outResult').innerHTML = Num;
		else
			document.getElementById('outResult').innerHTML += Num;
	}
}

function Operation (Op) {
	var Result = document.getElementById('outResult').innerHTML;
	if (FlagNewNum && PendingOp != "=");
	else {
		FlagNewNum = true;
		if ( '+' == PendingOp )
			Accumulate += parseFloat(Result);
		else if ( '-' == PendingOp )
			Accumulate -= parseFloat(Result);
		else if ( '/' == PendingOp )
			Accumulate /= parseFloat(Result);
		else if ( '*' == PendingOp )
			Accumulate *= parseFloat(Result);
		else
			Accumulate = parseFloat(Result);
			document.getElementById('outResult').innerHTML = Accumulate;
			PendingOp = Op;
	}
}

function Decimal () {
	var Result = document.getElementById('outResult').innerHTML;
	if (FlagNewNum) {
		Result = "0.";
		FlagNewNum = false;
	}
	else {
		if (Result.indexOf(".") == -1)
			Result += ".";
	}
	document.getElementById('outResult').innerHTML = Result;
}

function ClearEntry () {
	document.getElementById('outResult').innerHTML = "0";
	FlagNewNum = true;
}

function Clear () {
	Accumulate = 0;
	PendingOp = "";
	ClearEntry();
}

function Neg () {
	var Result = document.getElementById('outResult').innerHTML;
	Result = parseFloat(Result) * -1;
	document.getElementById('outResult').innerHTML = Result;
}

function Percent () {
	var Result = document.getElementById('outResult').innerHTML;
	Result =  (parseFloat(Result) / 100) * parseFloat(Accumulate);
	document.getElementById('outResult').innerHTML = Result;
}
</script>

<center>
	<table>
		<tr>
			<td colspan=4>
				<div id="outResult" class="res dig" onclick="Clear()">0</div>
			</td>
		</tr>
		<tr>
			<td><div id="btnEntry" class="ops btn" onclick="ClearEntry()">CE</div></td>
			<td><div id="btnClear" class="ops btn" onclick="Clear()">C</div></td>
			<td><div id="btnPercent" class="ops btn" onclick="Percent()">%</div></td>
			<td><div id="btnDivide" class="ops btn" onclick="Operation('/')">÷</div><td>
		</tr>
		<tr>
			<td><div id="btnSeven" class="dig btn" onclick="Number(7)">7</div></td>
			<td><div id="btnEight" class="dig btn" onclick="Number(8)">8</div></td>
			<td><div id="btnNine" class="dig btn" onclick="Number(9)">9</div></td>
			<td><div id="btnMultiply" class="ops btn" onclick="Operation('*')">×</div><td>
		</tr>
		<tr>
			<td><div id="btnFour"  class="dig btn" onclick="Number(4)">4</div></td>
			<td><div id="btnFive"  class="dig btn" onclick="Number(5)">5</div></td>
			<td><div id="btnSix"   class="dig btn" onclick="Number(6)">6</div></td>
			<td><div id="btnMinus" class="ops btn" onclick="Operation('-')">-</div></td>
		</tr>
		<tr>
			<td><div id="btnOne"  class="dig btn" onclick="Number(1)">1</div></td>
			<td><div id="btnTwo"  class="dig btn" onclick="Number(2)">2</div></td>
			<td><div id="btnThree" class="dig btn" onclick="Number(3)">3</div></td>
			<td><div id="btnPlus" class="ops btn" onclick="Operation('+')">+</div></td>
		</tr>
		<tr>
			<td><div id="btnNeg"  class="ops btn" onclick="Neg()">±</div></td>
			<td><div id="btnZero"  class="dig btn" onclick="Number(0)">0</div></td>
			<td><div id="btnDecimal" class="ops btn" onclick="Decimal()">.</div></td>
			<td><div id="btnResult" class="eql btn" onclick="Operation('=')">=</div></td>
		</tr>
	</table>
</center>
EOT;
	SetValue( $vid, $html);
}
?>

Viel Spaß
Pitti