CSS簡易計(jì)算器是一個最基礎(chǔ)的前端小項(xiàng)目之一，要實(shí)現(xiàn)它，需要掌握基本的HTML、CSS、JavaScript。

下面就是一個簡易計(jì)算器的CSS代碼：

html {
background: #e5e5e5;
}
body {
max-width: 500px;
margin: 0 auto;
background: white;
border-radius: 5px;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
padding: 20px;
}
.calculator {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
padding: 0 5px;
}
button {
font-size: 1.2rem;
border-radius: 5px;
border: none;
background: #7c7c7c;
color: white;
padding: 10px;
cursor: pointer;
transition: all 0.3s ease;
}
button:hover {
background: #585858;
}
button:active {
transform: scale(0.9);
}

這段代碼主要是樣式部分，因?yàn)槲覀円呀?jīng)將HTML布局編寫出來。主要是設(shè)置背景、設(shè)置計(jì)算器的大小、設(shè)置按鈕的樣式和動畫效果等等。

計(jì)算器的HTML代碼：

<div class="calculator">
<button class="clear">C</button>
<button class="operator">/</button>
<button>7</button>
<button>8</button>
<button>9</button>
<button class="operator">*</button>
<button>4</button>
<button>5</button>
<button>6</button>
<button class="operator">-</button>
<button>1</button>
<button>2</button>
<button>3</button>
<button class="operator">+</button>
<button class="equals">=</button>
<button>0</button>
<button>.</button>
</div>

這里只包含了基礎(chǔ)的計(jì)算器按鍵，和一些運(yùn)算符和其他的一些特殊鍵。

CSS簡易計(jì)算器的JavaScript代碼：

const calculator = document.querySelector('.calculator');
const buttons = calculator.querySelectorAll('button');
const display = document.querySelector('.display');
buttons.forEach((button) => {
button.addEventListener('click', () =>{
if (button.classList.contains('operator')) {
display.value += ` ${button.innerHTML} `;
} else if (button.classList.contains('clear')) {
display.value = '';
} else if (button.classList.contains('equals')) {
display.value = eval(display.value);
} else {
display.value += button.innerHTML;
}
});
});

這是整個計(jì)算器的邏輯部分，主要是通過JavaScript控制計(jì)算器按鍵的功能。點(diǎn)擊任何一個按鍵時，都會執(zhí)行一個事件監(jiān)聽器函數(shù)，對于運(yùn)算符、清除和等于符號要特別處理。

以上就是CSS簡易計(jì)算器的全部代碼了。