h5写的简单计算器

最近要去为学习前端的孩子们讲一堂课，想了半天觉得不如引导他们做个小案例，这样可以让他们感觉到有趣，也可以让他快速的接受某些概念。于是我决定写一个计算器的案例。

怎样做这个计算器呢？首先要设计他的界面，其次是交互部分。至于功能嘛，可以进行正常的加减乘除就可以。

界面的设计部分我们考虑使用flex弹性布局，优点易于使用，灵活，对于有规则排版的界面易于设计。

对于交互部分我们主要使用eval函数，一个神秘而强大的存在。他可以将字符串形式命令直接执行。废话不多说了直接上代码

<style type="text/css">
.a_cal{
background:#1207a978;
width:200px;
height:400px;
border:1.5px solid black;
border-radius:5px;
text-align:center;
margin:  0 auto;


}

.a1_cal{
background:snow;
width:200px;
height:300px;
border:1px solid dark;
display:flex;
display:-wibkit-flex;
flex-direction:row;
flex-wrap:wrap;
justify-content:center;
}

.bt{
width:50px;
height:50px;
border-radius:10px;
background:black;
color:#ffffff;
}
.dis_cal{
width:200px;
height:50px;
background:snow;
border-radius:5px;
border:1.5px solid black;
}


</style>

<div class="a_cal">
	 <h2>科学计算器</h2>
	 <span id="dis_time" style="color:#fbfbfb;">教你学习flex布局</span>
     <div class='a1_cal'>
	        <div id="disa" class='dis_cal'></div>
			<button class="bt" onclick="djc()">←</button>
			<button class="bt"onclick="djce()" >ce</button>
			<button class="bt" onclick="djTime()">time</button>
			<button class="bt" onclick="djMusic()">music</button>
		    <button class="bt" onclick="dj(this)">1</button>
		    <button class="bt"  onclick="dj(this)">2</button>
		    <button class="bt" onclick="dj(this)">3</button>
		    <button class="bt" onclick="dj(this)">4</button>
		    <button class="bt" onclick="dj(this)">5</button>
		    <button class="bt" onclick="dj(this)">6</button>
		    <button class="bt" onclick="dj(this)">7</button>
			<button class="bt" onclick="dj(this)">8</button>
			<button class="bt" onclick="dj(this)">9</button>
			<button class="bt" onclick="dj(this)">0</button>
			<button class="bt" onclick="dj(this)">.</button>
			<button class="bt" onclick="dj(this)">+</button>
			<button class="bt" onclick="dj(this)">-</button>
			<button class="bt" onclick="dj(this)">*</button>
			<button class="bt" onclick="dj(this)">/</button>
			<button class="bt" onclick="cal()">=</button>
	</div>
</div>





<script src="./jsq.js"></script>
<script type="text/javascript">
var audio=new Audio();
audio.src=adu;
var musicFlag=true;
var disFlag=false;


setInterval(function(){
if(disFlag){
document.getElementById("dis_time").innerText=new Date().toLocaleString();
}else{
document.getElementById("dis_time").innerText="教你学习flex布局";
}

},1000);




function djMusic(){
   musicFlag=!musicFlag;
   if(musicFlag){
   audio.play();
   }
}


function djTime(){
  disFlag=!disFlag;


}
function djc(){
   if(musicFlag){
   audio.play();
   }
var dis_d=document.getElementById("disa").innerText
  if(dis_d){
     if(document.getElementById("disa").innerText=="error"){
        document.getElementById("disa").innerText="";
      }else{
        document.getElementById("disa").innerText=dis_d.slice(0,dis_d.length-1);
      }
  }
}
function djce(){
   if(musicFlag){
     audio.play();
   }
   document.getElementById("disa").innerText="";
}

function dj(e){
   if(musicFlag){
     audio.play();
   }
if(document.getElementById("disa").innerText=="error"){
     document.getElementById("disa").innerText=e.innerText;
    }else{
     document.getElementById("disa").innerText+=e.innerText;
    }
}
function cal(){
   if(musicFlag){
      audio.play();
   }
      var dis_d=document.getElementById("disa").innerText;
    if(dis_d){
    try{
       document.getElementById("disa").innerText=eval(dis_d);
       }catch(e){
       document.getElementById("disa").innerText="error";
  
      }
   }
}



</script>