效果图：
首先，我们在body中制作页面需要的这些元素
<body> <input type="text" id="ipt1"> <select name="" id="slt"> <option value="+">+</option> <option value="-">-</option> <option value="*">*</option> <option value="/">/</option> </select> <input type="text" id="ipt2"> <button id="btn">=</button> <input type="text" id="ipt3"> </body>
上面的id你可随意起，好用就行。
（推荐教程：javascript教程）
javascript代码：
<body>
<script>
//获取页面标签的元素
var inpt1 = document.getElementById("ipt1");
var inpt2 = document.getElementById("ipt2");
var inpt3 = document.getElementById("ipt3");
var selt = document.getElementById("slt");
var butn = document.getElementById("btn");
//给等于按钮添加点击事件
butn.onclick = function(){
//将三个输入框的value值分别赋给变量t1,t2,t3中
var t1 = parseFloat(ipt1.value);
var t2 = parseFloat(ipt2.value);
var t3 = parseFloat(ipt3.value);
//定义一个结果变量用于存放结果
var endValue;
//用switch语句来写运算语句
switch(slt.value){
case "+":
endValue = t1 + t2;
break;
case "-":
endValue = t1 - t2;
break;
case "*":
endValue = t1 * t2;
break;
case "/":
endValue = t1 / t2;
break;
default:
endValue = t1 + t2;
break;
}
//将结果放入结果输入框的value值中，在页面上显示
inpt3.value = endValue;
}
</script>
</body>
相关视频教程推荐：javascript视频教程
以上就是js如何实现简易计算器的详细内容，更多请关注爱上源码网其它相关文章！
- 上一篇：js如何利用键盘事件实现人物行走
- 下一篇：js如何判断一个对象是否是数组（函数）
相关文章
相关视频
- 实例详解js数组方法slice()的用法
- js如何判断打开项目的浏览器类别
- js如何实现滑动门效果
- js如何利用键盘事件实现人物行走
- js如何实现简易计算器
- JavaScript 函数定义
- JavaScript函数的调用（1）
- JavaScript函数的调用（2）
本文有爱上源码下载完入驻作者发布，如果对您版权造成侵害，可以联系本站站长管理进行维权删除，本站收到维权24小时内进行处理，谢谢您关注23ym.cn！
本站分享大量程序员技术文章以及对编程开发的初级入门教程，包括图文讲解笔记和高清视频下载~
重要声明：
1.本站视频教程,软件及网站源码版权均属于原作者所有,您必须在下载后的24个小时之内,从您的电脑中删除!非法商业用途,后果自负！
2.本站不保证所提供下载资源的安全性和完整性,仅供下载学习之用!如链接失效或资源含外站广告,请联系客服处理！给予奖励！
3.本站所有资源来源于用户上传和网络，因此不包含技术服务请大家谅解！本站提供有偿服务！如有侵权请联系在线客服！
4.如您手中有优质资源或教程，可以自助投稿发布，成功分享后有奖励和额外收入！
5.如您需要正版微擎模块可联系本站客服,我们有价值30w+商业微擎应用出售微擎坑位和招收代理！6.400电话/软著/ICP,EDI许可证/商标特价办理中！
爱上源码下载网 » js如何实现简易计算器
爱上源码下载网 » js如何实现简易计算器
常见问题FAQ
- 从网站下载的源码都有安装教程么？不会安装怎么办？
- 本站发布的网站源码和模板资源大部分在压缩包内都有教程，如您不会安装可以联系本站在线技术进行付费安装。
- 爱上源码的所有源码都是亲测能正常运行的么？
- 我手中的优质资源可以在你这换钱或者VIP么？
- 爱上源码除了资源分享还有其他业务没？
