js实现简单计算器（样式酷炫）_js实现能插入样式的计算器-CSDN博客

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>js实现简单计算器</title>
	<link rel="stylesheet" type="text/css" href="css/normalize.css" />
	<link rel="stylesheet" href="css/style.css">
</head>
<body>
	<h1>js实现简单计算器</h1>
		<p class="warning">不要进行除0操作</p>

		<div id="calculator" class="calculator">

		  <button id="clear" class="clear">C</button>

		  <div id="viewer" class="viewer">0</div>

		  <button class="num" data-num="7">7</button>
		  <button class="num" data-num="8">8</button>
		  <button class="num" data-num="9">9</button>
		  <button data-ops="加上" class="ops">+</button>

		  <button class="num" data-num="4">4</button>
		  <button class="num" data-num="5">5</button>
		  <button class="num" data-num="6">6</button>
		  <button data-ops="减去" class="ops">-</button>

		  <button class="num" data-num="1">1</button>
		  <button class="num" data-num="2">2</button>
		  <button class="num" data-num="3">3</button>
		  <button data-ops="乘以" class="ops">*</button>

		  <button class="num" data-num="0">0</button>
		  <button class="num" data-num=".">.</button>
		  <button id="equals" class="equals" data-result="">=</button>
		  <button data-ops="除以" class="ops">/</button>
		</div>

		<button id="reset" class="reset">Reset Universe?</button>
	
	<script src="js/calculator.js" type="text/javascript"></script>
</body>
</html>

style.css

html {
  background: #100a1c;
  background-image: -webkit-radial-gradient(50% 30% ellipse at center top, #201e40 0%, rgba(0, 0, 0, 0) 100%), -webkit-radial-gradient(60% 50% ellipse at center bottom, #261226 0%, #100a1c 100%);
  background-image: radial-gradient(50% 30% ellipse at center top, #201e40 0%, rgba(0, 0, 0, 0) 100%), radial-gradient(60% 50% ellipse at center bottom, #261226 0%, #100a1c 100%);
  background-attachment: fixed;
  color: #6cacc5;
}

body {
  color: #6cacc5;
  font: 300 18px/1.6 "Source Sans Pro",sans-serif;
  margin: 0;
  /*padding: 5em 0 2em;*/
  text-align: center;
}

h2 {
  font-weight: 300;
  margin: 0;
}

/* Gradient text only on Webkit */
.warning {
  background: -webkit-linear-gradient(45deg, #c97874 10%, #463042 90%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #8c5059;
  font-weight: 400;
  margin: 0 auto 6em;
  max-width: 9em;
}

.calculator {
  font-size: 28px;
  margin: 0 auto;
  width: 10em;
}
.calculator::before, .calculator::after {
  content: " ";
  display: table;
}
.calculator::after {
  clear: both;
}

/* Calculator after dividing by zero */
.broken {
  -webkit-animation: broken 2s;
          animation: broken 2s;
  -webkit-transform: translate3d(0, -2000px, 0);
          transform: translate3d(0, -2000px, 0);
  opacity: 0;
}

.viewer {
  color: #c97874;
  float: left;
  line-height: 3em;
  text-align: right;
  text-overflow: ellipsis;
  overflow: hidden;
  width: 7.5em;
  height: 3em;
}

button {
  border: 0;
  background: rgba(42, 50, 113, 0.28);
  color: #6cacc5;
  cursor: pointer;
  float: left;
  font: inherit;
  margin: 0.25em;
  width: 2em;
  height: 2em;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
button:hover {
  background: #201e40;
}
button:focus {
  outline: 0;
  /* The value fade-ins that appear */
}
button:focus::after {
  -webkit-animation: zoom 1s;
          animation: zoom 1s;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  content: attr(data-num);
  cursor: default;
  font-size: 100px;
  position: absolute;
  top: 1.5em;
  left: 50%;
  text-align: center;
  margin-left: -24px;
  opacity: 0;
  width: 48px;
}

/* Same as above, modified for operators */
.ops:focus::after {
  content: attr(data-ops);
  margin-left: -210px;
  width: 420px;
}

/* Same as above, modified for result */
.equals:focus::after {
  content: attr(data-result);
  margin-left: -300px;
  width: 600px;
}

/* Reset button */
.reset {
  background: rgba(201, 120, 116, 0.28);
  color: #c97874;
  font-weight: 400;
  margin-left: -77px;
  padding: 0.5em 1em;
  position: absolute;
  top: -20em;
  left: 50%;
  width: auto;
  height: auto;
  /* When button is revealed */
}
.reset:hover {
  background: #c97874;
  color: #100a1c;
}
.reset.show {
  top: 20em;
  -webkit-animation: fadein 4s;
          animation: fadein 4s;
}

/* Animations */
/* Values that appear onclick */
@-webkit-keyframes zoom {
  0% {
    -webkit-transform: scale(0.2);
            transform: scale(0.2);
    opacity: 1;
  }
  70% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    opacity: 0;
  }
}
@keyframes zoom {
  0% {
    -webkit-transform: scale(0.2);
            transform: scale(0.2);
    opacity: 1;
  }
  70% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    opacity: 0;
  }
}
/* Division by zero animation */
@-webkit-keyframes broken {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  5% {
    -webkit-transform: rotate(5deg);
            transform: rotate(5deg);
  }
  15% {
    -webkit-transform: rotate(-5deg);
            transform: rotate(-5deg);
  }
  20% {
    -webkit-transform: rotate(5deg);
            transform: rotate(5deg);
  }
  25% {
    -webkit-transform: rotate(-5deg);
            transform: rotate(-5deg);
  }
  50% {
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
  }
  70% {
    -webkit-transform: translate3d(0, 2000px, 0);
            transform: translate3d(0, 2000px, 0);
    opacity: 1;
  }
  75% {
    opacity: 0;
  }
  100% {
    -webkit-transform: translate3d(0, -2000px, 0);
            transform: translate3d(0, -2000px, 0);
  }
}
@keyframes broken {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  5% {
    -webkit-transform: rotate(5deg);
            transform: rotate(5deg);
  }
  15% {
    -webkit-transform: rotate(-5deg);
            transform: rotate(-5deg);
  }
  20% {
    -webkit-transform: rotate(5deg);
            transform: rotate(5deg);
  }
  25% {
    -webkit-transform: rotate(-5deg);
            transform: rotate(-5deg);
  }
  50% {
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
  }
  70% {
    -webkit-transform: translate3d(0, 2000px, 0);
            transform: translate3d(0, 2000px, 0);
    opacity: 1;
  }
  75% {
    opacity: 0;
  }
  100% {
    -webkit-transform: translate3d(0, -2000px, 0);
            transform: translate3d(0, -2000px, 0);
  }
}
/* Reset button fadein */
@-webkit-keyframes fadein {
  0% {
    top: 20em;
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadein {
  0% {
    top: 20em;
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@media (min-width: 420px) {
  .calculator {
    width: 12em;
  }

  .viewer {
    width: 8.5em;
  }

  button {
    margin: 0.5em;
  }
}

calculator.js

(function() {
  "use strict";

  // Shortcut to get elements
  var el = function(element) {
    if (element.charAt(0) === "#") { // If passed an ID...
      return document.querySelector(element); // ... returns single element
    }

    return document.querySelectorAll(element); // Otherwise, returns a nodelist
  };

  // Variables
  var viewer = el("#viewer"), // Calculator screen where result is displayed
    equals = el("#equals"), // Equal button
    nums = el(".num"), // List of numbers
    ops = el(".ops"), // List of operators
    theNum = "", // Current number
    oldNum = "", // First number
    resultNum, // Result
    operator; // Batman

  // When: Number is clicked. Get the current number selected
  var setNum = function() {
    if (resultNum) { // If a result was displayed, reset number
      theNum = this.getAttribute("data-num");
      resultNum = "";
    } else { // Otherwise, add digit to previous number (this is a string!)
      theNum += this.getAttribute("data-num");
    }

    viewer.innerHTML = theNum; // Display current number

  };

  // When: Operator is clicked. Pass number to oldNum and save operator
  var moveNum = function() {
    oldNum = theNum;
    theNum = "";
    operator = this.getAttribute("data-ops");

    equals.setAttribute("data-result", ""); // Reset result in attr
  };

  // When: Equals is clicked. Calculate result
  var displayNum = function() {

    // Convert string input to numbers
    oldNum = parseFloat(oldNum);
    theNum = parseFloat(theNum);

    // Perform operation
    switch (operator) {
      case "加上":
        resultNum = oldNum + theNum;
        break;

      case "减去":
        resultNum = oldNum - theNum;
        break;

      case "乘以":
        resultNum = oldNum * theNum;
        break;

      case "除以":
        resultNum = oldNum / theNum;
        break;

        // If equal is pressed without an operator, keep number and continue
      default:
        resultNum = theNum;
    }

    // If NaN or Infinity returned
    if (!isFinite(resultNum)) {
      if (isNaN(resultNum)) { // If result is not a number; set off by, eg, double-clicking operators
        resultNum = "You broke it!";
      } else { // If result is infinity, set off by dividing by zero
        resultNum = "Look at what you've done";
        el('#calculator').classList.add("broken"); // Break calculator
        el('#reset').classList.add("show"); // And show reset button
      }
    }

    // Display result, finally!
    viewer.innerHTML = resultNum;
    equals.setAttribute("data-result", resultNum);

    // Now reset oldNum & keep result
    oldNum = 0;
    theNum = resultNum;

  };

  // When: Clear button is pressed. Clear everything
  var clearAll = function() {
    oldNum = "";
    theNum = "";
    viewer.innerHTML = "0";
    equals.setAttribute("data-result", resultNum);
  };

  /* The click events */

  // Add click event to numbers
  for (var i = 0, l = nums.length; i < l; i++) {
    nums[i].onclick = setNum;
  }

  // Add click event to operators
  for (var i = 0, l = ops.length; i < l; i++) {
    ops[i].onclick = moveNum;
  }

  // Add click event to equal sign
  equals.onclick = displayNum;

  // Add click event to clear button
  el("#clear").onclick = clearAll;

  // Add click event to reset button
  el("#reset").onclick = function() {
    window.location = window.location;
  };

}());