软件学堂

网游分类软件分类

实用计算器JS代码怎么写

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代码的准确性,请点击:实用计算器 进行本实例源码下载 

上一篇:JS代码实现实时计算折扣
下一篇:JS代码实现前面补0的方法

相关文章