一、要求：通过html、css、javascript构建网页计算器
（1）能够实现简单的四则运算
（2）小数点保留两位
二、实现效果如图：
三、分析：
1、边框以及页面的构建：html以及css来实现
2、按钮：通过javascript（哪类按钮需要什么标签以及函数来实现？）
（1）第一类按钮：数字、小数点、运算符。表达式的连接和输出。
（2）等于、运算符的计算及结果的输出
（3）清除键的功能实现
3、页面信息的获取、计算以及呈现
四、实现代码
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <style type="text/css"> 6 table,td{ 7 border:1px solid #c0c0c0; 8 } 9 td{ 10 padding: 10px; 11 } 12 button{ 13 width: 50px; 14 height: 50px; 15 } 16 #result{ 17 font:bolder 26px ‘黑体‘; 18 text-align: right; 19 20 } 21 </style> 22 </head> 23 24 <body> 25 26 <table> 27 <tr> 28 <td id="result" colspan="3">0</td> 29 <td><button value="c">C</button></td> 30 </tr> 31 <tr> 32 <td><button value="1">1</button></td> 33 <td><button value="2">2</button></td> 34 <td><button value="3">3</button></td> 35 <td><button value="+">+</button></td> 36 </tr> 37 <tr> 38 <td><button value="4">4</button></td> 39 <td><button value="5">5</button></td> 40 <td><button value="6">6</button></td> 41 <td><button value="-">-</button></td> 42 </tr> 43 <tr> 44 <td><button value="7">7</button></td> 45 <td><button value="8">8</button></td> 46 <td><button value="9">9</button></td> 47 <td><button value="*">*</button></td> 48 </tr> 49 <tr> 50 <td><button value=".">.</button></td> 51 <td><button value="0">0</button></td> 52 <td><button value="11">=</button></td> 53 <td><button value="/">/</button></td> 54 </tr> 55 </table> 56 </body> 57 <script type="text/javascript"> 58 //var c = document.getElementById(‘result‘). 59 //innerHTML;/* 获取id值为result的html页面内容*/ 60 //alert(c); 61 window.onload = function(){ 62 var btn = document.getElementsByTagName(‘button‘) 63 /*获取button标签的页面内容*/ 64 for(var i=0; i<btn.length;i++){ 65 btn[i].onclick = function(){ 66 switch(this.value){ 67 case ‘11‘: 68 calculate(); 69 break; 70 case ‘c‘: 71 clearData(); 72 break; 73 default: 74 showData(this.value); 75 break; 76 }//采用分支语句进行鼠标点击对象的判断，执行相对应的函数 77 } 78 79 } //btn 为一个数组变量,用循环来进行遍历 80 } //当整个页面加载完成后的执行函数 81 function showData(value){ 82 var result =document.getElementById(‘result‘).innerHTML; 83 //获取该id值的页面内容 84 if(result == 0){result = " "}; 85 result +=value; 86 document.getElementById(‘result‘).innerHTML=result; 87 } 88 function calculate(){ 89 var resultEle = document.getElementById(‘result‘); 90 var result =resultEle.innerHTML; 91 92 result = eval(result); 93 //截取小数点后两位 94 result +=‘‘; 95 if (result.indexOf(‘.‘)>0) { 96 result = result.substr(0, result.indexOf(‘.‘)+3); 97 resultEle.innerHTML=result; 98 } 99 100 } 101 function clearData(){ 102 document.getElementById(‘result‘).innerHTML=‘‘; 103 } 104 </script> 105 </html>
延伸拓展：计算结果四舍五入保留两位小数
原文：http://www.cnblogs.com/kou1kun/p/4902683.html