这篇文章主要讲解了“js怎么实现简单的计算器”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“js怎么实现简单的计算器”吧！
话不多说，附上源码。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>计算器</title>
<style>
#b1{
text-align: center;
background-color: lightblue;
width: 650px;
height: 650px;
border: 1px solid black;
margin-left: 400px;
border-radius: 18px;
}
#b2{
text-align: center;
width: 300px;
height: 80px;
margin-top: 30px;
font-family: "微软雅黑";
font-size: 20px;
border-radius: 8px;
outline:none;
}
ul{
list-style-type: none;
}
li{
float: left;
margin-left: 40px;
margin-top: 30px;
}
li input{
width: 100px;
height: 50px;
border-radius: 8px;
font-family: "微软雅黑";
font-size: 20px;
outline:none;
}
li input:hover{
background-color:red ;
}
</style>
<script>
var beforeNum=0;
function addNum(a){
beforeNum=document.getElementById("b2").value;
var nowNum=beforeNum;
if(beforeNum!=0){
nowNum=beforeNum+a;
}else{
if(beforeNum.substring(beforeNum.length-2,beforeNum.length-1)=="."){
nowNum=beforeNum+a;
}
if(a!="+"&&a!="-"&&a!="*"&&a!="/"&&(beforeNum.substring(beforeNum.length-2,beforeNum.length-1)!=".")){
nowNum=a;
}
}
document.getElementById("b2").value=nowNum;
}
function jisuan(){
document.getElementById("b2").value=eval(document.getElementById("b2").value);
}
function clearNum(){
document.getElementById("b2").value=0;
}
function backAgain(){
beforeNum=document.getElementById("b2").value;
if(beforeNum.length!=1){
document.getElementById("b2").value=beforeNum.substring(0,beforeNum.length-1);
}else if(beforeNum.length==1){
document.getElementById("b2").value=0;
}
}
function addPoint(b){
beforeNum=document.getElementById("b2").value;
if((beforeNum.indexOf(".")!=beforeNum.length-1)){
document.getElementById("b2").value=beforeNum+b;
}
}
function offCl(){
document.getElementById("b2").value="";
}
</script>
</head>
<body>
<div id="b1">
<p >在线简易计算器</p>
<div><input id="b2" name="wenben" value="0"/></div>
<div>
<ul>
<li><input type="button" value="1" onclick="addNum(this.value);"/></li>
<li><input type="button" value="2" onclick="addNum(this.value);"/></li>
<li><input type="button" value="3" onclick="addNum(this.value);"/></li>
<li><input type="button" value="4" onclick="addNum(this.value);"/></li>
</ul>
<ul>
<li><input type="button" value="5" onclick="addNum(this.value);"/></li>
<li><input type="button" value="6" onclick="addNum(this.value);"/></li>
<li><input type="button" value="7" onclick="addNum(this.value);"/></li>
<li><input type="button" value="8" onclick="addNum(this.value);"/></li>
</ul>
<ul>
<li><input type="button" value="9" onclick="addNum(this.value);"/></li>
<li><input type="button" value="0" onclick="addNum(this.value);"/></li>
<li><input type="button" value="+" onclick="addNum(this.value);"/></li>
<li><input type="button" value="-" onclick="addNum(this.value);"/></li>
</ul>
<ul>
<li><input type="button" value="*" onclick="addNum(this.value);"/></li>
<li><input type="button" value="/" onclick="addNum(this.value);"/></li>
<li><input type="button" value="." onclick="addPoint(this.value);"/></li>
<li><input type="button" value="=" onclick="jisuan();"/></li>
</ul>
</ul>
<ul>
<li><input type="button" value="回退" onclick="backAgain();"/></li>
<li><input type="button" value="清除" onclick="clearNum();"/></li>
<li><input type="button" value="关机" onclick="offCl();"/></li>
</ul>
</div>
</div>
</body>
</html>代码运行的效果图。
免责声明：本站发布的内容（图片、视频和文字）以原创、来自互联网转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系QQ:712375056 进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
Copyright © 2009-2021 56dr.com. All Rights Reserved. 特网科技 特网云 版权所有 珠海市特网科技有限公司 粤ICP备16109289号
域名注册服务机构:阿里云计算有限公司（万网） 域名服务机构：烟台帝思普网络科技有限公司（DNSPod） CDN服务：阿里云计算有限公司 中国互联网举报中心 增值电信业务经营许可证B2
建议您使用Chrome、Firefox、Edge、IE10及以上版本和360等主流浏览器浏览本网站
