本文实例为大家分享了JavaScript实现简易计算器功能的具体代码，供大家参考，具体内容如下
效果图：
源代码：
<!DOCTYPE html>
<html>
?? ?<head>
?? ??? ?<meta charset="utf-8">
?? ??? ?<title></title>
?? ??? ?<style type="text/css">
?? ??? ??? ?* {
?? ??? ??? ??? ?margin: 0;
?? ??? ??? ??? ?padding: 0;
?? ??? ??? ?}
?? ??? ??? ?.dome {
?? ??? ??? ??? ?width: 400px;
?? ??? ??? ??? ?height: 430px;
?? ??? ??? ??? ?margin: 50px auto;
?? ??? ??? ??? ?background: #CCC;
?? ??? ??? ??? ?padding: 20px;
?? ??? ??? ?}
?? ??? ??? ?.dome>input {
?? ??? ??? ??? ?width: 100%;
?? ??? ??? ??? ?height: 50px;
?? ??? ??? ??? ?font-size: 24px;
?? ??? ??? ??? ?margin-bottom: 30px;
?? ??? ??? ?}
?? ??? ??? ?.dome>button {
?? ??? ??? ??? ?width: 90px;
?? ??? ??? ??? ?height: 60px;
?? ??? ??? ??? ?background-color: white;
?? ??? ??? ??? ?border: none;
?? ??? ??? ??? ?margin: 5px;
?? ??? ??? ??? ?float: left;
?? ??? ??? ??? ?font-size: 18px;
?? ??? ??? ?}
?? ??? ??? ?button:hover {
?? ??? ??? ??? ?cursor: pointer;
?? ??? ??? ?}
?? ??? ?</style>
?? ?</head>
?? ?<body>
?? ??? ?<div class="dome">
?? ??? ??? ?<!-- disabled="disabled" 禁用输入框 -->
?? ??? ??? ?<input type="" name="" id="ipt" value="0" />
?? ??? ??? ?<button class="num">7</button>
?? ??? ??? ?<button class="num">8</button>
?? ??? ??? ?<button class="num">9</button>
?? ??? ??? ?<button id="del">←</button>
?? ??? ??? ?<button class="num">4</button>
?? ??? ??? ?<button class="num">5</button>
?? ??? ??? ?<button class="num">6</button>
?? ??? ??? ?<button class="ysf">+</button>
?? ??? ??? ?<button class="num">1</button>
?? ??? ??? ?<button class="num">2</button>
?? ??? ??? ?<button class="num">3</button>
?? ??? ??? ?<button class="ysf">-</button>
?? ??? ??? ?<button>%</button>
?? ??? ??? ?<button class="num">0</button>
?? ??? ??? ?<button class="num">.</button>
?? ??? ??? ?<button class="ysf">*</button>
?? ??? ??? ?<button id="clear">AC</button>
?? ??? ??? ?<button class="ysf">/</button>
?? ??? ??? ?<button id="result" style="width: 190px; background-color: #333; color: white;">=</button>
?? ??? ?</div>
?? ?</body>
</html>
<script type="text/javascript">
?? ?//1.把数字和小数点归为一类。class="num"
?? ?//2.把加减乘除运算符归为一类。
?? ?//3.显示框，退格键，归零键，等号 单独设置id。
?? ?//4.把显示框，归零键，等号，退格 标签对象获取出来。
?? ?//5.点击数字，在显示框上显示
?? ?//6.要做运算，条件得两个数和一个运算符
?? ?//7.定义三个变量用来接收第一个数，第二个数和运算符。
?? ?//8.四则运算
?? ?var numValue1 = '';
?? ?var numValue2 = '';
?? ?var czf = '';
?? ?var ipt = document.getElementById("ipt");
?? ?var del = document.getElementById("del");
?? ?var clear = document.getElementById("clear");
?? ?var result = document.getElementById("result");
?? ?var numArr = document.getElementsByClassName("num");
?? ?for (var i = 0; i < numArr.length; i++) {
?? ??? ?//给每个数字绑定单击事件
?? ??? ?numArr[i].onclick = function() {
?? ??? ??? ?//判断用户是否在输入小数点
?? ??? ??? ?if(this.innerText=="."){
?? ??? ??? ??? ?//alert("点小数点了");
?? ??? ??? ??? ?if(numValue1.indexOf(".")==-1&&numValue1.length>=1){
?? ??? ??? ??? ??? ?// var num = this.innerText;
?? ??? ??? ??? ??? ?// alert(num);
?? ??? ??? ??? ??? ?numValue1 += this.innerText;
?? ??? ??? ??? ??? ?//乘1会去掉首尾无效的0
?? ??? ??? ??? ??? ?ipt.value = numValue1*1;
?? ??? ??? ??? ?}
?? ??? ??? ?}else{
?? ??? ??? ??? ?// var num = this.innerText;
?? ??? ??? ??? ?// alert(num);
?? ??? ??? ??? ?numValue1 += this.innerText*1;
?? ??? ??? ??? ?//乘1会去掉首尾无效的0
?? ??? ??? ??? ?ipt.value = numValue1;
?? ??? ??? ?}
?? ??? ?}
?? ?}
?? ?//给运算符绑定单击事件
?? ?var ysfArr = document.getElementsByClassName("ysf");
?? ?for (var i = 0; i < ysfArr.length; i++) {
?? ??? ?//给每个数字绑定单击事件
?? ??? ?ysfArr[i].onclick = function() {
?? ??? ??? ?//当用户点击了运算符，把第一个数字给第二个数字，然后把第一个数字清空，用来接收用户输入的第二个数字
?? ??? ??? ?//alert(this.innerText);
?? ??? ??? ?if (numValue2 == '') {
?? ??? ??? ??? ?numValue2 = numValue1;
?? ??? ??? ??? ?numValue1 = '';
?? ??? ??? ??? ?czf = this.innerText;
?? ??? ??? ??? ?//alert("普通运算");
?? ??? ??? ?} else {
?? ??? ??? ??? ?//有可能会进行四则运算
?? ??? ??? ??? ?//alert("有可能会进行四则运算");
?? ??? ??? ??? ?if(numValue1!=''){
?? ??? ??? ??? ??? ?resultFun();
?? ??? ??? ??? ?}
?? ??? ??? ?}
?? ??? ??? ?//保存操作符
?? ??? ??? ?czf = this.innerText;
?? ??? ?}
?? ?}
?? ?//给等号绑定单击事件，进行运算
?? ?result.onclick = function() {
?? ??? ?resultFun();
?? ?}
?? ?//运算结果
?? ?function resultFun() {
?? ??? ?var one = Number(numValue2);
?? ??? ?var two = Number(numValue1);
?? ??? ?var r = null;
?? ??? ?switch (czf) {
?? ??? ??? ?case '+':
?? ??? ??? ??? ?r = one + two;
?? ??? ??? ??? ?break;
?? ??? ??? ?case '-':
?? ??? ??? ??? ?r = one - two;
?? ??? ??? ??? ?break;
?? ??? ??? ?case '*':
?? ??? ??? ??? ?r = one * two;
?? ??? ??? ??? ?break;
?? ??? ??? ?case '/':
?? ??? ??? ??? ?if (two == 0) {
?? ??? ??? ??? ??? ?alert("除数不能为0");
?? ??? ??? ??? ??? ?numValue1 = '';
?? ??? ??? ??? ??? ?numValue2 = '';
?? ??? ??? ??? ??? ?czf = '';
?? ??? ??? ??? ??? ?r = 0;
?? ??? ??? ??? ?} else {
?? ??? ??? ??? ??? ?r = one / two;
?? ??? ??? ??? ?}
?? ??? ??? ??? ?break;
?? ??? ?}
?? ??? ?//四则运算时，把上一次运算的结果给numValue2，然后把numValue1 清空
?? ??? ?
?? ??? ?numValue2 = new Number(r).toFixed(4)*1;
?? ??? ?numValue1='';
?? ??? ?ipt.value = numValue2;
?? ?}
?? ?//归零键
?? ?clear.onclick = function() {
?? ??? ?numValue1 = '';
?? ??? ?numValue2 = '';
?? ??? ?czf = '';
?? ??? ?ipt.value = '0';
?? ?}
?? ?//退格键
?? ?del.onclick = function() {
?? ??? ?if (numValue1.length >= 1) {
?? ??? ??? ?numValue1 = numValue1.substring(0, numValue1.length - 1);
?? ??? ??? ?ipt.value = numValue1;
?? ??? ?}else if(numValue2.length >= 1){
?? ??? ??? ?numValue2 = numValue2.substring(0, numValue2.length - 1);
?? ??? ??? ?ipt.value = numValue2;
?? ??? ?}else {
?? ??? ??? ?numValue1 = '';
?? ??? ??? ?numValue2 = '';
?? ??? ??? ?czf = '';
?? ??? ??? ?ipt.value = '0';
?? ??? ?}
?? ?}
</script>
补充说明：仍有部分bug尚未解决，因作者水平有限，代码仅供参考。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
查看更多关于基于JavaScript的简易计算器功能的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did121466