<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>js简单的计算机</title>
<style>
*{margin: 0;padding:0;outline: 0;border:0}
textarea{font-size:28px;border-bottom:1px seagreen solid;height:100px;width:100%;resize: none;}
.box{text-align: center;margin: 20px auto;width:400px;height:600px;border:1px skyblue solid}
button{;width:100px;margin-top:20px;line-height:38px;text-align: center;display: inline-block;}
.pink{background: pink;color: white}
</style>
</head>
<body>
<div class="box">
<textarea readonly="readonly"></textarea>
<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>0</button>
<button>+</button>
<button>-</button>
<button>*</button>
<button>/</button>
<button>%</button>
<button>c</button>
<button>=</button>
</div>
<script>
var btns=document.getElementsByTagName('button');
var txt=document.getElementsByTagName('textarea')[0];
for(var i=0;i<btns.length;i++){
btns[i].onclick=function () {
for(var i=0;i<btns.length;i++){btns[i].className=''}
this.className='pink';
if(this.innerHTML=="="){
if(txt.innerHTML!=''){
txt.innerHTML=eval(txt.innerHTML);//eval()方法
}
}else if(this.innerHTML=='c'){
txt.innerHTML='';
}else {
txt.innerHTML+=this.innerHTML
}
}
}
</script>
浙公网安备 33010602011771号