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

calculator.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" >
  <head>
    <meta charset="utf-8">
    <meta name="Generator" content="">
    <meta name="Keywords" content="">
    <meta name="author" content="">
    <title>计算器</title>
    <link th:href="@{/static/css/calculator/calculator.css}" rel="stylesheet">
  </head>
  <body>
    <div id="calculator">
      <div id="calcu-header"><h1>计算器</h1></div>
      <div id="calcu-screen">
        <input type="text"name="numScreen" id="result" class="screen" value="0" onfocus="this.flur();"disabled="disabled"/>
      </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="clearzero()">C</li> 
          <li onclick="command(4)">4</li>
          <li onclick="command(5)">5</li>
          <li onclick="command(6)">6</li>
          <li class="tool" onclick="op('*')">×</li> 
          <li class="tool" onclick="op('/')">÷</li> 
          <li onclick="command(1)">1</li>
          <li onclick="command(2)">2</li>
          <li onclick="command(3)">3</li>
          <li class="tool" onclick="op('+')">+</li> 
          <li class="tool" onclick="op('-')">-</li>
          <li onclick="command(0)">0</li> 
          <li onclick="dzero()">00</li> 
          <li onclick="dot()">.</li> 
          <li class="tool" onclick="getPercent('%')">%</li>
          <li class="tool D06A15" onclick="equal()">=</li> 

        </ul>
        <div id="audioBox"></div>
      </div>

    </div>
    <script type="text/javascript" th:src="@{/static/js/calculator/calculator.js}"></script>
  </body>
</html>

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;
}

calculator.gif

本文参阅网上资料，经过修改与优化完成，如有bug欢迎指出。

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

calculator.html

calculator.css

calculator.js

猜你喜欢