简易版计算器

本文介绍如何创建一个简单的计算器,涉及HTML布局和JavaScript逻辑。通过点击事件及switch语句,实现数字输入、运算符选择及计算结果的显示。

这次我们来写一个简单的计算器案例 

代码部分

HTML部分

首先设置一个基本样式,把我们需要的“计算”按钮,“+-*/”四个计算符合,三个文本框准备好(两个用来输入数字进行计算,一个用来接收计算出来的结果),再为三个文本框和操作符写好id,方便后面使用

JavaScript部分

首先我们先获取“计算”按钮,再为它绑定点击事件,在点击事件里面获取操作符(op)和前面两个文本框(num1,num2)的内容属性取名为op,value1和value2,并且声明一个空值为sum用于接收计算结果;再用switch的方式来储存计算,如当选择“+”的时候sum = parsenInt(value1)+parsenInt(value2)在后面加上一个break,为的是不再继续执行以下代码并返回出结果,最后获取最后一个文本框(result)的属性用来接收计算结果(sum)

 

总结:这个案例html中我用到了input,button,select,这些标签,在js中运用了onclick点击事件和swtich()来实现简易计算器的运行,这次的案例还是挺简单的,所以有些简短,有些地方可能说明的不太清晰,请多多见谅。 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值