通过html，css，javascript构建网页计算器

最新推荐文章于 2023-12-21 17:38:09 发布

awo29548

最新推荐文章于 2023-12-21 17:38:09 发布

阅读量211

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/kou1kun/p/4902683.html

版权

一、要求：通过html、css、javascript构建网页计算器

（1）能够实现简单的四则运算

（2）小数点保留两位

二、实现效果如图： 通过html，css，javascript构建网页计算器 - 落风随叶 - 一夜扁舟。一生无悔。

三、分析：

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>

延伸拓展：计算结果四舍五入保留两位小数

参考阅读：w3c离线手册下载 http://www.jb51.net/books/60751.html#down

转载于:https://www.cnblogs.com/kou1kun/p/4902683.html

awo29548

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
通过html，css，javascript构建网页计算器

一、要求：通过html、css、javascript构建网页计算器（1）能够实现简单的四则运算（2）小数点保留两位二、实现效果如图：三、分析：1、边框以及页面的构建：html以及css来实现2、按钮：通过javascript（哪类按钮需要什么标签以及函数来实现？）（1）第一类按钮：数字、小数点、运算符。表达式的连接和输出。（2）等于、运算符的计算...
复制链接

扫一扫