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/