https://codepen.io/tphelps5/pen/GRgBMMZ



const output = document.getElementById("output");

let reset = document.querySelector(".reset");


function resetOutput() {
  output.innerHTML = "0";
}

* {
  background-color: silver;
}
h1 {
  text-align: center;
}

#calc_buttons {
  display: grid;
  align-content: center;
  justify-content: center;
  min-height: 50vh;
  grid-template-columns: repeat(4, 100px);
  grid-template-rows: minmax(120px, auto) repeat(6);
}

#calc_buttons > button {
  cursor: pointer;
  font-size: 1.5rem;
  border: 1px solid white;
  outline: none;
  background-color: #6699cc;
  width: 100px;
  height: 80px;
}

#calc_buttons > button:hover {
  background-color: rgba(255, 255, 255, .9);
}

<h1> My First JavaScript Calculator </h2>
  <div id="calculator">
<div id="calc_display">
  <span id="output"></span>
  </div>
  <div id="calc_buttons">
    <button onclick="resetOutput()" id="num" class="reset" data-equals="reset">C</button>

    <button id="num" class="seven">7</button>
    <button id="num" class="eight">8</button>
    <button id="num" class="nine">9</button>

    <button id="num" class="four">4</button>
    <button id="num" class="five">5</button>
    <button id="num" class="six">6</button>

    <button id="num" class="three">3</button>
    <button id="num" class="two">2</button>
    <button id="num" class="one">1</button>


    <button id="num" class="zero">0</button>

   <button id="num" class="decimal" data-action="decimal">.</button>
   <button id="num" class="equals" data-equals="equal">=</button>
   <button id="num" class="minus" data-action="minus">-</button>
   <button id="num" class="plus" data-action="plus">+</button>
   <button id="num" class="divide" data-action="divide">/</button>
   <button id="num" class="multiply" data-action="multiply">*</button>
</div>





我正在开发一个计算器应用程序,并且试图将数字向下移动。我希望第一行本身和随后的行中的“ C”或“重置”按钮分别为“ 7、8、9,*”,“ 4、5、6,-”,“ 1、​​2、3 +” 0,。,=“

是否有人对如何更轻松地移动这些元素有任何想法?我知道我可以边走边移动,但我知道必须有一种更简单的方法来完成此挑战。谢谢!

最佳答案

只需将其添加到您的CSS:

.reset {
    grid-column: span 4;
}


并对按钮进行排序,如下所示:

<button id="num" class="seven">7</button>
<button id="num" class="eight">8</button>
<button id="num" class="nine">9</button>

<button id="num" class="multiply" data-action="multiply">*</button>

<button id="num" class="four">4</button>
<button id="num" class="five">5</button>
<button id="num" class="six">6</button>

<button id="num" class="minus" data-action="minus">-</button>

<button id="num" class="three">3</button>
<button id="num" class="two">2</button>
<button id="num" class="one">1</button>

<button id="num" class="plus" data-action="plus">+</button>

<button id="num" class="zero">0</button>

<button id="num" class="decimal" data-action="decimal">.</button>
<button id="num" class="equals" data-equals="equal">=</button>
<button id="num" class="divide" data-action="divide">/</button>


https://codepen.io/zuyas/pen/XWJPPqM

并注意:您应该切换id和class值。 ID必须是唯一的。

关于javascript - 如何在网格内移动元素?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/59776596/

10-12 12:30
查看更多