JQ 计算器带操作记录

onestopweb

浏览: 705696 次

最近访客更多访客>>

vincepisces

heishehui

wtomato

hushouhao

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

境-JS

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,' &#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
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="&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>
<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>

效果图：

jQueryCalculator.rar (36.7 KB)
下载次数: 0

查看图片附件

分享到：

JS 轮播图的Flickerplate插件 | JS 日期时间控件

2016-07-23 18:01
浏览 350
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

JQ 计算器带操作记录

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

JQ 计算器带操作记录

评论

发表评论

相关推荐

JS 堆排序

JS 获取iframe高度的静动态方法

JQ 获取图片真实宽高

JQ 省市区的三级联动

JS 仅允许微信客户端打开该页面

JQ 文字无缝滚动效果

JQ 雪花落地的特效

JQ 页面上下左右居中的插件

JQ 判断链接的内容

JS 获取移动终端浏览器版本信息

JS Cookies的设置 读取 删除

JS 禁止轮播的技巧之修改ID名

JQ 图片的懒加载

JQ filter() 过滤函数

JQ 全选和反选和取消

JS 宽松相等和严格相等

JS 严格模式

JS ES6箭头函数

JS 表单验证的15个正则表达式

JQ 元素距离顶部窗口小于0悬浮大于0恢复原来的状态

最近访客更多访客>>

JS Cookies的设置读取删除