设计一个计算器，实现0-9数字间的加减乘除运算

提示：
（1）采用JavaScript定义加减乘除方法；
（2）通过document.getElementById()获得DOM中的元素并进行操作，也可以自学jQuery相关方法并应用于此处。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" ><head><meta charset="utf-8"><meta name="Generator" content=""><meta name="Keywords" content=""><meta name="author" content=""><title>计算器</title><link th:href="@{/static/css/calculator/calculator.css}" rel="stylesheet"></head><style>@charset 'utf-8';body{font-size:12px;font-family:"Times New Roman",Times,  serif:color:#555;text-align:center;background:#e2e2e2;
}
h6{margin:0;font-size:12px;
}
#calculator{width:94%;height:auto;overflow:hidden;margin:10px auto;border:#fff 1px solid;padding-bottom:10px;background-color:#f2f2f2;
}
#calculator div{clear:both;
}
#calculator ul{padding:0;margin:5px 14px;border:#fff 1px solid;height:auto;overflow:hidden;
}
#calculator li{list-style:none;float:left;width:14.43%;margin:0.5%;display:inline;line-height:32px;font-size:32px;background:#eaeaea;padding:2.28%;
}
#calculator li.tool{background:#ffbb66;
}
#calculator li.D06A15{background-color:#ffbb66;
}
#calculator li:hover{background-color:#f9f9f9;cursor:pointer;
}
#calculator li:active{background-color:#fc0;cursor:pointer;
}
#calculator li.tool:active{background-color:#d8e8ff;cursor:pointer;
}
#calcu-head{text-align:left;padding:10px 15px 5px;
}
.screen {width:97%;height:42px;line-height:42px;padding:4px;border:#e6e6e6 1px solid;border-bottom:#f2f2f2 1px solid;border-right:#f2f2f2 1px solid;margin:10px auto;text-align:right;padding-left:20px;font-size:3em;color:#999;direction:ltr;
}</style><body><div id="calculator"><div id="calcu-header"><h1></h1></div><div id="calcu-screen"><input type="text" name="numScreen" id="result" class="screen" value="0" onfocus="this.flur();" disabled="disabled"/></div><div id="calcu-btn"><ul><li onclick="command(7)">7</li><li onclick="command(8)">8</li><li onclick="command(9)">9</li><li class="tool" onclick="del()">+/-</li> <li class="tool" onclick="clearzero()">C</li> <li onclick="command(4)">4</li><li onclick="command(5)">5</li><li onclick="command(6)">6</li><li class="tool" onclick="op('*')">×</li> <li class="tool" onclick="op('/')">÷</li> <li onclick="command(1)">1</li><li onclick="command(2)">2</li><li onclick="command(3)">3</li><li class="tool" onclick="op('+')">+</li> <li class="tool" onclick="op('-')">-</li><li onclick="command(0)">0</li> <li onclick="dzero()">00</li> <li onclick="dot()">.</li> <li class="tool" onclick="getPercent('%')">%</li><li class="tool D06A15" onclick="equal()">=</li> </ul><div id="audioBox"></div></div></div><script>var resultDom=document.getElementById("result");
var dotFlag=true;
var opFlag=true;
var equFlag=true;
function command(num){if(!equFlag){resultDom.value="0";equFlag=true;}opFlag=true;var str=resultDom.value;str=(str=="0"?"":str);resultDom.value=str+num;
};//+ - * /
function op(op){if(opFlag){resultDom.value+=op;dotFlag=true;opFlag=false;equFlag=true;}
};//小数点
function dot(){if(dotFlag){//拿到文本框的值var num=resultDom.value;resultDom.value=num+".";dotFlag=false;}
}
//运算
function equal(){var num=resultDom.value;resultDom.value=eval(num);var r=resultDom.value;dotFlag=(r.indexOf(".")==-1?true:false);opFlag=true;equFlag=false;
}
function dzero(){var num = resultDom.value;//获取文本框的值if(num=="0"){return;//如果等返回000}var str = resultDom.value;resultDom.value = str + "00";
};//清空
function clearzero(){resultDom.value="0";opFlag=true;dotFlag=true;
}//后退
function del(){var val=resultDom.value;if(val<0){resultDom.value=-1*val;}else{resultDom.value=-1*val;}
}//百分号
function getPercent(num) {var val=resultDom.value;var add=val.indexOf("+");var sub=val.indexOf("-");var mul=val.indexOf("*");var divide=val.indexOf("/");var max = Math.max(add,sub,mul,divide);var lastStr = val.substring(max+1,val.length);var beforeStr = val.substring(0,max+1);var percent = lastStr/100;resultDom.value = beforeStr+percent;
}</script></body>
</html>

设计一个计算器，实现0-9数字间的加减乘除运算相关推荐

设计一个函数把两个数字相加。不得使用 + 或者其他算术运算符
设计一个函数把两个数字相加.不得使用 + 或者其他算术运算符. 示例: 输入: a = 1, b = 1 输出: 2 提示: a, b 均可能是负数或 0 结果不会溢出 32 位整数解题思路 ...
网页中用PHP设计一个计算器,用PHP写一个计算器（附完整代码）_后端开发
PHP作用域和文件夹操作示例_后端开发 php中的作用域有:变量作用域.静态变量.匿名函数use,函数内部不能访问函数外部的变量,但在匿名函数中,可以通过use将外部变量引入匿名函数中. 本篇文章介绍 ...
java计算器布局设计_用java设计一个计算器界面？？？
展开全部 public class Cheshi extends JFrame { private Border border = BorderFactory.createEmptyBorder(5, ...
网页设计用表格设计一个计算器界面用于小白入门安排
网页设计用表格设计计算器界面用于小白入门 <!DOCTYPE html> <html lang="en"> <head><meta ch ...
设计一个在一百万个数字中求十个最大的数算法
具体做法是: 构建一个只有10个元素的min-heap,那么根结点就是这10个数中最小的数,然后开始遍历数组,如果遇到的数比min-heap的根结点还小,直接跳过,遇到比min-heap根结点大的数, ...
c语言中定义密码为英文字母,请设计一个密码生成器，要求随机生成4组10位密码（C语言）...
请设计一个密码生成器,要求随机生成4组10位密码(密码只能由字母和数字组成),每一组必须包含至少一个大写字母,每组密码不能相同,输出生成的密码. #include #include #include ...
基于python：利用pyqt5设计简易计算器
实训内容: 跟随学习,用python写一个能进行简易运算的计算器,并自己设计计算器的UI界面,并根据实际对外观做出一定的美化. 准备过程本次使用的是Windows11,python环境3.9.15 ...
基于MATLAB的GUI设计简易计算器
MATLAB语言基于GUI设计简易计算器 GUI界面的设置主页----新建----应用程序----GUIDE 进入下图所示界面点击确定,即可生成GUI设计界面. 设计计算器界面,放置按键和显示屏, ...
密码生成器c语言程序,请设计一个密码生成器，要求随机生成4组10位密码（C语言）...
请设计一个密码生成器,要求随机生成4组10位密码(密码只能由字母和数字组成),每一组必须包含至少一个大写字母,每组密码不能相同,输出生成的密码. #include #include #include ...

设计一个计算器，实现0-9数字间的加减乘除运算

设计一个计算器，实现0-9数字间的加减乘除运算

设计一个计算器，实现0-9数字间的加减乘除运算相关推荐

最新文章

热门文章