HTML文档
<div class="calculator">
<div class="calculate">
<input class="result" type="text" value="0" readonly/>
</div>
<div class="btns" onclick="calculator(event)">
<div class="func1">
<button>Rad</button>
<button>Deg</button>
<button>Inv</button>
<button>(</button>
<button>)</button>
<button>CE</button>
<button>AC</button>
</div>
<div class="func2">
<div class="func21">
<button>x!</button>
<button>sin</button>
<button>cos</button>
<button>π</button>
<button>tan</button>
<button>log</button>
<button>e</button>
<button>ln</button>
<button>√</button>
<button>EXP</button>
<button>Ans</button>
<button>xy</button>
</div>
<div class="numb">
<button>7</button>
<button>8</button>
<button>9</button>
<button>4</button>
<button>5</button>
<button>6</button>
<button>1</button>
<button>2</button>
<button>3</button>
<button>0</button>
<button>.</button>
<button>=</button>
</div>
<div class="func22">
<button>÷</button>
<button>×</button>
<button>-</button>
<button>+</button>
</div>
</div>
</div>
</div>
<script src="script.js"></script>
CSS文档
/* 初始化 */
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
background-color: #fff;
}
.calculator{
min-width: 460px;
max-width: 660px;
height: 550px;
border-radius: 15px;
background-color: #666;
display: grid;
grid-template-rows: 150px 1fr;
margin: 40px auto;
}
.calculator .calculate{
background-color: #cecece;
border: none;
/* padding: 5px; */
margin: 15px;
display: grid;
grid-template-rows: 1fr;
border-radius: 15px;
}
input{
border: none;
}
.calculator .calculate *{
font-size: 32px;
font-weight: bolder;
text-align: right;
padding: 6px;
border: none;
outline: none;
border-radius: 8px;
background-color: #cecece;
box-shadow: 2px 2px 2px #333 inset;
}
.calculator .btns *{
display: grid;
grid-template-columns: repeat(90px, 1fr);
grid-auto-rows: 50px;
gap: 15px;
padding: 15px;
}
.calculator .btns .func1{
display: grid;
grid-template-columns: repeat(7, 1fr);
grid-auto-rows: 50px;
gap: 15px;
}
.calculator .btns .func2{
display: grid;
grid-template-columns: 3fr 3fr 1fr;
grid-auto-rows: 50px;
/* gap: 15px; */
}
.calculator .btns .func2 .func21{
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 50px;
gap: 15px;
}
.calculator .btns .func2 .numb{
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 50px;
gap: 15px;
}
.calculator .btns .func22{
display: grid;
grid-template-columns: repeat(1fr);
grid-auto-rows: 50px;
gap: 15px;
}
.calculator .btns *{
border-radius: 8px;
font-size: 22px;
font-weight: 500px;
border: none;
}
button{
border-radius: 15px;
color: #888;
border: none;
outline: none;
box-shadow: 2px 2px 2px #000;
}
.calculator .calculate .result {
font-size: 32px;
font-weight: bolder;
text-align: right;
}
button:hover {
cursor: pointer;
opacity: 0.7;
color: white;
transition: 0.3s;
background-color: lightblue;
}
Javascript文档
function calculator(ev){
const result = document.querySelector('.result')
if (ev.target.tagName !== 'BUTTON') return false
const curBtn = ev.target
// 获取按钮内容
let content = curBtn.textContent
let num = ['0','1','2','3','4','5','6','7','8','9']
// eval('字符串表达式'): 用于计算
if(result.value == 0){
if(num.includes(content)){
result.value = content
}else{
result.value = 0
}
}else{
switch (content) {
case 'AC':
result.value = 0
break;
case 'CE':
if (result.value.length == 1 || result.value == '错误') {
result.value = 0
} else {
result.value = result.value.slice(0, -1)
}
break
// 计算
case '=':
let tmpResult = 0
try {
result.value = result.value.replace('×', '*')
result.value = result.value.replace('÷', '/')
// 计算字符串表达式
tmpResult = eval(result.value)
// 设置小数位
if (tmpResult.toString().includes('.')) {
tmpResult = tmpResult.toFixed(2)
// 去除多余的0
tmpResult = parseFloat(tmpResult)
}
if(tmpResult == 'Infinity'){
tmpResult = '错误'
}
// 显示出结果
result.value = tmpResult
} catch {
result.value = '错误'
}
break
default:
// 防止出现前导0
if (result.value == 0 || result.value == '错误') result.value = ''
console.log(result.value[-0]);
if(num.includes(result.value[result.value.length-1]) == false && num.includes(content) == false) result.value = result.value.slice(0, -1)
result.value += content
}
}
}
效果1:句首只能是数字
效果2:不能连续出现符合,否则替换掉前面的符号
效果3:除以零时显示“错误”
总结:
作业要求的效果基本实现了,但不够优雅、简洁;大部分按键的功能还没添加,以后再完善吧!