style.css
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#container {
width: 540px;
margin: 0 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;
background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #003b34), color-stop(1, #00544b));
background: -ms-linear-gradient(bottom, #003b34, #00544b);
background: -moz-linear-gradient(center bottom, #003b34 0%, #00544b 100%);
background: -o-linear-gradient(#00544b, #003b34);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00544b', endColorstr='#003b34', GradientType=0);
-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 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;
-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;
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;
background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #00544b), color-stop(1, #006e62));
background: -ms-linear-gradient(bottom, #00544b, #006e62);
background: -moz-linear-gradient(center bottom, #00544b 0%, #006e62 100%);
background: -o-linear-gradient(#006e62, #00544b);
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;
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
-webkit-opacity: 0.7;
opacity: 0.7;
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);
filter: alpha(opacity=70);
}
#the-calculator #the-buttons #calc_zero {
width: 48%;
}
#the-calculator #the-buttons #calc_clear {
background: #103f3a;
background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #0d332f), color-stop(1, #103f3a));
background: -ms-linear-gradient(bottom, #0d332f, #103f3a);
background: -moz-linear-gradient(center bottom, #0d332f 0%, #103f3a 100%);
background: -o-linear-gradient(#103f3a, #0d332f);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#103f3a', endColorstr='#0d332f', GradientType=0);
}
#the-calculator #the-buttons #calc_back {
background: #103f3a;
background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #0d332f), color-stop(1, #103f3a));
background: -ms-linear-gradient(bottom, #0d332f, #103f3a);
background: -moz-linear-gradient(center bottom, #0d332f 0%, #103f3a 100%);
background: -o-linear-gradient(#103f3a, #0d332f);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#103f3a', endColorstr='#0d332f', GradientType=0);
}
#the-calculator #the-buttons #calc_eval {
background: #dfdfdf;
background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #cdcdcd), color-stop(1, #dfdfdf));
background: -ms-linear-gradient(bottom, #cdcdcd, #dfdfdf);
background: -moz-linear-gradient(center bottom, #cdcdcd 0%, #dfdfdf 100%);
background: -o-linear-gradient(#dfdfdf, #cdcdcd);
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;
/*min-width: 400px;*/
margin: 0;
/*padding: 20px;*/
border: 2px solid #e0e0e0;
background: #00544b;
background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #003b34), color-stop(1, #00544b));
background: -ms-linear-gradient(bottom, #003b34, #00544b);
background: -moz-linear-gradient(center bottom, #003b34 0%, #00544b 100%);
background: -o-linear-gradient(#00544b, #003b34);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00544b', endColorstr='#003b34', GradientType=0);
-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;
-ms-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-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);
-webkit-box-shadow: inset 0px 0px 64px rgba(0, 0, 0, 0.2);
-moz-box-shadow: inset 0px 0px 64px rgba(0, 0, 0, 0.2);
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%;
-ms-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
height: 40px;
line-height: 40px;
}
#the-results ul li#result_default {
/*padding-left: 24px;*/
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;
background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #0d332f), color-stop(1, #103f3a));
background: -ms-linear-gradient(bottom, #0d332f, #103f3a);
background: -moz-linear-gradient(center bottom, #0d332f 0%, #103f3a 100%);
background: -o-linear-gradient(#103f3a, #0d332f);
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;
-ms-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
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;
background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #0b2b27), color-stop(1, #0e3733));
background: -ms-linear-gradient(bottom, #0b2b27, #0e3733);
background: -moz-linear-gradient(center bottom, #0b2b27 0%, #0e3733 100%);
background: -o-linear-gradient(#0e3733, #0b2b27);
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;
background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #006359), color-stop(1, #008779));
background: -ms-linear-gradient(bottom, #006359, #008779);
background: -moz-linear-gradient(center bottom, #006359 0%, #008779 100%);
background: -o-linear-gradient(#008779, #006359);
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 {
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
-webkit-opacity: 0.7;
opacity: 0.7;
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);
filter: alpha(opacity=70);
}
index.js
/*
** 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 = jQuery('#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 ( jQuery('#result_default') ) {
jQuery('#result_default').remove();
}
// click use
jQuery('.calc_use').off('click').on('click', function() {
var i = jQuery(this).parent('.use').siblings('.answer').text();
jQuery(this).parents('.result').animate({'opacity': '0.5'},200).animate({'opacity': '1'},200);
jQuery('#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,' ^ 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
jQuery('.calc_int, #calc_decimal').each(function() {
jQuery(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
jQuery('.calc_op').each(function() {
jQuery(this).click(function() {
var value = jQuery(this).val();
set_o(value);
});
});
// click equals
jQuery('#calc_eval').click(function() {
submit_calc();
});
// click clear
jQuery('#calc_clear').click(function() {
reset_calc();
});
// click neg
jQuery('#calc_neg').click(function() {
neg();
});
// click backspace
jQuery('#calc_back').click(function() {
backspace();
});
// click square root
jQuery('#calc_sqrt').click(function() {
if ( display.text() !== '0' ) {
if ( is_submission ) {
sqrt(answer);
} else if ( is_a ) {
sqrt(a);
}
}
return false;
});
// click square
jQuery('#calc_square').click(function() {
if ( display.text() !== '0' ) {
if ( is_submission ) {
square(answer);
} else if ( is_a ) {
square(a);
}
}
return false;
});
// click denominator
jQuery('#calc_denom').click(function() {
if ( display.text() !== '0' ) {
if ( is_submission ) {
denom(answer);
} else if ( is_a ) {
denom(a);
}
}
return false;
});
// reset console
jQuery('#result_clear').click(function() {
jQuery('#results_list').children('li').fadeOut(200, function() {
jQuery(this).remove();
});
jQuery('#results_list').prepend('<li id="result_default">Memory is Empty</li>');
return false;
});
/*
** Key Events
*/
// key press for integers and operators
jQuery(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
jQuery('button').each(function() {
var value = jQuery(this).val();
if ( value === key ) {
animateButton(jQuery(this));
}
});
});
// keydown for backspace and return
jQuery(document).keydown(function (e) {
// the character code
var charCode = e.which;
// backspace
if ( charCode === 8 ) {
backspace();
animateButton(jQuery('#calc_back'));
return false;
}
// clear
if ( charCode === 12 ) {
reset_calc();
animateButton(jQuery('#calc_clear'));
return false;
}
// return
if ( charCode === 13 ) {
submit_calc();
animateButton(jQuery('#calc_eval'));
return false;
}
});
index.html
<!doctype html> <html> <head> <meta charset="utf-8"> <title>jQuery计算器带操作记录</title> <link rel="stylesheet" href="css/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="←" >←</button> <button id="calc_neg" value="-/+" >-/+</button> <button class="calc_op" value="/" >÷</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="*" >×</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="√" >√</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> <a id="result_clear" href="#">Wipe</a> </div> </div> <script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script> <script src="js/index.js"></script> </body> </html>
效果图：