htmlcssjs实现简易计算器
Posted 螃蟹在剥我的壳
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了htmlcssjs实现简易计算器相关的知识，希望对你有一定的参考价值。
学习html，CSS，JS一个月后，想着能自己是否能写出一个简单的东西，故编写了简易的计算器，之前也写过一个坦克大战，坦克大战的有些基本功能没有实现，
故也没有记录下来，想来，对这行初来咋到的，还是需要留下些东西供自己日后回忆，于是写下这篇随笔；因第一次写博客，不知道怎么上传源代码，也不知道怎么在博客页面实现计算效果。
下面是完成后计算器页面：
该计算器只是实现了简易的计算功能，很多其他功能没有实现，如运算的优先级功能，在后面的学习中再慢慢改进吧！
因计算器布局比较规整，故用table表格布局，也可以用div或列表来布局；单元格里加入button标签，整体上大的table里含三列两行，在单元格里再插入表格；
下面代码是：大的table里的第一行，包括时间、计算结果、清零和退格。
以下是HTML部分
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>计算器</title> 6 <link rel="stylesheet" type="text/css" href="计算器.css"/> 7 <script src="计算器.js" type="text/javascript" charset="utf-8"></script> 8 </head> 9 <body> 10 <table border="0" cellspacing="0" cellpadding="" id=\'main\'> 11 <tr> 12 <th id=\'time\'> 13 </th> 14 <th > 15 <input type="text" name="" id="result" value="0" /> 16 </th> 17 <th> 18 <input type="button" name="" id="" value="清零" onclick="clean()"/> 19 <input type="button" name="" id="" value="退格" onclick=\'backspace()\'/> 20 </th> 21 </tr>
下面代码是：大的table里的第二行的第一个单元格（左边的计算板块），单元格内加入table表格
1 <tr> 2 <td> 3 <table id="table1"> 4 <tr> 5 <td> 6 <input type="button" name="" id="" value="sin" onclick="calc1(\'sin\')"/> 7 </td> 8 <td> 9 <input type="button" name="" id="" value="cos" onclick="calc1(\'cos\')"/> 10 </td> 11 <td> 12 <input type="button" name="" id="" value="tan" onclick="calc1(\'tan\')"/> 13 </td> 14 </tr> 15 <tr> 16 <td> 17 <input type="button" name="" id="" value="asin" onclick="calc1(\'asin\')"/> 18 </td> 19 <td> 20 <input type="button" name="" id="" value="acos" onclick="calc1(\'acos\')"/> 21 </td> 22 <td> 23 <input type="button" name="" id="" value="atan" onclick="calc1(\'atan\')"/> 24 </td> 25 </tr> 26 <tr> 27 <td> 28 <input type="button" name="" id="" value="PI" onclick="calc1(\'PI\')"/> 29 </td> 30 <td> 31 <input type="button" name="" id="" value="1/X" onclick="calc1(\'1/x\')"/> 32 </td> 33 <td> 34 <input type="button" name="" id="" value="exp" onclick="calc1(\'exp\')"/> 35 </td> 36 </tr> 37 <tr> 38 <td> 39 <input type="button" name="" id="" value="Inx" onclick="calc1(\'Inx\')"/> 40 </td> 41 <td> 42 <input type="button" name="" id="" value="lgx" onclick="calc1(\'lgx\')"/> 43 </td> 44 <td> 45 <input type="button" name="" id="" value="n!" onclick="calc1(\'n!\')"/> 46 </td> 47 </tr> 48 </table> 49 </td>
下面代码是：大的table里的第二行的第二个单元格（数字板块），单元格内加入table表格
1 <td> 2 <table id="table2"> 3 <tr> 4 <td> 5 <input type="button" name="" id="" value="7" onclick="num(7)"/> 6 </td> 7 <td> 8 <input type="button" name="" id="" value="8" onclick="num(8)"/> 9 </td> 10 <td> 11 <input type="button" name="" id="" value="9" onclick="num(9)"/> 12 </td> 13 </tr> 14 <tr> 15 <td> 16 <input type="button" name="" id="" value="4" onclick="num(4)"/> 17 </td> 18 <td> 19 <input type="button" name="" id="" value="5" onclick="num(5)"/> 20 </td> 21 <td> 22 <input type="button" name="" id="" value="6" onclick="num(6)"/> 23 </td> 24 </tr> 25 <tr> 26 <td> 27 <input type="button" name="" id="" value="1" onclick="num(1)"/> 28 </td> 29 <td> 30 <input type="button" name="" id="" value="2" onclick="num(2)"/> 31 </td> 32 <td> 33 <input type="button" name="" id="" value="3" onclick="num(3)"/> 34 </td> 35 </tr> 36 <tr> 37 <td> 38 <input type="button" name="" id="" value="0" onclick="num(0)"/> 39 </td> 40 <td> 41 <input type="button" name="" id="" value="." onclick="dian()"/> 42 </td> 43 <td> 44 <input type="button" name="" id="" value="=" onclick="calc(\'=\')"/> 45 </td> 46 </tr> 47 </table> 48 </td>
下面代码是：大的table里的第二行的第三个单元格（右边板块），单元格内加入table表格
1 <td> 2 <table id="table3"> 3 <tr> 4 <td> 5 <input type="button" name="" id="" value="+" onclick="calc(\'+\')"/> 6 </td> 7 <td> 8 <input type="button" name="" id="" value="取整" onclick="calc(\'取整\')"/> 9 </td> 10 </tr> 11 <tr> 12 <td> 13 <input type="button" name="" id="" value="-" onclick="calc(\'-\')"/> 14 </td> 15 <td> 16 <input type="button" name="" id="" value="取余" onclick="calc(\'%\')"/> 17 </td> 18 </tr> 19 <tr> 20 <td> 21 <input type="button" name="" id="" value="*" onclick="calc(\'*\')"/> 22 </td> 23 <td> 24 <input type="button" name="" id="" value="x^y" onclick="calc(\'x^y\')"/> 25 </td> 26 </tr> 27 <tr> 28 <td> 29 <input type="button" name="" id="" value="/" onclick="calc(\'/\')"/> 30 </td> 31 <td> 32 <input type="button" name="" id="" value="+/-" onclick="calc(\'+/-\')"/> 33 </td> 34 </tr> 35 </table> 36 </td> 37 </tr> 38 </table> 39 </body> 40 </html>
编写完HTML部分后，对计算器按钮进行布局和美化，可以根据个人想法设置
以下是CSS部分：
1 #main{ 2 border: 10px outset orange; 3 margin: 30px auto; 4 background: #ABABAB; 5 box-shadow: 5px 5px #CCCCCC inset; 6 padding-top: 20px; 7 }/*设置最外层表格样式*/ 8 th{ 9 height: 40px; 10 border: 2px outset #CCCCCC; 11 } 12 #result{ 13 width: 100%; 14 height: 100%; 15 box-shadow: 3px 3px #CCCCCC inset; 16 text-align: right; 17 font-size: 20px; 18 } 19 [type=button]{ 20 width: 60px; 21 height: 40px; 22 box-shadow: 3px 3px #CCCCCC,3px 3px #CCCCCC inset; 23 background-image:linear-gradient(to top right,#000,#fff);/*设置按钮渐变色*/ 24 color: #00FFFF; 25 font-weight: bold; 26 margin: 5px; 27 border-radius: 10px/6px; 28 }/*设置所有butto的样式*/ 29 #table1,#table2,#table3{ 30 margin-top: 20px; 31 border: 2px outset #CCCCCC; 32 } 33 [type=button]:hover{ 34 background-image:linear-gradient(to top right,#fff,#000); 35 } 36 #time{ 37 margin: 0; 38 padding: 0; 39 color:#00FFFF; 40 }
样式设置好后，开始JS部分，实现简易计算功能
首先定义几个全局变量，后面实现计算功能时会用上
1 var sum=0; 2 var Boo=false;//判断是否按下计算符号 3 var ope;//存储计算符号的变量
当我们按下数字键的时候，数字会显示出来，所以先获取数字
1 JAVA在WEB上的应用——实现简易计算器 求代码