HTML返设计网页计算器
<!DOCTYPE html>
<html>
<head>
<title>计算器</title>
<style>
body {
background-color: #f2f2f2;
font-family: Arial, sans-serif;
}
<pre><code> .container {
width: 300px;
margin: 0 auto;
background-color: #fff;
border: 1px solid #ccc;
padding: 10px;
}
.calculator {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 10px;
}
.button {
border: 1px solid #ccc;
background-color: #f2f2f2;
color: #333;
font-size: 16px;
padding: 10px;
cursor: pointer;
text-align: center;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
}
.button:hover {
background-color: #e6e6e6;
}
.input {
border: none;
background-color: #f2f2f2;
color: #333;
font-size: 16px;
padding: 10px;
text-align: right;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
}
</style>
</code></pre>
</head>
<body>
<div class="container">
<h2>计算器</h2>
<form name="calculator">
<input type="text" name="result" class="input" readonly />
<div class="calculator">
<input type="button" value="1" class="button" onclick="calculator.result.value += '1'" />
<input type="button" value="2" class="button" onclick="calculator.result.value += '2'" />
<input type="button" value="3" class="button" onclick="calculator.result.value += '3'" />
<input type="button" value="/" class="button" onclick="calculator.result.value += '/'" />
<input type="button" value="4" class="button" onclick="calculator.result.value += '4'" />
<input type="button" value="5" class="button" onclick="calculator.result.value += '5'" />
<input type="button" value="6" class="button" onclick="calculator.result.value += '6'" />
<input type="button" value="*" class="button" onclick="calculator.result.value += '*'" />
<input type="button" value="7" class="button" onclick="calculator.result.value += '7'" />
<input type="button" value="8" class="button" onclick="calculator.result.value += '8'" />
<input type="button" value="9" class="button" onclick="calculator.result.value += '9'" />
<input type="button" value="-" class="button" onclick="calculator.result.value += '-'" />
<input type="button" value="." class="button" onclick="calculator.result.value += '.'" />
<input type="button" value="0" class="button" onclick="calculator.result.value += '0'" />
<input type="button" value="=" class="button" onclick="calculator.result.value = eval(calculator.result.value)" />
<input type="button" value="+" class="button" onclick="calculator.result.value += '+'" />
<input type="reset" value="清除" class="button" />
</div>
</form>
</div>
</body>
</html
原文地址: https://www.cveoy.top/t/topic/cpit 著作权归作者所有。请勿转载和采集!