Skip to content

Commit 43b56fa

Browse files
remoolBremoolB
authored
Add files via upload
1 parent ab5719e commit 43b56fa

7 files changed

+448
-0
lines changed

‎background.jpg

298 KB
Loading

‎compute_index.html

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<!DOCTYPE html>
2+
<html lang="zh-CN">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>简易计算器</title>
7+
<link rel="stylesheet" href="compute_style.css">
8+
</head>
9+
<body>
10+
<div class="calculator">
11+
<input type="text" id="display" disabled>
12+
<div class="buttons">
13+
<button onclick="clearDisplay()">C</button>
14+
<button onclick="deleteLast()">⌫</button>
15+
<button onclick="appendOperator('/')">/</button>
16+
<button onclick="appendOperator('*')">*</button>
17+
18+
<button onclick="appendNumber(7)">7</button>
19+
<button onclick="appendNumber(8)">8</button>
20+
<button onclick="appendNumber(9)">9</button>
21+
<button onclick="appendOperator('-')">-</button>
22+
23+
<button onclick="appendNumber(4)">4</button>
24+
<button onclick="appendNumber(5)">5</button>
25+
<button onclick="appendNumber(6)">6</button>
26+
<button onclick="appendOperator('+')">+</button>
27+
28+
<button onclick="appendNumber(1)">1</button>
29+
<button onclick="appendNumber(2)">2</button>
30+
<button onclick="appendNumber(3)">3</button>
31+
<button onclick="calculateResult()">=</button>
32+
33+
<button onclick="appendNumber(0)" class="zero">0</button>
34+
<button onclick="appendOperator('.')">.</button>
35+
<button onclick="showProgram()">程</button>
36+
</div>
37+
</div>
38+
<script src="compute_script.js"></script>
39+
</body>
40+
</html>

‎compute_script.js

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
let display = document.getElementById('display');
2+
3+
function appendNumber(number) {
4+
display.value += number;
5+
}
6+
7+
function appendOperator(operator) {
8+
// 防止连续输入运算符
9+
if (display.value === "" && operator === "-") {
10+
display.value += operator;
11+
} else if (display.value !== "" && !isNaN(display.value.slice(-1))) {
12+
display.value += operator;
13+
}
14+
}
15+
16+
function clearDisplay() {
17+
display.value = "";
18+
}
19+
20+
function deleteLast() {
21+
display.value = display.value.slice(0, -1);
22+
}
23+
24+
function calculateResult() {
25+
try {
26+
display.value = eval(display.value);
27+
} catch (e) {
28+
display.value = "错误";
29+
}
30+
}
31+
32+
function showProgram() {
33+
display.value += "程";
34+
}
35+

‎compute_style.css

+60
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
display: flex;
9+
justify-content: center;
10+
align-items: center;
11+
height: 100vh;
12+
background-color: #f4f4f4;
13+
font-family: Arial, sans-serif;
14+
}
15+
16+
.calculator {
17+
background-color: #fff;
18+
padding: 20px;
19+
border-radius: 10px;
20+
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
21+
}
22+
23+
#display {
24+
width: 100%;
25+
padding: 15px;
26+
font-size: 2rem;
27+
text-align: right;
28+
border: none;
29+
background-color: #f4f4f4;
30+
margin-bottom: 20px;
31+
border-radius: 5px;
32+
}
33+
34+
.buttons {
35+
display: grid;
36+
grid-template-columns: repeat(4, 1fr);
37+
gap: 10px;
38+
}
39+
40+
button {
41+
padding: 20px;
42+
font-size: 1.5rem;
43+
border: none;
44+
background-color: #ddd;
45+
border-radius: 5px;
46+
cursor: pointer;
47+
transition: background-color 0.3s;
48+
}
49+
50+
button:hover {
51+
background-color: #bbb;
52+
}
53+
54+
.zero {
55+
grid-column: span 2;
56+
}
57+
58+
button:active {
59+
background-color: #999;
60+
}

‎index.html

+67
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
<!DOCTYPE html>
2+
<html lang="zh-CN">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>个人主页</title>
7+
<link rel="stylesheet" href="style.css">
8+
</head>
9+
<body>
10+
<!-- 汉堡菜单按钮 -->
11+
<div class="hamburger">
12+
<div></div>
13+
<div></div>
14+
<div></div>
15+
</div>
16+
17+
<!-- 侧边栏 -->
18+
<nav class="sidebar">
19+
<h2>白昼</h2>
20+
<ul>
21+
<li><a href="#about">个人简介</a></li>
22+
<li><a href="#projects">项目展示</a></li>
23+
<li><a href="#contact">联系方式</a></li>
24+
</ul>
25+
</nav>
26+
27+
<!-- 主页大背景区 -->
28+
<header class="hero">
29+
<h1>白昼</h1>
30+
</header>
31+
32+
<!-- 个人简介部分 -->
33+
<section id="about" class="section">
34+
<h2>关于我</h2>
35+
<h5>ECNU24级软工</h5>
36+
</section>
37+
38+
<!-- 项目展示部分 -->
39+
<section id="projects" class="section">
40+
<h2>项目展示</h2>
41+
<div class="projects-container">
42+
<div class="project-card">
43+
<p><a href="https://remoolb.github.io/my-first-repo/" target="_blank"><h3>陈豆豆</h3></a></p>
44+
</div>
45+
<div class="project-card">
46+
<p><a href="compute_index.html" target="_blank"><h3>程&计算器</h3></a></p>
47+
</div>
48+
</div>
49+
</section>
50+
51+
<!-- 联系方式部分 -->
52+
<section id="contact" class="section">
53+
<h2>联系方式</h2>
54+
<ul>
55+
<li>WeChat : GLesliEF</li>
56+
<li>QQ: 1561662079</li>
57+
<li>Phone number：18019785023</li>
58+
</ul>
59+
</section>
60+
61+
<footer>
62+
<p>&copy;繁荣</p>
63+
</footer>
64+
65+
<script src="script.js"></script>
66+
</body>
67+
</html>

‎script.js

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
// 此文件可以扩展页面的交互功能，例如导航栏滚动或动态加载项目
2+
// 例如：平滑滚动效果
3+
document.querySelectorAll('nav a').forEach(anchor => {
4+
anchor.addEventListener('click', function (e) {
5+
e.preventDefault();
6+
const targetId = this.getAttribute('href');
7+
document.querySelector(targetId).scrollIntoView({
8+
behavior: 'smooth'
9+
});
10+
});
11+
});
12+
// 获取汉堡菜单和侧边栏元素
13+
const hamburger = document.querySelector('.hamburger');
14+
const sidebar = document.querySelector('.sidebar');
15+
16+
// 点击汉堡菜单，切换侧边栏的显示状态
17+
hamburger.addEventListener('click', () => {
18+
sidebar.classList.toggle('active');
19+
});

0 commit comments

Comments
 (0)