以下是 带操作记录jQuery计算器 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312">
<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='js/jquery-1.8.3.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
JS代码(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.logfunction write(x){
console.log(x);
}
// add int to current display valuefunction 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 valuefunction setDisplayVal(x){
display.text( visOps(x));
}
// make touch animationfunction animateButton(obj){
var button = obj.addClass('hovering');
setTimeout(function(){
button.removeClass('hovering');
}
,100);
}
/*** operation functions*/
// setting afunction 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 bfunction 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 calculatorfunction loop_calc(answer){
write('Loop Calculator');
a = answer;
b = 0;
answer = 0;
// set display value setDisplayVal(a);
}
// setting operatorfunction 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 calcfunction 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 calculatorfunction 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 valuefunction 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 calculatorfunction 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 valuefunction 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 valuefunction 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 integersjQuery('.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 operatorsjQuery('.calc_op').each(function(){
jQuery(this).click(function(){
var value = jQuery(this).val();
set_o(value);
}
);
}
);
// click equalsjQuery('#calc_eval').click(function(){
submit_calc();
}
);
// click clearjQuery('#calc_clear').click(function(){
reset_calc();
}
);
// click negjQuery('#calc_neg').click(function(){
neg();
}
);
// click backspacejQuery('#calc_back').click(function(){
backspace();
}
);
// click square rootjQuery('#calc_sqrt').click(function(){
if ( display.text() !== '0' ){
if ( is_submission ){
sqrt(answer);
}
else if ( is_a ){
sqrt(a);
}
}
return false;
}
);
// click squarejQuery('#calc_square').click(function(){
if ( display.text() !== '0' ){
if ( is_submission ){
square(answer);
}
else if ( is_a ){
square(a);
}
}
return false;
}
);
// click denominatorjQuery('#calc_denom').click(function(){
if ( display.text() !== '0' ){
if ( is_submission ){
denom(answer);
}
else if ( is_a ){
denom(a);
}
}
return false;
}
);
// reset consolejQuery('#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 operatorsjQuery(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 returnjQuery(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;
}
}
);
CSS代码(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);}
分享到QQ
分享到微博
微信扫一扫
