使用JavaScript制作一个简单的计算器

Posted by: NOTEPAD 2019年3月13日 Leave a comment

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8" />
    <title>JavaScript实现的简单计算器</title>
    <!--引入页面样式文件 -->
    <link rel="stylesheet" type="text/css" href="mr-style.css">
 
    <script language="javascript">
        var num=0;
        var result=0;
        var numshow="0";
        var operate=0; //判断输入状态的标志
        var calcul=0; //判断计算状态的标志
        var quit=0; //防止重复按键的标志
 
        //复原为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; //重置防止重复按键的标志
        }
        //验证是否为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>
</head>
<body>
<div id="mr-calculator">
    <div id="calcu-head"><h6>简单的计算器</h6></div>
    <form name="calculator" action="" method="get">
        <div id="calcu-screen">
            <!--显示窗口,避免键盘输入-->
            <input type="text" name="numScreen" class="screen" value="0" onfocus="this.blur();" />
        </div>
        <div >
            <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>
 
    </form>
</div>
</body>
</html>
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:16px;
}
#mr-calculator {
    width:480px;
    height:auto;
    overflow:hidden;
    margin:10px auto;
    border:#fff 1px solid;
    padding-bottom:10px;
    background-color:#f2f2f2;
}
#mr-calculator div {
    clear:both;
}
#mr-calculator ul{
    padding:0;
    margin:5px 35px;
    height:auto;
    overflow:hidden
}
#mr-calculator li{
    list-style:none;
    float:left;
    width:70px;
    height:32px;
    margin:5px;
    display:inline;
    line-height:32px;
    font-size:14px;
    background-color:#eaeaea;
}
#mr-calculator li.tool{
    background-color:#e2e2e2;
}
#mr-calculator li:hover{
    background-color:#f9f9f9;
    cursor:pointer;
}
#mr-calculator li:active{
    background-color:#fc0;
    cursor:pointer;
}
#mr-calculator li.tool:active{
    background-color:#d8e8ff;
    cursor:pointer;
}
#calcu-head {
    text-align:center;
    padding:10px 15px 5px;
}
span.imyeah {
    float:right;
    color:#ccc;
}
span.imyeah a{
    color:#ccc;
}
.screen{
    width:400px;
    height:24px;
    line-height:24px;
    padding:4px;
    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;
}