!DOCTYPE htmlhtmlhead meta charset=UTF-8 title计算器title style 设置页面样式 body background-color #f2f2f2; text-align center; 让页面内容居中对齐 #calculator margin 50 auto; 水平居中 width 1000px; 设置计算器
很高兴为您服务！以下是美化后的代码，希望您喜欢：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>计算器</title>
<style>
/* 设置页面样式 */
body {
background-color: #f2f2f2;
text-align: center; /* 让页面内容居中对齐 */
font-family: 'Helvetica Neue', sans-serif;
}
/* 设置计算器样式 */
#calculator {
margin: 50px auto; /* 水平居中 */
width: 400px; /* 设置计算器宽度 */
border-radius: 10px;
background-color: #fff;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
padding: 20px;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
/* 设置结果显示区域样式 */
#result {
font-size: 30px;
width: 100%;
height: 80px;
margin-bottom: 20px;
padding: 10px;
text-align: right;
box-shadow: inset 2px 2px 10px rgba(0, 0, 0, 0.3);
border-radius: 5px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
/* 设置按钮样式 */
button {
font-size: 30px;
color: #333;
padding: 20px 30px;
background-color: #fff;
border: 2px solid #333;
border-radius: 5px;
margin: 5px;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
outline: none;
transition: all 0.2s ease-in-out;
}
/* 设置数字按钮样式 */
.num-btn {
background-color: #f2f2f2;
}
/* 设置操作符按钮样式 */
.opr-btn {
background-color: #333;
color: #fff;
}
/* 鼠标悬浮按钮颜色更改与放大 */
button:hover {
background-color: #333;
color: #fff;
transform: scale(1.1);
}
/* 鼠标按下按钮颜色更改与缩小 */
button:active {
box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.3);
transform: scale(0.98);
}
/* 设置功能按钮样式 */
.func-btn {
background-color: #f2f2f2;
border: none;
box-shadow: none;
color: #333;
font-size: 20px;
margin: 10px;
padding: 10px 20px;
border-radius: 5px;
transition: all 0.2s ease-in-out;
}
/* 鼠标悬浮功能按钮颜色更改与放大 */
.func-btn:hover {
background-color: #333;
color: #fff;
transform: scale(1.1);
}
/* 鼠标按下功能按钮颜色更改与缩小 */
.func-btn:active {
box-shadow: none;
transform: scale(0.98);
}
/* 设置背景图片样式 */
body {
background-image: url('https://picsum.photos/id/1069/1000/1000');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
</style>
</head>
<body>
<div id="calculator">
<!-- 设置结果显示区域 -->
<div id="result"></div>
<!-- 设置数字按钮 -->
<button class="num-btn" onclick="buttonClick('7')">7</button>
<button class="num-btn" onclick="buttonClick('8')">8</button>
<button class="num-btn" onclick="buttonClick('9')">9</button>
<button class="opr-btn" onclick="buttonClick('+')">+</button><br>
<button class="num-btn" onclick="buttonClick('4')">4</button>
<button class="num-btn" onclick="buttonClick('5')">5</button>
<button class="num-btn" onclick="buttonClick('6')">6</button>
<button class="opr-btn" onclick="buttonClick('-')">-</button><br>
<button class="num-btn" onclick="buttonClick('1')">1</button>
<button class="num-btn" onclick="buttonClick('2')">2</button>
<button class="num-btn" onclick="buttonClick('3')">3</button>
<button class="opr-btn" onclick="buttonClick('*')">×</button><br>
<button class="num-btn" onclick="buttonClick('0')">0</button>
<button class="opr-btn" onclick="buttonClick('/')">÷</button>
<!-- 设置功能按钮 -->
<button class="func-btn" onclick="clearResult()">清空</button>
<button class="func-btn" onclick="calculate()">=</button>
</div>
<!-- JavaScript代码 -->
<script>
// 获取结果显示区域元素
var result = document.getElementById("result");
// 处理按钮点击事件
function buttonClick(value) {
result.innerHTML += value;
}
// 计算结果并显示
function calculate() {
try {
result.innerHTML = eval(result.innerHTML);
} catch (e) {
result.innerHTML = "错误";
}
}
// 清空结果显示区域
function clearResult() {
result.innerHTML = "";
}
</script>
</body>
</html>
原文地址: http://www.cveoy.top/t/topic/bfyj 著作权归作者所有。请勿转载和采集!