jQuery 计算器_计算器jq-CSDN博客

本文链接：https://blog.csdn.net/qq_33808550/article/details/59492682

/*CSS样式*/

#calculate{
    display: inline-block;
    padding: 3px 7px 10px;
    font-size: 14px;
    line-height: 30px;
    outline: none;
    border-radius: 3px;
    margin: 5px;
    background-color: #31b0d5;
    border: 1px solid #d2d2d2;
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
}
#calculate #calculate_show{
    position: relative;
    width: 220px;
    padding: 10px;
    margin: 5px;
    height: 80px;
    background-color: #FFFFFF;
    border-radius: 3px;
}
#calculate input[type='button']{
    text-align: center;
    cursor: pointer;
    width: 40px;
    height: 36px;
    border-radius: 3px;
    box-shadow: 0 4px rgba(0,0,0,0.2);
    background-color: white;
    border: transparent;
    margin: 5px;
    user-select: none;
    transition: all 0.2s ease;
}
#calculate input[type='button']:hover{
    background-color: #9c89f6;
    box-shadow: 0 4px #6b54d3;
    color: white;
}
#calculate input[type='text']{
    font-size: 20px;
    line-height: 40px;
    text-align: right;
    width: 100%;
    height: 50%;
    border: none;
    outline: none;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计数器</title>
    <link rel="stylesheet" href="calculate.css">
</head>
<body>
<div></div>
</body>
</html>
<script src="../jquery-3.1.0.min.js"></script>
<script src="calculate.js"></script>
<script>
    $("div").calculate();
</script>

/*计算器JS插件*/

/**
 * Created by Hack on 2017/2/7.
 */
// 创建插件
jQuery.fn.extend({
    calculate : function () {
        var calculate_html = load_calculate();
        $(this).append(calculate_html);
    }
});
// 加载计算器的按钮
function load_calculate(){
    var cal_cli = ['7','8','9','←','C','4','5','6','×','÷','1','2','3','+','-','0','00','.','%','='];
    var calculate_html = "<div id='calculate'><div id='calculate_show'><input type='text' id='show_one' readonly><br><input type='text' id='show_two' readonly></div>";
    for(var i=0;i<cal_cli.length;i++){
        if(i%5==0 && i!=0) calculate_html += "<br>";
        calculate_html += "<input type='button' οnclick='click_num(this)' value='"+cal_cli[i]+"'>" ;
    }
    calculate_html += "</div>";
    return calculate_html;
}
// 判断算法
var n_judge = 0;
// 判断点
var d_judge = 0;
// 计算按钮点击
function click_num(obj) {
    var num = $("#show_two");
    var show_num = $("#show_one");
    // 等于
    if(obj.value=="="){
        show_num.val(num.val());
        var transition_num = num.val().replace(/×/,'*').replace(/÷/,'/');
        var judge =num.val().substr(0,1);
        num.val(eval(transition_num));
    }
    // 清空
    else if(obj.value=="C"){
        num.val("");
        show_num.val("");
    }
    // 删除
    else if(obj.value=="←"){
        num.val(num.val().substring(0,num.val().length-1));
    }
    // 加减乘除 百分比
    else if(obj.value=="×" || obj.value=="÷"  || obj.value=="+" || obj.value=="÷" || obj.value=="-" || obj.value=="%"){
        if(n_judge==0){
            num.val(num.val()+obj.value);
            n_judge=1;
        }else{
            num.val(num.val().substring(0,num.val().length-1)+obj.value);
        }
        d_judge=0;
    }
    // 点
    else if(obj.value=="."){
        if(d_judge==0){
            num.val(num.val()+obj.value);
            d_judge=1;
        }
    }
    // 数字
    else{
        n_judge = 0;
        num.val(num.val()+obj.value)
    }
}