标签：height pow read c4c rip 内容 overflow pad case
1.页面结构如下：
<body>
<div id="sDiv">
<div id="show"><div id="showme"></div></div>
<input type="text" id="result" readOnly="true" value="0"><br>
<input type="button" onclick="s(‘0‘)" id="res" class="btncss" value="C">
<input type="button" onclick="operator(‘backspace‘)" id="del" class="btncss" value="<-">
<input type="button" onclick="operator(‘pow‘)" class="btncss" value="x^2">
<input type="button" onclick="a(‘*‘)" class="btncss" value="*"><br>
<input type="button" onclick="a(‘7‘)"class="btncss" value="7">
<input type="button" onclick="a(‘8‘)"class="btncss" value="8">
<input type="button" onclick="a(‘9‘)"class="btncss" value="9">
<input type="button" onclick="a(‘/‘)"class="btncss" value="/"><br>
<input type="button" onclick="a(‘4‘)"class="btncss" value="4">
<input type="button" onclick="a(‘5‘)"class="btncss" value="5">
<input type="button" onclick="a(‘6‘)"class="btncss" value="6">
<input type="button" onclick="a(‘+‘)"class="btncss" value="+"><br>
<input type="button" onclick="a(‘1‘)"class="btncss" value="1">
<input type="button" onclick="a(‘2‘)"class="btncss" value="2">
<input type="button" onclick="a(‘3‘)"class="btncss" value="3">
<input type="button" onclick="a(‘-‘)"class="btncss" value="-"><br>
<input type="button" onclick="operator(‘percent‘)"class="btncss" value="%">
<input type="button" onclick="a(‘0‘)"class="btncss" value="0">
<input type="button" onclick="a(‘.‘)"class="btncss" value=".">
<input type="button" onclick="e()"class="btncss" value="="><br>
</div>
</body>
2.结合css代码：
<style type="text/css">
#sDiv{
height: 500px; /*计算机面板长宽*/
width: 400px;
background: #f7f6f6; /*计算机面板背景颜色*/
margin:20px auto; /*计算机位置*/
padding: 10px;
text-align: center;
align-content: center;
border: 1px solid #c6c4c4;
border-radius: 6px; /*计算机面板设置圆角*/
}
#show{
margin: 0 auto;
height: 100px;
width: 342px;
padding: 6px;
overflow:hidden;
background: #FFFFFF;
border: 1px solid #c6c4c4;
/* border-bottom: 1px solid #000000; */
border-bottom: 0;
border-radius: 6px 6px 0 0;
color: #000000;
text-align: right;
}
/* 计算结果框 */
#result{
height: 40px;
width: 350px;
text-align: right;
margin-top: 1px;
font-size: 24px;
font-weight: bold;
color: #000000;
font-family:"微软雅黑";
border: 1px solid #c6c4c4;
border-radius: 0 0 6px 6px;
}
/* 按钮通用样式 */
.btncss{
height: 50px;
width: 70px;
margin-top: 15px;
margin-left: 5px;
margin-right: 5px;
background: #e7e7e7;
border: 1px solid #cbc9c9;
font-size: 24px;
border-radius: 6px;
}
</style>
3.js代码：
<script type="text/javascript" defer="defer">
window.onload=function(){
input = document.getElementById("result"); //获取计算机结果输出框的元素
show = document.getElementById("showme");
var isres = 0; //标志，用户判断是否已经进行过计算
}
function s(v){ //该函数主要用于清零键，或者输出特定内容
input.value = v;
}
function a(v){ //该函数主要用于输入各种数字时，显示在结果框上
var patrn = /^[0-9]*$/; //正则表达式，用于匹配纯数字
if(!patrn.test(v)){
isres=0;
}
if(isres == 1 && patrn.test(v)){ //如果已经进行过计算，并且又重新输入了数字，则自动清零结果框，方便再次输入。
input.value = v;
isres = 0;
}else if(input.value == "0" && patrn.test(v)){ //如果结果框为0，并且输入的值不是数字（输入的值是运算符），则直接表示（比如 0+运算符+数字）
input.value = v;
}else{
input.value += v;
}
}
function e(){ //该函数主要由“=”按钮调用，实现结果的计算，以及控制历史记录只显示4条。
var t;
isres =1;
try{
if(show.offsetHeight>80){
t = show.innerHTML.indexOf(‘=<br>‘); //查找该字符串第一次出现的位置
var str = show.innerHTML;
str = str.substr(t+5,str.length); //保留该字符串之后的内容
show.innerHTML = str;
}
show.innerHTML += input.value+‘=<br>‘;
s(eval(input.value))
}catch(e){
s(‘Error‘)
}
}
function operator(type){ //该函数主要有操作符按钮调用（回退操作、平方操作、%操作）
switch(type){
case "backspace":
var str = input.value;
str = (str !="0") ? str : "";
str = str.substr(0,str.length-1);
str = (str != "") ? str :"0";
input.value = str;
break;
case "pow":
input.value=Math.pow(input.value,2);
break;
case "percent":
input.value = input.value/100;
break;
}
}
</script>
1.首先这是初学JavaScript的时候写的代码了，肯定不足之处。比如某些计算或出错（8.2-1=？）类似这样的式子计算结果可能有点小问题，等什么时候有心情了再回来把这个问题解决一下。
2.这个计算机方法真的很简单，如果初学者觉得大神们写的方法太难，那就回来参考这个吧！
以上就是简单计算器的实现步骤，代码是可用的，如果大家测试出现运行错误，检查一下格式吧！
标签：height pow read c4c rip 内容 overflow pad case
原文地址：https://www.cnblogs.com/star-z/p/13334593.html
