Source Code of: goodcalculator.htm
Date Last Modified: May 02, 2009 - 01:59:22 AM
Size: 1 KB  |  88 lines  |  1,930 characters
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Troublesome Calculator</title>
<script type="text/javascript">
<!--

// horribly inefficient, but this is just a demo...
window.onload = function() {
    document.getElementById('calc').onclick = function() {
        document.getElementById('result').innerHTML = 
            parseFloat(document.getElementById('addend1').value) 
            +
            parseFloat(document.getElementById('addend2').value);
        
        if (document.getElementById('changealert').checked) {
            setTimeout(function() {
                alert('The result is '+ document.getElementById('result').innerHTML);
                faderesult();
            }, 100);
        }
        else {
            faderesult();
        }
    };
};



//Colors to use when fading the result area
var Color= new Array();
Color[8] = "ffffdd";
Color[7] = "ffffcc";
Color[6] = "ffffbb";
Color[5] = "ffffaa";
Color[4] = "ffff99";
Color[3] = "ffff66";
Color[2] = "ffff66";
Color[1] = "ffff66";

function faderesult()
{
    if (document.getElementById('result')) {
        
        for(iCounter=1;iCounter < 9; iCounter++)
        {
            setTimeout("setbg('#" + Color[iCounter] + "')", iCounter * 350);
        }
        
        setTimeout("setbg('transparent')", 9 * 350);
    }
}

function setbg(col)
{
    oResult = document.getElementById('result');
    oResult.style.backgroundColor = col;
}


// -->
</script>
</head>
<body>

<form>

<p style="padding: .5em; margin-bottom: 2em; border: 1px dotted #f60; width: 350px;">
Please note: this page updates after loading. <br />
<input type="checkbox" name="changealert" id="changealert" /> Alert me of page updates
</p>


<p>
<input type="text" name="addend1" id="addend1" value="1" />
+
<input type="text" name="addend2" id="addend2" value="2" />
=
<span id="result" style="padding: 0 50px; text-align: center;">3</span>
<input type="button" name="calc" id="calc" style="margin-left: 30px;" value="Calculate" />
</p>

</form>


</body>
</html>

A Derivative Work of: PHP Source Code Utility - Version 1.0.0 Copyright © 0php.com 2002.