我怎样才能让这个边框出现在按钮元素上方?
How can I get this border to appear on above the button elements?
代码笔:https://codepen.io/cnelson720/pen/bGaYNBw
我正在尝试模仿 Mac 计算器的风格。
https://ibb.co/r5FRx56
左边是原装的,右边是我的
我正在尝试让嵌入框阴影显示在按钮上方。
我试过弄乱 z-index,并给它提供所需的位置属性,到目前为止没有成功
.calculator{
margin: auto;
margin-top: 35vh;
height: 325px;
width: 235px;
border-radius: 10px;
/*
border: 0.1px solid black;
*/
box-shadow: 0px 10px 25px rgb(80, 80, 80);
background: var(--bg-color);
}
.border{
z-index: 1;
border-radius: 10px;
border: 0.1px solid black;
box-shadow: inset 0px 0px 2px white;
}
.buttons{
display: grid;
grid-template-columns: repeat(4, 1fr);
row-gap: 1px;
column-gap: 1px;
}
.btn{
background: var(--li-btn);
border: none;
padding: 0;
margin: 0;
height: 47px;
color: white;
font-size: 1.4rem;
}
我试着给计算器中的一个元素添加了一个内嵌框阴影 div。我希望给它一个 1 的 z-index,这样这个插入的框阴影就会出现在 div(按钮上方)
中的所有其他内容之上
在您的 btn
class 中,您应该添加以下规则:
.btn {
background : RGBA(126, 126, 126, .066);
}
唯一的缺点是你不能再用你的 CSS 变量了。
这是一个工作片段:
class Calculator {
constructor(previousOperandTextElement, currentOperandTextElement){
this.previousOperandTextElement = previousOperandTextElement;
this.currentOperandTextElement = currentOperandTextElement;
this.clear();
}
clear(){
this.currentOperand = '';
this.previousOperand = '';
this.operation = undefined;
}
delete(){
this.currentOperand = this.currentOperand.toString().slice(0, -1);
}
appendNumber(number){
if(number === '.' && this.currentOperand.includes('.')) return;
this.currentOperand = this.currentOperand.toString() + number.toString();
}
chooseOperation(operation){
if (this.currentOperand === '') return;
if (this.previousOperand !== ''){
this.compute();
}
this.operation = operation;
this.previousOperand = this.currentOperand;
this.currentOperand = '';
}
compute(){
let computation;
const prev = parseFloat(this.previousOperand);
const current = parseFloat(this.currentOperand);
if(isNaN(prev) || isNaN(current)) return;
switch(this.operation){
case '+':
//sum
computation = prev + current;
break;
case '-':
//sub
computation = prev - current;
break;
case 'x':
//multiply
computation = prev * current;
break;
case '÷':
//divide
computation = prev / current;
break;
default:
return;
}
this.currentOperand = computation;
this.operation = undefined;
this.previousOperand = '';
}
getDisplayNumber(number){
const stringNumber = number.toString();
const integerDigits = parseFloat(stringNumber.split('.')[0]);
const decimalDigits = stringNumber.split('.')[1];
let integerDisplay;
if(isNaN(integerDigits)){
integerDisplay = '';
} else {
integerDisplay = integerDigits.toLocaleString('en', {maximumFractionDigits: 0});
}
if(decimalDigits != null){
return `${integerDisplay}.${decimalDigits}`;
} else {
return integerDisplay;
}
}
updateDisplay(){
this.currentOperandTextElement.innerText = this.getDisplayNumber(this.currentOperand);
if(this.operation != null){
this.previousOperandTextElement = `${this.getDisplayNumber(this.previousOperand)} ${this.operation}`;
} else {
this.previousOperandTextElement.innerText = '';
}
}
}
const numberButtons = document.querySelectorAll('.number');
const operationButtons = document.querySelectorAll('.operation');
const equalsButton = document.querySelector('#equal');
const clearButton = document.querySelector('#clear');
const previousOperandTextElement = document.querySelector('.previous-operand');
const currentOperandTextElement = document.querySelector('.current-operand');
//calc object
const calculator = new Calculator(previousOperandTextElement, currentOperandTextElement);
currentOperandTextElement.innerText = 0;
numberButtons.forEach(button => {
button.addEventListener('click', ()=>{
calculator.appendNumber(button.innerText);
calculator.updateDisplay();
console.log(button);
})
});
operationButtons.forEach(button =>{
button.addEventListener('click', ()=>{
calculator.chooseOperation(button.innerText);
calculator.updateDisplay();
})
});
equalsButton.addEventListener('click', button =>{
calculator.compute();
calculator.updateDisplay();
});
clearButton.addEventListener('click', button =>{
calculator.clear();
calculator.updateDisplay();
})
:root{
--org-btn: #fa9f29;
--bg-color: #545357;
--li-btn: #7E7E80;
--dr-btn: #656467;
}
body{
font-family: Arial, Helvetica, sans-serif;
}
.calculator{
margin: auto;
margin-top: 20vh;
height: 325px;
width: 235px;
border-radius: 10px;
/*
border: 0.1px solid black;
box-shadow: inset 0px 0px 2px white, 0px 10px 25px rgb(80, 80, 80);
*/
background: var(--bg-color);
}
.border{
border-radius: 10px;
border: 0.1px solid black;
box-shadow: inset 0px 0px 2px white, 0px 10px 25px rgb(80, 80, 80);
}
.output{
height: 82px;
width: 100%;
display: flex;
justify-content: flex-end;
align-content: flex-end;
}
.previous-operand, .current-operand{
color: white;
font-size: 3.5rem;
padding-top: 5%;
padding-right: 3%;
}
.buttons{
display: grid;
grid-template-columns: repeat(4, 1fr);
row-gap: 1px;
column-gap: 1px;
}
.btn{
background : RGBA(0, 0, 0, .066);
border: none;
padding: 0;
margin: 0;
height: 47px;
color: white;
font-size: 1.4rem;
}
.btn:active{
background: rgb(182, 182, 182);
}
.dark{
background : RGBA(126, 126, 126, .066);
}
.orange{
background : RGBA(250, 159, 41)
}
.orange:active{
background: #b8751d;
}
.bottom{
height: 51px;
}
.bottom-left{
height: 51px;
border-bottom-left-radius: 9px;
grid-column: 1/3;
}
.bottom-right{
height: 51px;
border-bottom-right-radius: 9px;
}
<div class="calculator">
<div class="border">
<div class="output"><div class="previous-operand" editable></div><div class="current-operand"></div></div>
<div class="buttons">
<button class='btn dark' id="clear">AC</button class='btn'>
<button class='btn dark' id="pos-neg">+/-</button class='btn'>
<button class='btn dark' id="percent">%</button class='btn'>
<button class='btn operation orange' id="divide">÷</button class='btn'>
<button class='btn number' id="7">7</button class='btn'>
<button class='btn number' id="8">8</button class='btn'>
<button class='btn number' id="9">9</button class='btn'>
<button class='btn operation orange' id="multiply">x</button class='btn'>
<button class='btn number' id="4">4</button class='btn'>
<button class='btn number' id="5">5</button class='btn'>
<button class='btn number' id="6">6</button class='btn'>
<button class='btn operation orange' id='minus'>-</button class='btn'>
<button class='btn number' id="1">1</button class='btn'>
<button class='btn number' id="2">2</button class='btn'>
<button class='btn number' id="3">3</button class='btn'>
<button class='btn operation orange' id="plus">+</button class='btn'>
<button class='btn number bottom-left' id="zero">0</button class='btn'>
<button class='btn number bottom' id="decimal">.</button class='btn'>
<button class='btn orange bottom-right' id="equal">=</button class='btn'>
</div>
</div>
</div>
代码笔:https://codepen.io/cnelson720/pen/bGaYNBw
我正在尝试模仿 Mac 计算器的风格。 https://ibb.co/r5FRx56 左边是原装的,右边是我的
我正在尝试让嵌入框阴影显示在按钮上方。
我试过弄乱 z-index,并给它提供所需的位置属性,到目前为止没有成功
.calculator{
margin: auto;
margin-top: 35vh;
height: 325px;
width: 235px;
border-radius: 10px;
/*
border: 0.1px solid black;
*/
box-shadow: 0px 10px 25px rgb(80, 80, 80);
background: var(--bg-color);
}
.border{
z-index: 1;
border-radius: 10px;
border: 0.1px solid black;
box-shadow: inset 0px 0px 2px white;
}
.buttons{
display: grid;
grid-template-columns: repeat(4, 1fr);
row-gap: 1px;
column-gap: 1px;
}
.btn{
background: var(--li-btn);
border: none;
padding: 0;
margin: 0;
height: 47px;
color: white;
font-size: 1.4rem;
}
我试着给计算器中的一个元素添加了一个内嵌框阴影 div。我希望给它一个 1 的 z-index,这样这个插入的框阴影就会出现在 div(按钮上方)
中的所有其他内容之上在您的 btn
class 中,您应该添加以下规则:
.btn {
background : RGBA(126, 126, 126, .066);
}
唯一的缺点是你不能再用你的 CSS 变量了。
这是一个工作片段:
class Calculator {
constructor(previousOperandTextElement, currentOperandTextElement){
this.previousOperandTextElement = previousOperandTextElement;
this.currentOperandTextElement = currentOperandTextElement;
this.clear();
}
clear(){
this.currentOperand = '';
this.previousOperand = '';
this.operation = undefined;
}
delete(){
this.currentOperand = this.currentOperand.toString().slice(0, -1);
}
appendNumber(number){
if(number === '.' && this.currentOperand.includes('.')) return;
this.currentOperand = this.currentOperand.toString() + number.toString();
}
chooseOperation(operation){
if (this.currentOperand === '') return;
if (this.previousOperand !== ''){
this.compute();
}
this.operation = operation;
this.previousOperand = this.currentOperand;
this.currentOperand = '';
}
compute(){
let computation;
const prev = parseFloat(this.previousOperand);
const current = parseFloat(this.currentOperand);
if(isNaN(prev) || isNaN(current)) return;
switch(this.operation){
case '+':
//sum
computation = prev + current;
break;
case '-':
//sub
computation = prev - current;
break;
case 'x':
//multiply
computation = prev * current;
break;
case '÷':
//divide
computation = prev / current;
break;
default:
return;
}
this.currentOperand = computation;
this.operation = undefined;
this.previousOperand = '';
}
getDisplayNumber(number){
const stringNumber = number.toString();
const integerDigits = parseFloat(stringNumber.split('.')[0]);
const decimalDigits = stringNumber.split('.')[1];
let integerDisplay;
if(isNaN(integerDigits)){
integerDisplay = '';
} else {
integerDisplay = integerDigits.toLocaleString('en', {maximumFractionDigits: 0});
}
if(decimalDigits != null){
return `${integerDisplay}.${decimalDigits}`;
} else {
return integerDisplay;
}
}
updateDisplay(){
this.currentOperandTextElement.innerText = this.getDisplayNumber(this.currentOperand);
if(this.operation != null){
this.previousOperandTextElement = `${this.getDisplayNumber(this.previousOperand)} ${this.operation}`;
} else {
this.previousOperandTextElement.innerText = '';
}
}
}
const numberButtons = document.querySelectorAll('.number');
const operationButtons = document.querySelectorAll('.operation');
const equalsButton = document.querySelector('#equal');
const clearButton = document.querySelector('#clear');
const previousOperandTextElement = document.querySelector('.previous-operand');
const currentOperandTextElement = document.querySelector('.current-operand');
//calc object
const calculator = new Calculator(previousOperandTextElement, currentOperandTextElement);
currentOperandTextElement.innerText = 0;
numberButtons.forEach(button => {
button.addEventListener('click', ()=>{
calculator.appendNumber(button.innerText);
calculator.updateDisplay();
console.log(button);
})
});
operationButtons.forEach(button =>{
button.addEventListener('click', ()=>{
calculator.chooseOperation(button.innerText);
calculator.updateDisplay();
})
});
equalsButton.addEventListener('click', button =>{
calculator.compute();
calculator.updateDisplay();
});
clearButton.addEventListener('click', button =>{
calculator.clear();
calculator.updateDisplay();
})
:root{
--org-btn: #fa9f29;
--bg-color: #545357;
--li-btn: #7E7E80;
--dr-btn: #656467;
}
body{
font-family: Arial, Helvetica, sans-serif;
}
.calculator{
margin: auto;
margin-top: 20vh;
height: 325px;
width: 235px;
border-radius: 10px;
/*
border: 0.1px solid black;
box-shadow: inset 0px 0px 2px white, 0px 10px 25px rgb(80, 80, 80);
*/
background: var(--bg-color);
}
.border{
border-radius: 10px;
border: 0.1px solid black;
box-shadow: inset 0px 0px 2px white, 0px 10px 25px rgb(80, 80, 80);
}
.output{
height: 82px;
width: 100%;
display: flex;
justify-content: flex-end;
align-content: flex-end;
}
.previous-operand, .current-operand{
color: white;
font-size: 3.5rem;
padding-top: 5%;
padding-right: 3%;
}
.buttons{
display: grid;
grid-template-columns: repeat(4, 1fr);
row-gap: 1px;
column-gap: 1px;
}
.btn{
background : RGBA(0, 0, 0, .066);
border: none;
padding: 0;
margin: 0;
height: 47px;
color: white;
font-size: 1.4rem;
}
.btn:active{
background: rgb(182, 182, 182);
}
.dark{
background : RGBA(126, 126, 126, .066);
}
.orange{
background : RGBA(250, 159, 41)
}
.orange:active{
background: #b8751d;
}
.bottom{
height: 51px;
}
.bottom-left{
height: 51px;
border-bottom-left-radius: 9px;
grid-column: 1/3;
}
.bottom-right{
height: 51px;
border-bottom-right-radius: 9px;
}
<div class="calculator">
<div class="border">
<div class="output"><div class="previous-operand" editable></div><div class="current-operand"></div></div>
<div class="buttons">
<button class='btn dark' id="clear">AC</button class='btn'>
<button class='btn dark' id="pos-neg">+/-</button class='btn'>
<button class='btn dark' id="percent">%</button class='btn'>
<button class='btn operation orange' id="divide">÷</button class='btn'>
<button class='btn number' id="7">7</button class='btn'>
<button class='btn number' id="8">8</button class='btn'>
<button class='btn number' id="9">9</button class='btn'>
<button class='btn operation orange' id="multiply">x</button class='btn'>
<button class='btn number' id="4">4</button class='btn'>
<button class='btn number' id="5">5</button class='btn'>
<button class='btn number' id="6">6</button class='btn'>
<button class='btn operation orange' id='minus'>-</button class='btn'>
<button class='btn number' id="1">1</button class='btn'>
<button class='btn number' id="2">2</button class='btn'>
<button class='btn number' id="3">3</button class='btn'>
<button class='btn operation orange' id="plus">+</button class='btn'>
<button class='btn number bottom-left' id="zero">0</button class='btn'>
<button class='btn number bottom' id="decimal">.</button class='btn'>
<button class='btn orange bottom-right' id="equal">=</button class='btn'>
</div>
</div>
</div>