HTML+CSS+JS 简单的计算器

最新推荐文章于 2022-10-22 22:13:49 发布

Gwen小苏

最新推荐文章于 2022-10-22 22:13:49 发布

阅读量910

点赞数

分类专栏：前端文章标签： html css javascript

本文链接：https://blog.csdn.net/qq_38056704/article/details/78095175

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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

效果图如下：

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

HTML<body>代码

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

Gwen小苏

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
2
评论
HTML+CSS+JS 简单的计算器

今天我们试着亲手制作网络计算器吧！！效果图如下：很明显这个计算机有些按钮并没有添加进去，甚至是没有0这个数字的（排版的时候漏了之后就不想再排了，虽然我不是处女座~），不过知识点是一样的，下面讲解代码思路。HTML&lt;body&gt;代码&lt;div id="calcFrame"&gt;&lt;div id="FirstLine"&gt;&lt;input id="re...
复制链接

扫一扫