`

JQ 计算器带操作记录

 
阅读更多

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>

 

效果图：

 

 

 

 

 

 

  • 大小: 72.6 KB
分享到：
| JS 日期时间控件
评论
发表评论

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

相关推荐

    手机端jq版房贷计算器

    【手机端jq版房贷计算器】是一款专为手机用户设计的金融工具，主要功能是帮助用户计算房屋贷款的相关费用。这款计算器基于JavaScript库jQuery（简称jq）构建，具有良好的响应式设计，能自动适应不同尺寸的手机屏幕，...

    jquery计算器

    **jQuery计算器实现详解** 在网页开发中，我们经常需要创建各种各样的交互元素，其中计算器是一种常见的需求。本文将深入探讨如何使用jQuery、HTML和CSS来构建一个基础的计算器，支持开关机和简单的数学计算。 ###...

    js脚本房贷计算器

    在`jquery-jsq`这个文件中，我们可以推测它使用了jQuery库来增强JavaScript的功能，例如简化DOM操作、处理事件、执行异步请求等。jQuery使得代码更简洁，提高了开发效率。在房贷计算器的实现中，jQuery可能会用于...

    jQuery简易计算器

    jQuery简易计算器是一个基于JavaScript库jQuery实现的简单计算工具，它为用户提供了一个直观的界面来执行基本的算术运算。这个项目对于初学者来说是很好的学习材料，因为它涉及到前端开发中的DOM操作、事件处理以及...

    钱宝包房贷计算器安卓版

    这个计算器，只要输入贷款起始日期，每月还款日，它会自动根据国家利率的变化而计算出还款额的变化。您会很清晰的看到您当月的还款额。而且你可以定制您需要的各种信息，例如利率信息，已还利息总额，已还本金总额，...

    CSS3和js超酷iPhone样式科学计算器插件

    插件描述：CalcSS3是一款非常酷的CSS3和js模仿iPhone样式科学计算器插件。该计算器插件没有使用图片，纯CSS制作。该计算器是科学型的，可以处理乘方、开方、指数、对数等复杂的数学运算。演示地址：...

    jq基本控件操作集合

    jq基本控件操作集合:select,radio,checkbox全选

    JQ 模拟操作

    本文将深入探讨“JQ模拟操作”这一主题，主要基于给定的博文链接进行讨论，虽然描述部分为空，但我们可以根据标题和标签推测内容可能涉及对jQuery源码的理解以及使用工具进行模拟操作。 首先，jQuery的核心概念是...

    JQ8900语音模块资料包

    综上所述，JQ8900语音模块资料包提供了从基础操作到高级应用的全方位资源，涵盖了STM32、89C52和Arduino三种不同平台的控制实例，以及格式转换、音量调节、串口调试等多个方面，是开发语音相关项目的宝贵参考资料。...

    jq6500语音芯片

    4. **JQ6500固件.rar** 和 **JQ6500软件.rar**：可能包含jq6500的固件升级文件和相关的编程软件，用于更新芯片内部的固件或者对芯片进行编程操作。 5. **JQ6500-16P-V1.3.SchDoc**：这是一个电路设计文件，可能是jq...

    jq_cb:jQuery代码库-计算器，dateDropDown

    jq_cb 此“计算器”代码库包含构建计算器所需的Calculator.html，calculator.css和Calculator.js文件。 为此使用HTML，CSS和JQuery。 index.html用于调用Calculator.html

    jq安装包rpm.rar

    `jq`是一款强大的命令行JSON处理器，用于在命令行界面中查看、操作和转换JSON数据。这个`jq安装包rpm.rar`是一个包含了`jq`工具的RPM（Red Hat Package Manager）格式的压缩包，主要面向使用Linux发行版如CentOS、...

    基于HTML+CSS，jQuery编写的简易计算器后续（添加了键盘监听）

    之前发布了一款简易的计算器，今天做了一下修改，添加了键盘监听事件，不用再用鼠标点点点啦 JS代码： var yunSuan = 0;// 运算符号，0-无运算;1-加法;2-减法;3-乘法;4-除法 var change = 0;// 属于运算符后需要...

    Jquery做的一个简单的计算器例子

    在“Jquery做的一个简单的计算器例子”中，我们可以了解到如何使用jQuery实现一个基本的计算功能。** 首先，jQuery的核心在于其选择器机制，它允许我们通过CSS样式选择器快速准确地选取DOM元素。例如，在创建计算器...

    jq带节点的步骤进度条

    **jq带节点的步骤进度条**是一种在网页中显示任务进度或步骤流程的交互元素，通常用于指导用户完成一系列操作。这种进度条通过JavaScript库jQuery（简称jq）来实现，可以提供直观的视觉反馈，帮助用户理解他们所处的...

    Jq实现带进度条的多文件上传

    在本文中，我们将深入探讨如何使用jQuery（简称为jq）库来实现一个带有进度条的多文件上传功能。这个功能不仅提供了自动和手动上传的选择，还具有文件列表展示、文件类型与大小判断以及清除功能，使得文件上传变得...

    万年历及计算器.rar

    基于12c5a60s2的万年历及及计算器 功能： ①实现加减乘除功能，位数为5位数运算5位数； ②屏幕选用全彩spi通信的9341-240*320，包含lcd资料； ③包含三十多条语音，包含语音文件； ④语音模块需要JQ6500，包含资料...

    jq带左右按钮带缩略图的图片切换

    在IT行业中，尤其是在网页开发领域，用户界面的交互性与用户体验是...总的来说，"jq带左右按钮带缩略图的图片切换"是一个集成了DOM操作、事件处理、动画效果和响应式设计的综合示例，是学习和理解jQuery应用的好起点。

    jQuery两种样式计算器特效代码

    **jQuery两种样式计算器特效代码详解** 在Web开发中，实现动态交互效果是提升用户体验的关键因素之一。...在实际应用中，还可以考虑扩展功能，如历史记录、错误处理或自定义运算符，以提高计算器的实用性。

Magicbox
Global site tag (gtag.js) - Google Analytics