2012-11-07 来源:网络
【实例名称】
实用计算器JS代码
【实例描述】
JavaScript虽然是脚本语言,但也可以设计一些常用的工具,如日历,计算器等。本例学习使用JavaScript制作计算器。
【实例代码】
<html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>标题页-学无忧(www.xue51.com)</title> <script language="JavaScript"> var results='' ; //显示结果 var previouskey=''; //代表上一个字符 var re=/(\/|\*|\+|-)/ //用来判断+-*/的正则 var re2=/(\/|\*|\+|-){2}$/; //用来判断出现2次+-*/的正则 var re3=/.+(\/|\*|\+|-).+/; //用来判断小数点+-*/的正则 var re4=/\d|\./ ; //用来判断(小数点或数值)的正则 var re5=/^[^\/\*\+].+\d$/; //用来判断(以+-*/开始)的正则 var re6=/\./; //用来判断小数点的正则 //计算结果的方法 function calculate() { //判断如何用户输入了1个值,然后单击了"=" if (event.srcElement.tagName=="TD"){ if (event.srcElement.innerText.match(re4)&&previouskey=="=") results=''; if (result.innerText.match(re3)&&event.srcElement.innerText.match(re)){ if (!results.match(re5)){ result.innerText="输入错误!"; return; } //以下是要求长度只能保持在12位以内(有小数点的情况下) results=eval(results); //转换为数值 if (results.toString().length>=12&&results.toString().match(re6)) results=results.toString().substring(0,12); result.innerText=results; } //出现2次计算符号的情形 results+=event.srcElement.innerText; if (results.match(re2)) results=results.substring(0,results.length-2)+ results.charAt(results.length-1); result.innerText=results; }} function calculateresult() { //当首字符输入错误时 if (!results.match(re5)){ result.innerText="输入错误!"; return;} results=eval(results); //转换结果为数值型 if (results.toString().length>=12&&results.toString().match(re6)) results=results.toString().substring(0,12); result.innerText=results; } function pn() { //首字符为负数的计算 if (result.innerText.charAt(0)!='-') result.innerText=results='-'+result.innerText else if (result.innerText.charAt(0)=='-') result.innerText=results=result.innerText*(-1) } </script>
需要在body中添加一个Table,用来呈现计算器的外观,代码如下所示: </head> <body> <table border="0" cellspacing="0" cellpadding="0" width="400"> <tr> <td width="100%" valign="top"><table border="2" width="200" cellspacing="0" cellpadding="0" bgcolor="#000000" style="border-color:black" onClick="previouskey=event.srcElement.innerText"> <tr> <td width="100%" bgcolor="#FFFFFF" id="result" style="font:bold 20px Verdana;color:black; text-align='right'">0</td> </tr> <tr> <td width="100%" valign="middle" align="center"><table border="0" width="100%" cellspacing="0" cellpadding="0" style="font:bold 20px Verdana;color:white"> <tr><td width="80%" align="center"><table border="1" width="100%" cellspacing="0" cellpadding="0" style="cursor:hand;font:bold 20px Verdana;color:white" onMouseover="if (event.srcElement.tagName=='TD') event.srcElement.style.color='yellow'" onMouseout="event.srcElement.style.color='white'" onselectStart="return false" onClick="calculate()" height="82"> <tr><td width="25%" align="center" height="17">7</td> <td width="25%" align="center" height="17">8</td> <td width="25%" align="center" height="17">9</td> <td width="25%" align="center" height="17">/</td> </tr><tr><td width="25%" align="center" height="19">4</td> <td width="25%" align="center" height="19">5</td> <td width="25%" align="center" height="19">6</td> <td width="25%" align="center" height="19">*</td> </tr><tr><td width="25%" align="center" height="19">1</td> <td width="25%" align="center" height="19">2</td> <td width="25%" align="center" height="19">3</td> <td width="25%" align="center" height="19">-</td> </tr><tr><td width="25%" align="center" height="19">0</td> <td width="25%" align="center" height="19" onClick="pn();previouskey=1;event.cancelBubble=true">+/-</td> <td width="25%" align="center" height="19">.</td> <td width="25%" align="center" height="19">+</td> </tr></table></td><td width="20%"><div align="left"> <table border="1" width="100%" cellspacing="0" cellpadding="0"><tr><td width="100%" style="cursor:hand;font:bold 20px Verdana; color:white;text-align:center" onClick="result.innerText=0;results=''">C</td> </tr></table></div><div align="left"><table border="1" width="100%" cellspacing="0" cellpadding="0" height="81"> <tr><td width="100%" style="cursor:hand;font:bold 32px Verdana; color:white;text-align:center" onMouseover="event.srcElement.style.color='yellow'" onMouseout="event.srcElement.style.color='white'" onClick="calculateresult()">= </body> </html>
【运行效果】
【难点剖析】
本例的重点在于对用户输入字符的判断。这里要提到的就是正则表达式,其在JavaScript中的应用非常灵活,可用来判断用户输入的数字符是否合法,也可用来截取页面的内容。本例对使用的正则表达式进行了详细的注释,要了解正则表达式的详细应用语法,可参考相关资料。
【源码下载】
为了JS代码的准确性,请点击:实用计算器 进行本实例源码下载