Hi zusammen,
da ist mir per Zufall gestern was über den Weg gelaufen das ich Euch einfach nicht vorenthalten möchte
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