HTML+CSS+JS 简单的计算器

来源：互联网发布：手机不能连接数据网络编辑：程序博客网时间：2024/06/04 21:16

今天我们试着亲手制作网络计算器吧！！

效果图如下：

很明显这个计算机有些按钮并没有添加进去，甚至是没有0这个数字的（排版的时候漏了之后就不想再排了，虽然我不是处女座~），不过知识点是一样的，下面讲解代码思路。

HTML<body>代码

<div id="calcFrame">
<div id="FirstLine">
<input id="result" type="text" value="0" />
<button id="clear" onclick="clearme()">clear</button>
</div>
<div id="SecondLine">
<button id="num1" onclick="clickme(1)">1</button>
<button id="num2" onclick="clickme(2)">2</button>
<button id="num3" onclick="clickme(3)">3</button>
<button id="delete" onclick="delect()">delete</button>
<button id="=" onclick="dengyu()" >=</button>
<button id="num4" onclick="clickme(4)">4</button>
<button id="num5" onclick="clickme(5)">5</button>
<button id="num6" onclick="clickme(6)">6</button>
<button id="*" onclick="cheng()">*</button>
<button id="/" onclick="chu()">/</button>
<button id="num7" onclick="clickme(7)">7</button>
<button id="num8" onclick="clickme(8)">8</button>
<button id="num9" onclick="clickme(9)">9</button>
<button id="+" onclick="jia()">+</button>
<button id="-" onclick="jian()">-</button>

</div>
</div>

大致将计算器划分为上半部分显示屏和下半部分键盘两个区域，这样做主要是好做css渲染

CSS<style>代码

渲染过程不必多说，我也没有用到特别的框架，一些基本语法而已，大家可以投其所好。

js<script>代码

*删除末尾数字

*/
function delect(){
var str=resultDom.value;
str = (str == "0" ? "":str);
str = str.substring(0,str.length-1);
resultDom.value = str;
}

*求值，arithmetic[0]和arithmetic[2]分别存第一个数和第二个数，arithmetic[1]存放运算符，先判断1的符号，再进行运算

*/
function dengyu(){
var str=resultDom.value;
arithmetic[2] =str;

var a = arithmetic[1];
switch (a){

case "0":
break;

case "*":
resultDom.value = Number(arithmetic[0]) * Number(arithmetic[2]);
break;

case "/":
resultDom.value = Number(arithmetic[0]) / Number(arithmetic[2]);
break;

case "+":
resultDom.value = Number(arithmetic[0]) + Number(arithmetic[2]);
break;

case "-":
resultDom.value = Number(arithmetic[0]) - Number(arithmetic[2]);
break;
}
arithmetic[0] = resultDom.value;
arithmetic[1] = "0";
arithmetic[2] = 0;
}
// function dian(){
// var str=resultDom.value;
// var int = str.indexOf(".");
// if(int == -1){
// str = str+".";
// }
// resultDom.value = str;
// }

function cheng(){
var str=resultDom.value;
arithmetic[0] =str;
arithmetic[1] ="*";
result.value = 0;
}
function chu(){
var str=resultDom.value;
arithmetic[0] =str;
arithmetic[1] ="/";
result.value = 0;
}
function jia(){
var str=resultDom.value;
arithmetic[0] =str;
arithmetic[1] ="+";
result.value = 0;
}
function jian(){
var str=resultDom.value;
arithmetic[0] =str;
arithmetic[1] ="-";
result.value = 0;
}
</script>

完~~~下一次应该会写servlet和jsp的内容

阅读全文

0 0