请使用html和JavaScript和css写一个样式精美的科学计算器
时间: 2023-03-07 17:24:12 浏览: 92
我可以用下面的代码来写一个样式精美的科学计算器:<html>
<head>
<style type="text/css">
body {
font-family: sans-serif;
background-color: #F1F1F1;
}
#calc-container {
position: relative;
width: 400px;
height: 300px;
background-color: #FFF;
border-radius: 10px;
padding: 10px;
box-shadow: 0px 0px 5px #555;
}
.calc-row {
display: flex;
align-items: center;
margin-bottom: 10px;
}
.calc-num {
width: 70px;
height: 70px;
background-color: #DDD;
margin-right: 10px;
font-size: 30px;
text-align: center;
border-radius: 5px;
line-height: 70px;
cursor: pointer;
}
.calc-op {
width: 70px;
height: 70px;
background-color: #AAA;
margin-right: 10px;
font-size: 30px;
text-align: center;
border-radius: 5px;
line-height: 70px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="calc-container">
<div class="calc-row">
<div class="calc-num" onclick="addNumber(7)">7</div>
<div class="calc-num" onclick="addNumber(8)">8</div>
<div class="calc-num" onclick="addNumber(9)">9</div>
<div class="calc-op" onclick="addOperator('+')">+</div>
</div>
<div class="calc-row">
<div class="calc-num" onclick="addNumber(4)">4</div>
<div class="calc-num" onclick="addNumber(5)">5</div>
<div class="calc-num" onclick="addNumber(6)">6</div>
<div class="calc-op" onclick="addOperator('-')">-</div>
</div>
<div class="calc-row">
<div class="calc-num" onclick="addNumber(1)">1</div>
<div class="calc-num" onclick="addNumber(2)">2</div>
<div class="calc-num" onclick="addNumber(3)">3</div>
<div class="calc-op" onclick="addOperator('*')">*</div>
</div>
<div class="calc-row">
<div class="calc-num" onclick="addNumber(0)">0</div>
<div class="calc-num" onclick="addNumber('.')">.</div>
<div class="calc-num" onclick="calculate()">=</div>
<div class="calc-op" onclick="addOperator('/')">/</div>
</div>
</div> <script type="text/javascript">
let calcInput = "";
let result = 0;
function addNumber(num) {
calcInput += num;
console.log(calcInput);
}
function addOperator(op) {
calcInput += op;
console.log(calcInput);
}
function calculate() {
result = eval(calcInput);
alert(result);
}
</script>
</body>
</html>