最近學(xué)習(xí)了CSS，我嘗試了一個(gè)簡單的計(jì)算器。
代碼如下：
<html>
<head>
<style>
body {
font-family: Arial;
margin: 0;
padding: 0;
}
h1 {
text-align: center;
}
.container {
width: 400px;
margin: 0 auto;
border: 1px solid #ccc;
border-radius: 10px;
padding: 20px;
}
.calc-input {
width: 100%;
font-size: 16px;
padding: 10px;
margin-bottom: 10px;
border-radius: 5px;
border: 1px solid #ccc;
}
.calc-btn {
width: 50%;
font-size: 16px;
padding: 10px;
margin-bottom: 10px;
border-radius: 5px;
border: none;
color: #fff;
background-color: #333;
cursor: pointer;
}
.calc-btn:hover {
background-color: #555;
}
</style>
</head>
<body>
<div class="container">
<h1>簡單計(jì)算器</h1>
<input type="text" class="calc-input" id="input1" placeholder="請輸入第一個(gè)數(shù)字">
<input type="text" class="calc-input" id="input2" placeholder="請輸入第二個(gè)數(shù)字">
<button class="calc-btn" onclick="add()">+</button>
<button class="calc-btn" onclick="sub()">-</button>
<button class="calc-btn" onclick="mul()">*</button>
<button class="calc-btn" onclick="div()">/</button>
<input type="text" class="calc-input" id="result" placeholder="計(jì)算結(jié)果">
</div>
<script>
function add() {
var input1 = parseFloat(document.getElementById("input1").value);
var input2 = parseFloat(document.getElementById("input2").value);
var result = input1 + input2;
document.getElementById("result").value = result;
}
function sub() {
var input1 = parseFloat(document.getElementById("input1").value);
var input2 = parseFloat(document.getElementById("input2").value);
var result = input1 - input2;
document.getElementById("result").value = result;
}
function mul() {
var input1 = parseFloat(document.getElementById("input1").value);
var input2 = parseFloat(document.getElementById("input2").value);
var result = input1 * input2;
document.getElementById("result").value = result;
}
function div() {
var input1 = parseFloat(document.getElementById("input1").value);
var input2 = parseFloat(document.getElementById("input2").value);
var result = input1 / input2;
document.getElementById("result").value = result;
}
</script>
</body>
</html>這個(gè)計(jì)算器有四個(gè)按鈕，加、減、乘和除，可以進(jìn)行基本的數(shù)學(xué)運(yùn)算。在點(diǎn)擊按鈕時(shí)，JavaScript會(huì)獲取輸入框中的數(shù)字，進(jìn)行計(jì)算，然后將結(jié)果顯示在另一個(gè)輸入框中。
這個(gè)計(jì)算器雖然簡單，但它展現(xiàn)了CSS的一些基本概念，如布局、樣式、字體和顏色。我發(fā)現(xiàn)CSS是一門非常有用的編程語言，它可以幫助我美化我的網(wǎng)站并使其更加易于使用。