伸出的计算器按钮

时间：2018-08-09 01:22:56

标签： javascript html css

我想使计算器上的按钮像这样弯曲： windows-98-outdent-buttons.gif

并在单击时缩进（释放时再次缩进）

到目前为止，这是我的代码：（由于您在其中运行代码的小盒子，所有内容的大小都很奇怪，不能确定该怎么做，但我想您仍然可以帮我吗？）

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  <script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
  <style>
    html,
    body {
      height: 100%;
      margin: 0;
    }
    
    #divcontainer {
      border: 1px solid lightgray;
      width: 100% height: 100%
    }
    
    #makeitmove {
      background: lightgray;
      resize: both;
      overflow: auto;
      text-align: center;
      width: 450px;
      height: 76px;
      min-height: 70%;
      min-width: 25%;
      border: 1px solid grey;
      box-sizing: content-box;
    }
    
    #drag {
      font-size: 30px;
      height: 45px;
      width: 100%;
      background: blue;
      border: 1px solid grey;
      box-sizing: content-box;
    }
  </style>
  <script>
    $(document).ready(function() {
      $("#makeitmove").draggable({
        containment: "#divcontainer",
        handle: '#drag',
        scroll: false
      });
    });
  </script>
</head>

<body>
  <div id="divcontainer" style="height: 100vh;">
    <div id="makeitmove">
      <div id="drag">Calculator</div>
      <h1>JavaScript Calculator</h1>
      <p class="warning">Don't divide by zero</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="plus" 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="minus" 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="times" 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="divided by" class="ops">/</button>
      </div>

      <button id="reset" class="reset">Reset Universe?</button>
      <style>
        html {}
        
        body {
          color: #6cacc5;
          font: 300 18px/1.6 "Source Sans Pro", sans-serif;
          margin: 0;
          background: linear-gradient(purple, blue);
          text-align: center;
        }
        
        h1 {
          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: 30px;
          margin: 0;
        }
        
        .calculator {
          font-size: 28px;
          margin: 0 auto;
          width: 10em;
          &::before,
          &::after {
            content: " ";
            display: table;
          }
          &::after {
            clear: both;
          }
        }
        /* Calculator after dividing by zero */
        
        .broken {
          animation: broken 2s;
          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, .28);
          color: black;
          cursor: pointer;
          margin: 0;
          width: 27.5%;
          height: 2.5vh;
          transition: all 0.5s;
          &:hover {
            background: #201e40;
          }
          &:focus {
            outline: 0; // Better check accessibility
            /* The value fade-ins that appear */
            &::after {
              animation: zoom 1s;
              animation-iteration-count: 1;
              animation-fill-mode: both; // Fix Firefox from firing animations only once
              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, .28);
          color: #c97874;
          font-weight: 400;
          margin-left: -77px;
          padding: 0.5em 1em;
          position: absolute;
          top: -20em;
          left: 50%;
          width: auto;
          height: auto;
          &:hover {
            background: #c97874;
            color: #100a1c;
          }
          /* When button is revealed */
          &.show {
            top: 20em;
            animation: fadein 4s;
          }
        }
        /* Animations */
        /* Values that appear onclick */
        
        @keyframes zoom {
          0% {
            transform: scale(.2);
            opacity: 1;
          }
          70% {
            transform: scale(1);
          }
          100% {
            opacity: 0;
          }
        }
        /* Division by zero animation */
        
        @keyframes broken {
          0% {
            transform: translate3d(0, 0, 0);
            opacity: 1;
          }
          5% {
            transform: rotate(5deg);
          }
          15% {
            transform: rotate(-5deg);
          }
          20% {
            transform: rotate(5deg);
          }
          25% {
            transform: rotate(-5deg);
          }
          50% {
            transform: rotate(45deg);
          }
          70% {
            transform: translate3d(0, 2000px, 0);
            opacity: 1;
          }
          75% {
            opacity: 0;
          }
          100% {
            transform: translate3d(0, -2000px, 0);
          }
        }
        /* Reset button fadein */
        
        @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;
          }
        }
      </style>
      <script>
        /*
        TODO:
            Limit number input
            Disallow . from being entered multiple times
            Clean up structure
        */

        (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 "plus":
                resultNum = oldNum + theNum;
                break;

              case "minus":
                resultNum = oldNum - theNum;
                break;

              case "times":
                resultNum = oldNum * theNum;
                break;

              case "divided by":
                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;
          };

        }());
      </script>
    </div>

  </div>
</body>

</html>
在此先感谢您的帮助！ ：）

3 个答案:

答案 0 :(得分：1)

赋予按钮边框以border-style outset（或inset为其:active伪类）：

.out {
  border-style: outset;
}

.in {
  border-style: inset;
}
<h2 class="out">Borders can give the illusion of depth</h2>
<h2 class="in">In either direction</h2>

此外，Web浏览器唯一了解的样式表语言是CSS。在像这样的代码片段中使用样式表之前，您需要先对其进行编译。

答案 1 :(得分：1)

仅需对按钮内部结构进行一些修改。我放大屏幕截图发现经典的Windows主题按钮具有3层边框 enter image description here 该解决方案使用伪元素的边框，按钮边框本身和嵌套的跨距边框来实现效果。

body {
  background-color: rgb(192, 192, 192);
}

/* button normal style */

button.classic {
  min-width: 80px;
  background-color: rgb(192, 192, 192);
  border-top: 1px solid rgb(223, 223, 223);
  border-left: 1px solid rgb(223, 223, 223);
  border-bottom: 1px solid rgb(128, 128, 128);
  border-right: 1px solid rgb(128, 128, 128);
  position: relative;
  padding: 0;
  margin: 4px;
  font-family: Tahoma, Verdana, Segoe, sans-serif;
}

/*  pseudo-element for outer border */

button.classic::before {
  content: " ";
  position: absolute;
  z-index: -1;
  top: -2px;
  left: -2px;
  height: 100%;
  width: 100%;
  border-top: 2px solid white;
  border-left: 2px solid white;
  border-bottom: 2px solid black;
  border-right: 2px solid black;
}

/* button when focused */

button.classic:focus {
  outline: 0;
  border-top: 1px solid white;
  border-left: 1px solid white;
  border-bottom: 1px solid black;
  border-right: 1px solid black;
}

/* outer border when focused*/

button.classic:focus::before {
  border: 2px solid black;
}

/* span for inner border */

button.classic span {
  display: block;
  padding: 2px 16px;
  border: 1px solid rgb(192, 192, 192);
}

/* inner border when focused */

button.classic:focus span {
  border-top: 1px solid rgb(223, 223, 223);
  border-left: 1px solid rgb(223, 223, 223);
  border-bottom: 1px solid rgb(128, 128, 128);
  border-right: 1px solid rgb(128, 128, 128);
}

/* button when focused */

button.classic:active {
  border: 1px solid rgb(128, 128, 128);
}

/* button when pressed */

button.classic:active span {
  border: 1px solid rgb(192, 192, 192);
}

/* button label when pressed */

button.classic:active span label {
  position: relative;
  top: 1px;
  left: 1px;
}
<button class='classic'>
  <span><label>OK</label></span>
</button>

<button class='classic'>
  <span><label>Cancel</label></span>
</button>

答案 2 :(得分：1)

您可以尝试以下操作： 

.,
body {
    background-color: #d3d2d2;
}

button {
    cursor: pointer;
    margin: 0;
    width: 27.5%;
    height: 32px;
    transition: linear 200ms;
    font-size: 20px;
    font-weight: 500;
    background-color: #c1c1c0;
    box-shadow: 0px 0px 3px #a0a0a0;
    outline: none;
    border: 2px solid;
    border-top-color: #ddd;
    border-left-color: #ddd;
    border-bottom-color: #888;
    border-right-color: #888;
    color: #4b4a4a;
 }
 button:focus {
    border-top: 1px solid #dfdfdf;
    border-left: 1px solid #dfdfdf;
    border-bottom: 1px solid #808080;
    border-right: 1px solid #808080;
 }

相关问题
最新问题