search.png
关于我
 menu.png
js 实现的计算器

一、HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="description" content="hw5">
        <meta name="author" content="le">
        <title>221600219_hw5</title>
        <link rel="stylesheet" type="text/css" href="./test.css" charset="utf-8">
        <script src="https://apps.bdimg.com/libs/jquery/1.8.3/jquery.min.js"></script>
        <script type="text/javascript" src="./test.js" charset="utf-8"></script>
    </head>
    <body>
        <hr />
        <h1>（1）一个JavaScript 计算器</h1>
        <hr />

        <form id="calculator" action="">
            <p>
                <input type="text" name="box" value="" id="result" disabled="disabled" />
            </p>
            <p id="bce">
                <input type="button" value="del" id="backspace" />
                <input type="button" value="CE" id="CE" />
                <input type="button" value="C" id="C" />
                <input type="button" value="(" id="le" />
                <input type="button" value=")" id="ri" />
            </p>
            <p id="nums">
                <input type="button" value="7" id="num7" />
                <input type="button" value="8" id="num8" />
                <input type="button" value="9" id="num9" />

                <br/>

                <input type="button" value="4" id="num4" />
                <input type="button" value="5" id="num5" />
                <input type="button" value="6" id="num6" />

                <br />

                <input type="button" value="1" id="num1" />
                <input type="button" value="2" id="num2" />
                <input type="button" value="3" id="num3" />

                <br />

                <input type="button" value="0" id="num0" />
                <input type="button" value="%" id="mod" />
                <input type="button" value="." id="point" />
            </p>
            <p id="operation">
                <input type="button" value="+" id="add" />
                <input type="button" value="-" id="sub" />
                <input type="button" value="*" id="mul" />
                <input type="button" value="/" id="div" />
            </p>
            <p id="get-result">
                <input type="button" value=" sin " id="sin" />
                <input type="button" value=" cos " id="cos" />
                <input type="button" value=" tan " id="tan" />
                <input type="button" value=" ln  " id="ln" />

                <br />

                <input type="button" value=" 2²" id="square" />
                <input type="button" value=" √ " id="sqrt" />
                <input type="button" value="1/x" id="recip" />
                <input type="button" value=" = " id="calculate" />
            </p>

        </form>

        <hr />
    </body>
</html>

二、CSS

body{
    width: 1000px;
    margin: 0 auto;
    padding: 100px 0;
}

/*

    计算器：

 */
#calculator{
    width: 620px;
    margin: 0 auto;
}
#calculator input{
    font-size: 20px;
    padding: 25px;
}
#result{
    width: 560px;
}
#bce input{
    width: 118px;
}
#nums input{
    width: 200px;
}
#operation input{
    width: 150px;
}
#get-result input{
    width: 150px;
}

三、js

$(document).ready(function(){
    load1()
})

var result = ""
var str = ""
function load1(){
    //实现计算器事件监听
    bceIt()
    addIt()
    showResult()
}
function bceIt(){
    $("#backspace").click(function(){
        str = $("#result").val().substr(0, str.length - 1)
        $("#result").val(str)
    })
    $("#CE").click(function(){
        $("#result").val("")
    })
    $("#C").click(function(){
        $("#result").val("")
    })
}
function addIt(){
    var jqs = ["#le", "#ri", "#nums input", "#operation input"]
    for (i in jqs){
        $(jqs[i]).click(function(){
            str = $("#result").val() + $(this).val()
            $("#result").val(str)
        })
    }
}
function showResult(){
    $("#get-result input").click(function(){
        var type = $(this).attr("id")
        try{
            result = eval(str)
        }catch(e){
            alert("请按正确格式输入运算！")
        }
        switch(type){
            case "sin":
                result = Math.sin(result)
                break
            case "cos":
                result = Math.cos(result)
                break
            case "tan":
                result = Math.tan(result)
                break
            case "ln":
                result = Math.log(result)
                break
            case "square":
                result = Math.pow(result, 2)
                break
            case "sqrt":
                result = Math.sqrt(result)
                break
            case "recip":
                result = 1.0 / result
                break
        }
        str = result
        $("#result").val(str)
    })
}

版权声明

知识共享许可协议 本文章由作者“衡于墨”创作，转载请注明出处，未经允许禁止用于商业用途

本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。
发布时间：2018年10月18日 14:53:23

评论区#

还没有评论哦，期待您的评论！

备案号： 闽ICP备19015193号-1 
关闭特效