zoukankan html css js c++ java

JavaScript仿计算器案例源代码

效果图

index.html

<!DOCTYPE html>
<html>
<head>
    <title></title>
  <link rel="stylesheet" type="text/css" href="calc.css">
  <script type="text/javascript" src="calc.js"></script>
</head>
<body onload="init()">
     <div id="div1">    
         <div id="div2">
             <input type="text" name="num" id="num" />
         </div>
         <div id="div3">
             <input type="button" value="c" name="" id=""/>
             <input type="button" value="←" name="" id=""/>
             <input type="button" value="+/-" name="" id=""/>
             <input type="button" value="/" name="" id=""/>
             <input type="button" value="1" name="" id="n1"/>
             <input type="button" value="2" name="" id=""/>
             <input type="button" value="3" name="" id=""/>
             <input type="button" value="*" name="" id=""/>    
             <input type="button" value="4" name="" id=""/>
             <input type="button" value="5" name="" id=""/>
             <input type="button" value="6" name="" id=""/>
             <input type="button" value="-" name="" id=""/>
             <input type="button" value="7" name="" id=""/>
             <input type="button" value="8" name="" id=""/>
             <input type="button" value="9" name="" id=""/>
             <input type="button" value="+" name="" id=""/>
             <input type="button" value="0" name="" id=""/>
             <input type="button" value="." name="" id=""/>
             <input type="button" value="=" name="" id=""/>
             <input type="button" value="m" name="" id="imooc"/>
         </div>
     </div>
</body>
</html>

calc.css

*{
    margin:0px;
    padding:0px;
}
div{
    width: 170px;
}
#div1{
    top:60px;
    left: 100px;
    position: absolute;
}
input[type="button"]{
    width: 30px;
    margin-right: 5px;

}
input[type="text"]{
    width: 152px;
    text-align: right;
    background-color: #fff;
    border: 1px solid;
    padding-right: 5px;
    box-sizing: border-box;
}

input[type="button"]:hover{
    background-color: yellow;
    border: 1px solid;
}

calc.js

function init(){
    var num=document.getElementById("num");
    num.value=0;
    num.disabled="disabled";

    var oButton=document.getElementsByTagName("input");
    var btn_num1;
    var fh;
    for(var i=0;i<oButton.length;i++){
        oButton[i].onclick=function(){
            if(isNumber(this.value)){
                if(isNull(num.value)){
                    num.value=this.value;
                }else{
                    num.value=num.value+this.value;
                }
            }else{
                var btn_num=this.value;
                
                switch(btn_num){
                    case "+":
                        btn_num1=Number(num.value);
                        num.value=0;
                        fh="+";
                        break;
                    case "-":
                        btn_num1=Number(num.value);
                        num.value=0;
                        fh="-";
                        break;
                    case "*":
                        btn_num1=Number(num.value);
                        num.value=0;
                        fh="*";
                        break;
                    case "/":
                        btn_num1=Number(num.value);
                        num.value=0;
                        fh="/";
                        break;
                    case ".":
                        num.value=dec_number(num.value);
                        break;
                    case "←":
                        num.value=back(num.value);
                        break;
                    case "c":
                        num.value="0";
                        break;
                    case "+/-":
                        num.value=sign(num.value);
                        break;
                    case "=":
                        switch(fh){
                            case "+":
                              num.value=btn_num1+Number(num.value);
                              break;
                            case "-":
                               num.value=btn_num1-Number(num.value);
                               break;
                            case "*":
                               num.value=btn_num1*Number(num.value);
                               break;
                            case "/":
                               if(Number(num.value)==0){
                                       alert("除数不能是0");
                                     num.value=0;
                               }else{
                                     num.value=btn_num1/Number(num.value);
                               }
                               
                               break;
                        }
                        break;
                }
            }
        }
    }
}
/*正负号*/
function sign(n){
   n=Number(n)*-1;
   return n;
}
/*退位键*/
function back(n){
   n=n.substr(0,n.length-1);
   if(isNull(n)){
         n="0";
   }
   return n;
}
/*小数点*/
function dec_number(n){
   if(n.indexOf(".")==-1){
      n=n+".";
   }
   return n;
}
/*验证文本框是否为空或者0*/
function isNull(n){
   if(n=="0" || n.length==0){
       return true;
   }else{
          return false;
   }
}

function isNumber(n){
  return  !isNaN(n);
}

查看全文

相关阅读:
Session共享的解决方案[转]
学习SAS_001_循环语句中读取数据文件
 如何让远程数据库中的1张表导入到本地数据库中
 SAS之COMPBL、DEQUOTE函数
 使用winzip命令行对文件打包压缩
 让每个单词的第一个字母自动大写
 For the distance calculation
SAS数据集转置
 Web开发/设计人员应当知道的15个网站
 你从没见过的 HTML5 动画效果

原文地址：https://www.cnblogs.com/chenyingying0/p/12179018.html