简单计算器的实现

最新推荐文章于 2020-11-16 12:15:24 发布

jiang-0824

最新推荐文章于 2020-11-16 12:15:24 发布

阅读量1k

点赞数 6

分类专栏：前端 javascript HTML+css DOM 文章标签：简单机算器的前端写法

本文链接：https://blog.csdn.net/jiang0824/article/details/73906279

版权

前端同时被 3 个专栏收录

2 篇文章 0 订阅

订阅专栏

javascript

2 篇文章 0 订阅

订阅专栏

HTML+css

1 篇文章 0 订阅

订阅专栏

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>简单计算器</title>
<style>
.bg{
width:300px;
margin:20px auto;}
.text{
width:300px;
height:24px;
line-height:24px;
font-size:16px;
font-weight:bold;}
.calac{
width:300px;
margin-top:10px;
}
.calac button{
width:56px;
height:30px;
margin-top:16px;
margin-left:12px;}
</style>
</head>

<body>
<div class="bg">
<textarea class="text"></textarea>
<div class="calac">
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<button>5</button>
<button>6</button>
<button>7</button>
<button>8</button>
<button>9</button>
<button>+</button>
<button>-</button>
<button>*</button>
<button>/</button>
<button>=</button>
</div>
</div>
</body>
<script>
var divt=document.querySelector(".text");
document.querySelector(".calac").addEventListener("click",cal);
function cal(e){
var nern=e.target.innerHTML;
if(e.target.nodeName=="BUTTON"){
if(nern=="C"){
divt.innerHTML="";
}else if(nern=="="){
divt.value=eval(divt.value);
}else{
divt.innerHTML+=nern;
e.stopPropagation();
}
}
}
</script>
</html>