Web 基础学习之用 JS 实现网页版本计算器

最新推荐文章于 2024-07-02 17:35:34 发布

Web攻城狮

最新推荐文章于 2024-07-02 17:35:34 发布

阅读量669

点赞数 1

分类专栏： js 文章标签： js web HTML css 网页版计算器

本文链接：https://blog.csdn.net/b1244154318/article/details/51834755

版权

js 专栏收录该内容

19 篇文章 2 订阅

订阅专栏

JS实现计算器

<!doctype html>

<html>
<head>
<title>计算器</title>
<meta charset="utf-8"/>
<style type="text/css">
a{text-decoration:none;}
ul,li{list-style:none;}

margin:0;

padding:0;}
.box{
margin:30px auto;
height:502px;
width:400px;
border:1px solid gray;
box-shadow:7px 7px 5px #999;
}
.box input{
height:90px;
width:390px;
border:1px solid gray;
background:#f2f2f2;
text-align:right;
font-size:34px;
padding-right:10px;
}
.box li{
width:100px;
height:82px;
line-height:83px;
float:left;
text-align:center;
background:#e6e6e6;
}
.box li a{
color:#000;
font-family:Arial;
font-size:24px;
font-weight:bold;
}
.box li a:hover{
display:block;
background:#cfcfcf;
}
.box li a:active{
color:#b8b8b8;
}
.box .style2 a:hover{
color:#cc8329;
}
.box .style2 a:hover{
color:#d4a162;
}
</style>
</head>
<body>
<div class="box">
<input type="text" value="0" id="result"/>
<ul>
<li onclick = "clear0()"><a href="#">CE</a></li>
<li onclick = "clean()"><a href="#">C</a></li>
<li onclick = "goback(result.value)"><a href="#">←</a></li>
<li onclick = "calculator('/')"><a href="#">÷</a></li>
<li onclick = "calculator('7')"><a href="#">7</a></li>
<li onclick = "calculator('8')"><a href="#">8</a></li>
<li onclick = "calculator('9')"><a href="#">9</a></li>
<li onclick = "calculator('*')"><a href="#">×</a></li>
<li onclick = "calculator('4')"><a href="#">4</a></li>
<li onclick = "calculator('5')"><a href="#">5</a></li>
<li onclick = "calculator('6')"><a href="#">6</a></li>
<li onclick = "calculator('-')"><a href="#">-</a></li>
<li onclick = "calculator('1')"><a href="#">1</a></li>
<li onclick = "calculator('2')"><a href="#">2</a></li>
<li onclick = "calculator('3')"><a href="#">3</a></li>
<li onclick = "calculator('+')"><a href="#">+</a></li>
<li onclick = "calculator('&')"><a href="#">±</a></li>
<li onclick = "calculator('0')"><a href="#">0</a></li>
<li onclick = "calculator('.')"><a href="#">.</a></li>
<li class="style2" onclick = "calculator('=')"><a href="#">=</a></li>
</ul>
</div>
<script>
var isClear = false;//控制再次输入时数据的清空开关
var oldNumber = 0;//记录旧的数据
var oldCalcu = " ";//记录旧的运算符
var secondcal = false;//当再次点击运算符时的开关，再按运算符时不计算，只有点击数字时才能计算
function calculator(num){
if( num == "+" || num == "-" || num == "*" || num == "/" || num == "="){
if( secndcal == true){
switch(oldCalcu){
case "+":
result.value = Number(oldNumber) + Number(result.value) ;
break;
case "-":
result.value = Number(oldNumber) - Number(result.value) ;
break;
case "*":
result.value = Number(oldNumber) * Number(result.value) ;
break;
case "/":
result.value = Number(oldNumber )/ Number(result.value) ;
break;
}
secondcal = false;
}
isClear = true;
oldNumber = result.value;
oldCalcu = num;
}
else{
if(result.value == "0" || isClear == true){
result.value = "";
isClear = false;
}
result.value += num;
secondcal = true;
}
}
function clean(){
result.value = " ";
}
function clear0(){
result.value = "0";
}
</script>
</body>
</html>