Web Design Tutorial

Citeste si progreseaza

Script mini-calculator pe site


Pasul 1:In sectiunea <head> introduceti codul:
<STYLE type=”text;css”>
.calcBtn
{
font-weight : bold/
width: 32px;
height: 32px;
}
</style>

<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>

Pasul 2: in <body>

<form name=”calculator”>

<table border=”2″ cellpadding=”4″ cellspacing=”0″ bordercolor=”#000000″>
<tr>
<td>
<table border=”0″ cellpadding=”2″ cellspacing=”0″ width=”100%”>
<tr>
<td colspan=”4″>
<input type=”text” name=”calcResults” value=”0″ size=”20″ style=”text-align: right”></td>
</tr>
<tr>
<td><input class=”calcBtn” type=”button” value=” C ” name=”calclear” onclick=”gCalculator.OnClick(‘c’)”></td>
<td></td>
<td> </td>
<td><input class=”calcBtn” type=”button” value=” = ” name=”calequal” onclick=”gCalculator.OnClick(‘=’)”></td>
</tr>
<tr>
<td><input class=”calcBtn” type=”button” value=” 7 ” name=”cal7″ onclick=”gCalculator.OnClick(‘7′)” ondblclick=”gCalculator.OnClick(‘7′)”></td>
<td><input class=”calcBtn” type=”button” value=” 8 ” name=”cal8″ onclick=”gCalculator.OnClick(‘8′)” ondblclick=”gCalculator.OnClick(‘8′)”> </td>
<td><input class=”calcBtn” type=”button” value=” 9 ” name=”cal9″ onclick=”gCalculator.OnClick(‘9′)” ondblclick=”gCalculator.OnClick(‘9′)”> </td>
<td><input class=”calcBtn” type=”button” value=” / ” name=”caldiv” onclick=”gCalculator.OnClick(‘/’)”></td>
</tr>
<tr>
<td><input class=”calcBtn” type=”button” value=” 4 ” name=”cal4″ onclick=”gCalculator.OnClick(‘4′)” ondblclick=”gCalculator.OnClick(‘4′)”> </td>
<td><input class=”calcBtn” type=”button” value=” 5 ” name=”cal5″ onclick=”gCalculator.OnClick(‘5′)” ondblclick=”gCalculator.OnClick(‘5′)”> </td>
<td><input class=”calcBtn” type=”button” value=” 6 ” name=”cal6″ onclick=”gCalculator.OnClick(‘6′)” ondblclick=”gCalculator.OnClick(‘6′)”> </td>
<td><input class=”calcBtn” type=”button” value=” * ” name=”calmul” onclick=”gCalculator.OnClick(‘*’)”></td>
</tr>
<tr>
<td><input class=”calcBtn” type=”button” value=” 1 ” name=”cal1″ onclick=”gCalculator.OnClick(‘1′)” ondblclick=”gCalculator.OnClick(‘1′)”> </td>
<td><input class=”calcBtn” type=”button” value=” 2 ” name=”cal2″ onclick=”gCalculator.OnClick(‘2′)” ondblclick=”gCalculator.OnClick(‘2′)”> </td>
<td><input class=”calcBtn” type=”button” value=” 3 ” name=”cal3″ onclick=”gCalculator.OnClick(‘3′)” ondblclick=”gCalculator.OnClick(‘3′)”> </td>
<td><input class=”calcBtn” type=”button” value=” + ” name=”calplus” onclick=”gCalculator.OnClick(‘+’)”></td>
</tr>
<tr>
<td> </td>
<td><input class=”calcBtn” type=”button” value=” 0 ” name=”cal0″ onclick=”gCalculator.OnClick(‘0′)” ondblclick=”gCalculator.OnClick(‘0′)”> </td>
<td><input class=”calcBtn” type=”button” value=” . ” name=”caldec” onclick=”gCalculator.OnClick(‘.’)”></td>
<td><input class=”calcBtn” type=”button” value=” – ” name=”calminus” onclick=”gCalculator.OnClick(‘-’)”></td>
</tr>
</table>
</td>
</tr>
</table>
</form>

Sursa: http://personalweb.about.com/od/copypastejavascripts/a/404_3scripts.htm

March 11, 2008 Posted by tutorialweb | HTML, JavaScript, informatica, internet | , , , , | 1 Comment