2020-12-15

程序员文章站 2024-01-29 10:30:10

...

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>jQuery计算器</title>
        <link rel="stylesheet" href="style.css" media="screen" type="text/css" />

    </head>
    <body>

        <div id="container">
            <div id="the-calculator">
                <div id="the-display">
                    <form name="calculator">
                        <span id="total">0</span>
                    </form>
                </div>
                <div id="the-buttons">
                    <div class="button-row clearfix">
                        <button id="calc_clear" value="C/E" >C/E</button>
                        <button id="calc_back" value="&larr;" >&larr;</button>
                        <button id="calc_neg" value="-/+" >-/+</button>
                        <button class="calc_op" value="/" >&divide;</button>
                    </div>
                    <div class="button-row clearfix">
                        <button class="calc_int" value="7" >7</button>
                        <button class="calc_int" value="8" >8</button>
                        <button class="calc_int" value="9" >9</button>
                        <button class="calc_op" value="*" >&times;</button>
                    </div>
                    <div class="button-row clearfix">
                        <button class="calc_int" value="4" >4</button>
                        <button class="calc_int" value="5" >5</button>
                        <button class="calc_int" value="6" >6</button>
                        <button class="calc_op" value="-" >-</button>
                    </div>
                    <div class="button-row clearfix">
                        <button class="calc_int" value="1" >1</button>
                        <button class="calc_int" value="2" >2</button>
                        <button class="calc_int" value="3" >3</button>
                        <button class="calc_op" value="+" >+</button>
                    </div>
                    <div class="button-row clearfix">
                        <button id="calc_zero" class="calc_int" value="0" >0</button>
                        <button id="calc_decimal" value="." >.</button>
                        <button id="calc_eval" value="=" >=</button>
                    </div>
                    <div id="extra-buttons" class="button-row">
                        <button id="calc_denom" value="1/x" ><span class="denominator"><span class="denom-top">1</span><span class="denom-slash">/</span><span class="denom-btm">x</span></span></button>
                        <button id="calc_sqrt" value="&radic;" >&radic;</button>
                        <button id="calc_square" value="x2" >x<span class="exponent">2</span></button>
                        <button id="calc_powerof" class="calc_op" value="^" >y<span class="exponent">x</span></button>
                    </div>
                </div>
            </div>
            <div id="the-results">
                <ul id="results_list"><li id="result_default">Memory is Empty</li></ul>
                <button type="button" id="result_clear">清除</button>
            </div>
        </div>
        <script src="jquery-3.3.1.min.js"></script>
        <script src="index.js"></script>
    </body>
</html>

/*
 ** global vars
 */

var a = 0,
        b = 0,
        is_a = true,
        is_b = false,
        o = 'nil',
        answer = 0,
        first_a = true,
        first_b = true,
        is_submission = false,
        soft_sub = false,
        display = jQuery('#total');



/*
 ** tool functions
 */

// console.log
function write(x) {
    console.log(x);
}
// add int to current display value
function changeDisplayVal(i) {
    display.text(display.text() + i);
}
// make * into ×
function  visOps(x) {
    if (x === '*') {
        // return 'u00D7';
        return '×';
    } else if (x === '/') {
        // return 'u00F7';
        return '÷';
    } else {
        return x;
    }
}
// set display value
function setDisplayVal(x) {
    display.text(visOps(x));
}
// make touch animation
function animateButton(obj) {
    var button = obj.addClass('hovering');
    setTimeout(function () {
        button.removeClass('hovering');
    }, 100);
}

/*
 ** operation functions
 */

// setting a
function set_a(i) {
    if (is_a) {
        // nothing if a duplicate decimal
        if (i === '.' && a.toString().indexOf('.') !== -1) {
            write('Duplicate Decimal');
            i = '';
        } else if (i === '.' && first_a) {
            i = '0.';
        }
        // first_a time, we need to clear the display
        if (first_a === true) {
            if (i === '0') {
                i = '';
            } else {
                // set display value
                setDisplayVal(i);
                // no longer first_a
                first_a = false;
            }
        } else {
            // add int to current display value
            changeDisplayVal(i);
        }

        a = display.text();

        write('Set "a" to ' + a);
    }
}

// setting b
function set_b(i) {
    if (!is_a) {
        // nothing if a duplicate decimal
        if (i === '.' && b.toString().indexOf('.') !== -1) {
            write('Duplicate Decimal!');
            i = '';
        } else if (i === '.' && first_b) {
            i = '0.';
        }
        // first_b time, we need to clear the display
        if (first_b === true) {
            if (i === '0') {
                i = '';
            } else {
                // set display value
                setDisplayVal(i);
                // no longer first_b
                first_b = false;
            }
        } else {
            // add int to current display value
            changeDisplayVal(i);
        }
        // set b to current display Value
        b = display.text();

        write('Set "b" to ' + b);
    }
}

// looping calculator
function loop_calc(answer) {
    write('Loop Calculator');

    a = answer;
    b = 0;
    answer = 0;
    // set display value
    setDisplayVal(a);
}

// setting operator
function set_o(op) {
    // if answer, loop the calculator to prepare for b
    if (is_submission) {
        loop_calc(display.text());
        is_submission = false;
    }
    // if new op is submitting calc
    if (!first_b) {
        softsubmit_calc();
    }

    // replace or set operator in display
    setDisplayVal(op);
    // replace or set global operator
    o = op;

    if (is_a) {
        is_a = false;
    }
    if (!is_b) {
        is_b = true;
    }

    write('Set "o" to ' + o);
}

// soft submit calc
function softsubmit_calc() {
    // evaluate equation
    var preCalc = eval(a + '' + o + '' + b);
    // parse float to 12
    answer = parseFloat(preCalc.toPrecision(12));

    // submit answer to display
    display.text(answer);

    // reset first_b to true
    first_b = true;

    // post result
    newResult(a, o, b, answer);

    write(a + ' ' + o + ' ' + b + ' = ' + answer);

    a = answer;
    b = 0;
    o = o;
    // set display value
    setDisplayVal(o);
    is_a = false;
    is_b = true;

    first_b = true;

    soft_sub = true;

    write('Soft Submission');
}

// submit calculator
function submit_calc() {
    write('Submission');
    if (first_b === false) {
        var preCalc = 0;
        if (o === "^") {
            // evaluate equation
            preCalc = Math.pow(a, b);
        } else {
            // evaluate equation
            preCalc = eval(a + '' + o + '' + b);
        }
        // parse float to 12
        answer = parseFloat(preCalc.toPrecision(12));

        // submit answer to display
        display.text(answer);
        // display is now the answer
        is_submission = true;
        // reset first_b to true
        first_b = true;

        // post result
        newResult(a, o, b, answer);

        write(a + ' ' + o + ' ' + b + ' = ' + answer);
    } else {
        write("You can't do that yet");
    }
}

// negging value
function neg() {
    display.text(display.text() * -1);
    if (is_submission) {
        a = a * -1;
    } else {
        if (is_a) {
            a = a * -1;
            setDisplayVal(a);
        } else {
            b = b * -1;
            setDisplayVal(b);
        }
    }
}

// resetting calculator
function reset_calc() {
    a = 0;
    b = 0;
    o = 'nil';
    answer = 0;
    is_a = true;
    is_b = false;
    first_a = true;
    first_b = true;
    is_submission = false;
    soft_sub = false;
    display.text(0);
    // reset display value
    setDisplayVal(0);
    write('Calculator Reset');
}

// backspacing value
function backspace() {
    if (display.text() !== '' && display.text() !== '0') {
        display.text(display.text().substring(0, display.text().length - 1));
        if (is_a === true) {
            a = parseFloat(a.toString().substring(0, a.toString().length - 1));
        } else {
            b = parseFloat(b.toString().substring(0, b.toString().length - 1));
        }
    } else {
        write('Nothing Left to Backspace');
    }
}

// set value to memory value
function memory(i) {
    if (is_submission) {
        loop_calc(i);
    } else if (is_a) {
        loop_calc(i);
    } else {
        set_b(i);
    }
    answer = a;
}



/*
 ** logging to memory console
 */

function newResult(a, o, b, answer) {
    var results = $('#results_list');
    var result = '' +
            '<li class="result"><span class="equation">' + a + ' ' + visOps(o) + ' ' + b + ' </span>' +
            '<span class="answer">' + answer + '</span> <span class="use"><a class="calc_use" href="#">Use</a></span></li>';
    results.prepend(result).children('li').fadeIn(200);
    if ($('#result_default')) {
        $('#result_default').remove();
    }
    // click use
    $('.calc_use').off('click').on('click', function () {
        var i = jQuery(this).parent('.use').siblings('.answer').text();
        $(this).parents('.result').animate({'opacity': '0.5'}, 200).animate({'opacity': '1'}, 200);
        $('#total').animate({'opacity': '0.5'}, 200).animate({'opacity': '1'}, 200);
        memory(i);
        return false;
    });
}



/*
 ** complex functions
 */

function sqrt(i) {
    write('Square Root');
    var s = Math.sqrt(i);
    answer = s;
    write('u221A' + i + ' = ' + s);
    loop_calc(s);
    newResult('', '√', i, s);
    // submit answer to display
    display.text(answer);
    // display is now the answer
    is_submission = true;
    // reset first_b to true
    first_b = true;
}

function square(i) {
    write('Square');
    var s = i * i;
    answer = s;
    write(i + ' u005E 2 = ' + s);
    loop_calc(s);
    newResult(i, ' &#94; 2', '', s);
    // submit answer to display
    display.text(answer);
    // display is now the answer
    is_submission = true;
    // reset first_b to true
    first_b = true;
}

function denom(i) {
    write('Denominator');
    var s = 1 / i;
    answer = s;
    write('1 / ' + i + ' = ' + s);
    loop_calc(s);
    newResult(1, ' / ', i, s);
    // submit answer to display
    display.text(answer);
    // display is now the answer
    is_submission = true;
    // reset first_b to true
    first_b = true;
}



/*
 ** Usage - Click Events
 */

// click integers
$('.calc_int, #calc_decimal').each(function () {
    $(this).click(function () {
        var value = jQuery(this).val();
        if (is_submission === false) {
            if (is_a === true) {
                set_a(value);
            } else {
                set_b(value);
            }
        } else {
            reset_calc();
            set_a(value);
        }
    });
});
// click operators
$('.calc_op').each(function () {
    $(this).click(function () {
        var value = jQuery(this).val();
        set_o(value);
    });
});
// click equals
$('#calc_eval').click(function () {
    submit_calc();
});
// click clear
$('#calc_clear').click(function () {
    reset_calc();
});
// click neg
$('#calc_neg').click(function () {
    neg();
});
// click backspace
$('#calc_back').click(function () {
    backspace();
});
// click square root
$('#calc_sqrt').click(function () {
    if (display.text() !== '0') {
        if (is_submission) {
            sqrt(answer);
        } else if (is_a) {
            sqrt(a);
        }
    }
    return false;
});
// click square
$('#calc_square').click(function () {
    if (display.text() !== '0') {
        if (is_submission) {
            square(answer);
        } else if (is_a) {
            square(a);
        }
    }
    return false;
});
// click denominator
$('#calc_denom').click(function () {
    if (display.text() !== '0') {
        if (is_submission) {
            denom(answer);
        } else if (is_a) {
            denom(a);
        }
    }
    return false;
});
// reset console
$('#result_clear').click(function () {
    $('#results_list').children('li').fadeOut(200, function () {
        $(this).remove();
    });
    $('#results_list').prepend('<li id="result_default">Memory is Empty</li>');
    return false;
});
/*
 ** Key Events
 */

// key press for integers and operators
$(document).keypress(function (e) {
    // the character code
    var charCode = e.which;
    // the key
    var key = String.fromCharCode(charCode);

    // key integers & decimal
    if (charCode >= 46 && charCode <= 58 && charCode !== 47) {
        if (!is_submission) {
            if (is_a) {
                set_a(key);
            } else {
                set_b(key);
            }
        } else if (soft_sub) {
            set_b(key);
        } else {
            reset_calc();
            set_a(key);
        }
    }

    // key operators
    if (charCode >= 42 && charCode <= 45 && charCode !== 44 || charCode === 47) {
        set_o(key);
    }

    // key equals
    if (charCode === 61) {
        submit_calc();
    }

    // animate the corrosponding button
    $('button').each(function () {
        var value = jQuery(this).val();
        if (value === key) {
            animateButton($(this));
        }
    });

});

// keydown for backspace and return
$(document).keydown(function (e) {

    // the character code
    var charCode = e.which;

    // backspace
    if (charCode === 8) {
        backspace();
        animateButton($('#calc_back'));
        return false;
    }

    // clear
    if (charCode === 12) {
        reset_calc();
        animateButton($('#calc_clear'));
        return false;
    }

    // return
    if (charCode === 13) {
        submit_calc();
        animateButton($('#calc_eval'));
        return false;
    }

});

css

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

#container {
    width: 540px;
    margin:auto;
    font-family: 'Helvetica Neue LT Pro', 'Helvetica', sans-serif;
}

a {
    text-decoration: none;
    color: black;
}

#the-calculator {
    font-size: 1.2em;
    display: block;
    /*width: 400px;*/
    width: 58%;
    float: left;
    margin: 0;
    padding: 20px;
    border: 2px solid #e0e0e0;
    background: #00544b;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00544b', endColorstr='#003b34', GradientType=0);
    border-radius: 4px;
    background-clip: padding-box;
}
#the-calculator button,
#the-calculator input,
#the-calculator #total {
    font-size: 1em;
    display: inline-block;
    position: relative;
    padding: 12px;
    font-family: 'Helvetica Neue LT Pro', 'Helvetica', sans-serif;

}
#the-calculator button .exponent,
#the-calculator input .exponent,
#the-calculator #total .exponent {
    font-size: 0.6em;
    position: absolute;
}
#the-calculator button .denominator,
#the-calculator input .denominator,
#the-calculator #total .denominator {
    position: relative;
}
#the-calculator button .denominator .denom-top,
#the-calculator input .denominator .denom-top,
#the-calculator #total .denominator .denom-top {
    font-size: 0.75em;
    position: absolute;
    left: -8px;
}
#the-calculator button .denominator .denom-slash,
#the-calculator input .denominator .denom-slash,
#the-calculator #total .denominator .denom-slash {
    padding: 0px 2px;
}
#the-calculator button .denominator .denom-btm,
#the-calculator input .denominator .denom-btm,
#the-calculator #total .denominator .denom-btm {
    font-size: 0.75em;
    position: absolute;
    bottom: 0px;
}
#the-calculator #the-display {
    width: 100%;
}
#the-calculator #the-display #total {
    width: 98%;
    margin: 0 auto 8px;
    display: block;
    border-radius: 4px;
    background-clip: padding-box;
    font-size: 1.2em;
    color: #2f2f2f;
    text-shadow: 1px 1px 0px #fff;
    background: #fff;
    text-align: right;
}
#the-calculator #the-buttons {
    width: 100%;
}
#the-calculator #the-buttons #extra-buttons {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #00544b;
}
#the-calculator #the-buttons .button-row {
    width: 100%;
    zoom: 1;
}
#the-calculator #the-buttons .button-row:before,
#the-calculator #the-buttons .button-row:after {
    content: "";
    display: table;
}
#the-calculator #the-buttons .button-row:after {
    clear: both;
}
#the-calculator #the-buttons .button-row:before,
#the-calculator #the-buttons .button-row:after {
    content: "";
    display: table;
}
#the-calculator #the-buttons .button-row:after {
    clear: both;
}
#the-calculator #the-buttons .button-row button {
    width: 23%;
    margin: 1%;
    float: left;
    border: none;
    background: #006e62;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#006e62', endColorstr='#00544b', GradientType=0);
    border-style: solid;
    border-color: #333;
    border-width: 0px 1px 1px 0px;
    color: #f0f0f0;
    cursor: pointer;
    text-shadow: -1px -1px rgba(0, 0, 0, 0.3);
    /*    -webkit-border-radius: 4px;
        -moz-border-radius: 4px;*/
    border-radius: 4px;
    /*    -moz-background-clip: padding-box;
        -webkit-background-clip: padding-box;*/
    background-clip: padding-box;
}
#the-calculator #the-buttons .button-row button:hover,
#the-calculator #the-buttons .button-row button.hovering {
    border-width: 1px 0px 0px 1px;
    opacity: 0.7;
    filter: alpha(opacity=70);
}
#the-calculator #the-buttons #calc_zero {
    width: 48%;
}
#the-calculator #the-buttons #calc_clear {
    background: #103f3a;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#103f3a', endColorstr='#0d332f', GradientType=0);
}
#the-calculator #the-buttons #calc_back {
    background: #103f3a;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#103f3a', endColorstr='#0d332f', GradientType=0);
}
#the-calculator #the-buttons #calc_eval {
    background: #dfdfdf;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#cdcdcd', GradientType=0);
    color: #00544b;
    text-shadow: 1px 1px 0px #fff;
}
#the-results {
    width: 40%;
    float: right;
    margin: 0;
    border: 2px solid #e0e0e0;
    background: #00544b;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00544b', endColorstr='#003b34', GradientType=0);
    border-radius: 4px;
    background-clip: padding-box;
    box-sizing: border-box;
    position: relative;
}
#the-results #result_clear {
    position: absolute;
    right: 0;
    top: 105%;
}
#the-results ul {
    height: 340px;
    overflow-y: scroll;
    list-style: none;
    padding: 0;
    margin: 0 ;
    background: rgba(0, 0, 0, 0.1);
    box-shadow: inset 0px 0px 64px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(0, 0, 0, 0.2);
}
#the-results ul li {
    font-size: 0.8em;
    width: 100%;
    box-sizing: border-box;
    height: 40px;
    line-height: 40px;
}
#the-results ul li#result_default {
    text-align: center;
    color: #a9a9a9;
    font-style: italic;
    font-weight: 200;
}
#the-results ul li.result {
    display: none;
    font-size: 0.8em;
    color: #f9f9f9;
    background: rgba(255, 255, 255, 0.05);
    zoom: 1;
    position: relative;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
#the-results ul li.result:before,
#the-results ul li.result:after {
    content: "";
    display: table;
}
#the-results ul li.result:after {
    clear: both;
}
#the-results ul li.result:before,
#the-results ul li.result:after {
    content: "";
    display: table;
}
#the-results ul li.result:after {
    clear: both;
}
#the-results ul li.result:nth-child(even) {
    background: rgba(255, 255, 255, 0.15);
}
#the-results ul li.result:nth-child(even) .answer {
    background: #103f3a;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#103f3a', endColorstr='#0d332f', GradientType=0);
}
#the-results ul li.result .equation,
#the-results ul li.result .answer {
    display: inline-block;
    padding: 0px 12px;
    box-sizing: border-box;
    height: 60px;
    line-height: 40px;
}
#the-results ul li.result .equation {
    float: left;
    height: 100%;
    font-style: italic;
}
#the-results ul li.result .answer {
    position: absolute;
    right: 52px;
    top: 0;
    height: 100%;
    background: #0e3733;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0e3733', endColorstr='#0b2b27', GradientType=0);
}
#the-results ul li.result .use {
    height: 100%;
}
#the-results ul li.result .use a {
    background: #008779;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#008779', endColorstr='#006359', GradientType=0);
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    display: block;
    padding: 0px 8px;
    width: 52px;
    text-align: center;
    text-decoration: none;
    margin: 0;
    font-size: 0.9em;
    cursor: pointer;
    border: none;
    color: #f9f9f9;
    text-shadow: -1px -1px rgba(0, 0, 0, 0.2);
}
#the-results ul li.result .use a:hover,
#the-results ul li.result .use aactive {
    opacity: 0.7;
    filter: alpha(opacity=70);
}