javaScript简单实例:实现一个简易计算器

详细代码如下:

**样式代码**
 <style type="text/css"> body{ font-size:12px; font-family:Arial, Georgia, "Times New Roman", Times, serif; color:#555; text-align:center; background-color:#e2e2e2; } h6{ margin:0; font-size:12px; } #calculator{ width:240px; height:auto; overflow:hidden; margin:10px auto; border:#fff 1px solid; padding-bottom:10px; background-color:#f2f2f2; } #calculator div { clear:both; } #calculator ul{ padding:0; margin:5px 14px; border:#fff 1px solid; height:auto; overflow:hidden } #calculator li{ list-style:none; float:left; width:32px; height:32px; margin:5px; display:inline; line-height:32px; font-size:14px; text-align:center; background-color:#eaeaea; } #calculator li.tool{ background-color:#e2e2e2; } #calculator li:hover{ background-color:#f9f9f9; cursor:pointer; } #calculator li:active{ background-color:#fc0; cursor:pointer; } #calculator li.tool:active{ background-color:#d8e8ff; cursor:pointer; } #calcu-head { text-align:left; padding:10px 15px 5px; } span.imyeah { float:right; color:#ccc; } span.imyeah a{ color:#ccc; } #calcu-screen { padding-left:15px; } .screen{ width:210px; height:32px; line-height:24px; padding:4px; left:10px; border:#e6e6e6 1px solid; border-bottom:#f2f2f2 1px solid; border-right:#f2f2f2 1px solid; margin:10px auto; direction:ltr; text-align:right; font-size:16px; color:#999; } #calcu-foot{ text-align:left; padding:10px 15px 5px; height:auto; overflow:hidden; } span#note{ float:left; width:210px; height:auto; overflow:hidden; color:red; } span.welcome{ clear:both; color:#999; } span.welcome a{ float:right; color:#999; } </style>

   **js代码**
   <script type="text/javascript"> var num=0,result=0,numshow="0"; var operate=0; //判断输入状态的标志  var calcul=0; //判断计算状态的标志  var quit=0; //防止重复按键的标志  function command(num){ var str=String(document.calculator.numScreen.value); //获得当前显示数据  str=(str!="0") ? ((operate==0) ? str : "") : ""; //如果当前值不是"0",且状态为0,则返回当前值,否则返回空值;  str=str + String(num); //给当前值追加字符  document.calculator.numScreen.value=str; //刷新显示  operate=0; //重置输入状态  quit=0; //重置防止重复按键的标志  } function dzero(){ var str=String(document.calculator.numScreen.value); str=(str!="0") ? ((operate==0) ? str + "00" : "0") : "0"; //如果当前值不是"0",且状态为0,则返回当str+"00",否则返回"0";  document.calculator.numScreen.value=str; operate=0; } function dot(){ var str=String(document.calculator.numScreen.value); str=(str!="0") ? ((operate==0) ? str : "0") : "0"; //如果当前值不是"0",且状态为0,则返回当前值,否则返回"0";  for(i=0; i<=str.length;i++){ //判断是否已经有一个点号  if(str.substr(i,1)==".") return false; //如果有则不再插入  } str=str + "."; document.calculator.numScreen.value=str; operate=0; } function del(){ //退格  var str=String(document.calculator.numScreen.value); str=(str!="0") ? str : ""; str=str.substr(0,str.length-1); str=(str!="") ? str : "0"; document.calculator.numScreen.value=str; } function clearscreen(){ //清除数据  num=0; result=0; numshow="0"; document.calculator.numScreen.value="0"; } function plus(){ //加法  calculate(); //调用计算函数  operate=1; //更改输入状态  calcul=1; //更改计算状态为加  } function minus(){ //减法  calculate(); operate=1; calcul=2; } function times(){ //乘法  calculate(); operate=1; calcul=3; } function divide(){ //除法  calculate(); operate=1; calcul=4; } function persent(){ //求余  calculate(); operate=1; calcul=5; } function equal(){ calculate(); //等于  operate=1; num=0; result=0; numshow="0"; } //  function calculate(){ numshow=Number(document.calculator.numScreen.value); if(num!=0 && quit!=1){ //判断前一个运算数是否为零以及防重复按键的状态  switch(calcul){ //判断要输入状态  case 1:result=num+numshow;break; //计算"+"  case 2:result=num-numshow;break; //计算"-"  case 3:result=num*numshow;break; case 4:if(numshow!=0){ result=num/numshow; }else{ document.getElementById("note").innerHTML="被除数不能为零!"; setTimeout(clearnote,4000); } break; case 5:result=num%numshow;break; } quit=1; //避免重复按键  }else{ result=numshow; } numshow=String(result); document.calculator.numScreen.value=numshow; num=result; //存储当前值  } function clearnote(){ //清空提示  document.getElementById("note").innerHTML=""; } </script>
   **html代码**
<body>
<div id="calculator"> 
  <div id="calcu-head">
  <span class="imyeah">© 
  <a href="" target="_blank">I'm Mr.Sun!</a>
  </span>
  <h6>简单的计算器</h6>
  </div> 
  <form name="calculator" action="" method="get"> 
  <div id="calcu-screen"> 
  <!--配置显示窗口,使用onfocus="this.blur();"避免键盘输入--> 
  <input type="text" name="numScreen" class="screen" value="0" onfocus="this.blur();" /> 
  </div> 
  <div id="calcu-btn"> 
    <ul> <!--配置按钮--> 
      <li onclick="command(7)">7</li> 
      <li onclick="command(8)">8</li> 
      <li onclick="command(9)">9</li> 
      <li class="tool" onclick="del()"></li> 
      <li class="tool" onclick="clearscreen()">C</li> 
      <li onclick="command(4)">4</li> 
      <li onclick="command(5)">5</li> 
      <li onclick="command(6)">6</li> 
      <li class="tool" onclick="times()">×</li> 
      <li class="tool" onclick="divide()">÷</li> 
      <li onclick="command(1)">1</li> 
      <li onclick="command(2)">2</li> 
      <li onclick="command(3)">3</li> 
      <li class="tool" onclick="plus()">+</li> 
      <li class="tool" onclick="minus()">-</li> 
      <li onclick="command(0)">0</li> 
      <li onclick="dzero()">00</li> 
      <li onclick="dot()">.</li> 
      <li class="tool" onclick="persent()">%</li> 
      <li class="tool" onclick="equal()">=</li> 
    </ul> 
  </div> 
  <div id="calcu-foot"> 
  <span id="note"></span> 
  <span class="welcome">欢迎使用javascript计算器!
  <a href="" target="_blank">反馈</a>
  </span> 
  </div> 
</form> 
</div> 
</body>

计算器图形展示

你可能感兴趣的:(JavaScript,代码,实例)