html+css+js制作一个简易计算器

calculator.html

"-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
"http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" >
  
    "utf-8">
    "Generator" content="">
    "Keywords" content="">
    "author" content="">
    
    "@{/static/css/calculator/calculator.css}" rel="stylesheet">
  
  
    
"calculator">
      
"calcu-header">
计算器
      
"calcu-screen">
        type="text"name="numScreen" id="result" class="screen" value="0" onfocus="this.flur();"disabled="disabled"/>
      
      
"calcu-btn">
        

          
"command(7)">7
          
"command(8)">8
          
"command(9)">9
          
"tool" onclick="del()">←
 
          
"tool" onclick="clearzero()">C
 
          
"command(4)">4
          
"command(5)">5
          
"command(6)">6
          
"tool" onclick="op('*')">×
 
          
"tool" onclick="op('/')">÷
 
          
"command(1)">1
          
"command(2)">2
          
"command(3)">3
          
"tool" onclick="op('+')">+
 
          
"tool" onclick="op('-')">-
          
"command(0)">0
 
          
"dzero()">00
 
          
"dot()">.
 
          
"tool" onclick="getPercent('%')">%
          
"tool D06A15" onclick="equal()">=
 

        
        
"audioBox">
      

    
    
  

复制代码

calculator.css

@charset 'utf-8';

body{
    font-size:12px;
    font-family:"Times New Roman",Times,  serif:color:#555;
    text-align:center;
    background:#e2e2e2;
}
h6{
    margin:0;
    font-size:12px;
}
#calculator{
    width:94%;
    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:14.43%;
    margin:0.5%;
    display:inline;
    line-height:32px;
    font-size:32px;
    background:#eaeaea;
    padding:2.28%;
}
#calculator li.tool{
    background:#738FD8;
}
#calculator li.D06A15{
    background-color:#D06A15;
}
#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;
}
.screen {
    width:97%;
    height:42px;
    line-height:42px;
    padding:4px;
    border:#e6e6e6 1px solid;
    border-bottom:#f2f2f2 1px solid;
    border-right:#f2f2f2 1px solid;
    margin:10px auto;
    text-align:right;
    padding-left:20px;
    font-size:3em;
    color:#999;
    direction:ltr;
}
复制代码

calculator.js

var resultDom=document.getElementById("result");
var dotFlag=true;
var opFlag=true;
var equFlag=true;
function command(num){
    if(!equFlag){
        resultDom.value="0";
        equFlag=true;
    }
    opFlag=true;
    var str=resultDom.value;
    str=(str=="0"?"":str);
    resultDom.value=str+num;
};

//+ - * /
function op(op){
    if(opFlag){
        resultDom.value+=op;
        dotFlag=true;
        opFlag=false;
        equFlag=true;
    }
};

//小数点
function dot(){
    if(dotFlag){
        //拿到文本框的值
        var num=resultDom.value;
        resultDom.value=num+".";
        dotFlag=false;
    }
}
//运算
function equal(){
    var num=resultDom.value;
    resultDom.value=eval(num);
    var r=resultDom.value;
    dotFlag=(r.indexOf(".")==-1?true:false);
    opFlag=true;
    equFlag=false;
}
function dzero(){
    var num = resultDom.value;//获取文本框的值
    if(num=="0"){
        return;//如果等返回000
    }
    var str = resultDom.value;
    resultDom.value = str + "00";
};

//清空
function clearzero(){
    resultDom.value="0";
    opFlag=true;
    dotFlag=true;
}

//后退
function del(){
    var val=resultDom.value;
    if(!val){return;}
    var str=val.substring(0,val.length-1);
    if(str && /[\.|\+|\-|\*|\/|\%]$/.test(str)){
        resultDom.value = str.replace(/[\.|\+|\-|\*|\/|\%]$/,"")||0;
        dotFlag = true;//小数点锁打开
    }else{
        resultDom.value = str||0;
    }
}

//百分号
function getPercent(num) {
    var val=resultDom.value;
    var add=val.indexOf("+");
    var sub=val.indexOf("-");
    var mul=val.indexOf("*");
    var divide=val.indexOf("/");
    var max = Math.max(add,sub,mul,divide);
    var lastStr = val.substring(max+1,val.length);
    var beforeStr = val.substring(0,max+1);
    var percent = lastStr/100;
    resultDom.value = beforeStr+percent;
}
复制代码

转载于:https://juejin.im/post/5c481c50f265da616720a0c1