Experiment 3 – Transition effects and Flex layout experiment
提示：需要源码文件的，详见文章末尾，免费自提
Implement the following programming content:
- Refer to the figure below, use HTML and CSS technology to prepare web pages:
the requirements are as follows: - The function module button is a chamfered rectangular box with a length of 150px and a height of 60px.
- When the space width is sufficient, the multi-function module buttons can be arranged in a row. If there is insufficient space, the multi-function module buttons will be automatically arranged in a new row. Maintain a reasonable spacing between module buttons.
- The color and text of the function module buttons remain unchanged, and the icons can be set or omitted.
- When the mouse moves over the function module button (the hand icon is displayed), the button appears to float upward and the background color becomes darker. Please set the transition animation according to the above effect.
- The product title is always centered when the window is zoomed in or out. The "Configuration Page" always remains at the top right.
- This page should be able to automatically adapt to multi-terminal display
Let’s take a look at the implementation first --> As the page zooms, the layout automatically changes
* Implementation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: rgb(224, 239, 239); /* 整个页面的背景色 */
}
.container {
max-width: 940px;
margin: 0 auto;
padding: 20px;
overflow: hidden;
}
.header {
text-align: center;
padding: 10px;
}
.modules {
justify-content: flex-start;
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.module {
width: 180px;
height: 55px;
color: #fff;
text-align: center;
line-height: 60px;
cursor: pointer;
transition: background-color 0.3s, transform 0.3s;
border-radius: 10px; /* 倒角矩形的圆角半径 */
border: none; /* 移除边框 */
margin-bottom: 10px; /* 添加底部间距，确保换行时对齐 */
box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}
.module:nth-child(1) {
background-color: rgb(75, 139, 134); /* 第一个模块的背景色 */
}
.module:nth-child(2) {
background-color: rgb(136, 148, 248); /* 第二个模块的背景色 */
}
.module:nth-child(3) {
background-color: rgb(240, 186, 133); /* 第三个模块的背景色 */
}
.module:nth-child(4) {
background-color: rgb(89, 138, 189); /* 第四个模块的背景色 */
}
.module:nth-child(5) {
background-color: rgb(218, 155, 168); /* 第五个模块的背景色 */
}
.module:hover {
background-color: #375d77; /* 深蓝色背景 */
transform: translateY(-5px);
}
.module img {
width: 25px;
height: 25px;
}
.config {
position: absolute;
top: 10px;
right: 10px;
}
.config button {
background-color: rgb(77, 150, 133); /* 配置页面按钮的背景色 */
color: #fff;
padding: 10px;
border: none;
border-radius: 5px; /* 配置页面按钮的圆角半径 */
cursor: pointer;
transition: background-color 0.3s;
}
.config button:hover {
background-color: #4a8e7d; /* 深绿色背景 */
}
@media screen and (max-width: 600px) {
.modules{
justify-content: center;
}
.module {
width: 50%; /* 每行只能显示一个模块 */
align-self: center;
}
}
</style>
<title>Your Page Title</title>
</head>
<body>
<div class="container">
<div class="header">
<h3 style="color: darkblue;">西安讯飞研发协同办公智能平台</h3>
</div>
<div class="config">
<button>配置页面</button>
</div>
<div class="modules">
<!-- 模块按钮 -->
<div class="module">OA自动化办公平台 <img src="imag/OA.png"></div>
<div class="module">敏捷自动化研发平台 <img src="imag/minjie.png"></div>
<div class="module">自动化测试平台 <img src="imag/ceshi.png"></div>
<div class="module">自动化一键部署平台 <img src="imag/bushu.png"></div>
<div class="module">自动化在线监测平台 <img src="imag/jiance.png"></div>
</div>
</div>
</body>
</html>
Experiment 4 – Basic JavaScript syntax and functions
Implement the following programming content:
1. Enter your birth year from the prompt pop-up window, and then display your age in the pop-up dialog box.
Implementation:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>计算年龄的页面</title>
</head>
<body>
<script>
function calculateAge() {
var birthYear = prompt("请输入您的出生年份", "1990");
if (birthYear !== null) {
// 使用正则表达式检查输入是否为四位数字
var isValidInput = /^\d{4}$/.test(birthYear);
if (isValidInput) {
var currentYear = new Date().getFullYear();
var age = currentYear - parseInt(birthYear);
alert("您的年龄是: " + age + " 岁");
} else {
alert("请输入有效的四位数字年份");
}
} else {
alert("您取消了输入");
}
}
</script>
<div>
<button onclick="calculateAge()">计算年龄</button>
</div>
</body>
</html>
2. Postage is calculated based on the weight of the mail and whether the user chooses expedited shipping.
Calculation rules:
If the weight is within 1000 grams (including 1000 grams), the basic fee is 8 yuan. For parts exceeding 1,000 grams, an overweight fee of 4 yuan will be charged for every 500 grams. Parts under 500 grams will be calculated as 500 grams. If the user chooses to expedite the shipment, an additional 5 yuan will be charged.
In the prompt pop-up window, enter the weight of the item to be sent and whether to expedite it (enter yes for expedited, enter no for not expedited), and then the corresponding postage will be displayed in the pop-up dialog box.
Implementation
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>计算邮费的页面</title>
</head>
<body>
<script>
function calculatePostage() {
var weight = prompt("请输入物品重量（克）", "500");
var isExpress = prompt("是否加急？（yes/no）", "no");
if (weight !== null && isExpress !== null) {
// 将输入的字符串转换为数字
var itemWeight = parseInt(weight);
// 邮费计算规则
var baseFee = 8;
var overweightFee = 4;
var expressFee = 5;
// 计算基本费用
var totalFee = baseFee;
// 计算超重费用
if (itemWeight > 1000) {
var overweight = itemWeight - 1000;
var overweightBlocks = Math.ceil(overweight / 500);
totalFee += overweightBlocks * overweightFee;
}
// 加急费用
if (isExpress.toLowerCase() === "yes") {
totalFee += expressFee;
}
// 弹出对话框显示邮费
alert("您的邮费是：" + totalFee + " 元");
} else {
alert("您取消了输入");
}
}
</script>
<div>
<button onclick="calculatePostage()">计算邮费</button>
</div>
</body>
</html>
3. Enter the starting range and ending range, and find all prime numbers in this range. The requirements are as follows:
1) Output one line for every 10 prime numbers
2) Count the number of prime numbers and the sum of prime numbers
3) Try to maintain a beautiful output effect
4) Display the operation results on the web page
Specific implementation
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>质数范围计算</title>
</head>
<body>
<script>
function isPrime(num) {
if (num <= 1) {
return false;
}
for (let i = 2; i <= Math.sqrt(num); i++) {
if (num % i === 0) {
return false;
}
}
return true;
}
function findPrimesInRange() {
var startRange = prompt("请输入开始范围", "1");
var endRange = prompt("请输入结束范围", "100");
if (startRange !== null && endRange !== null) {
var start = parseInt(startRange);
var end = parseInt(endRange);
var primes = [];
var count = 0;
var sum = 0;
for (let i = start; i <= end; i++) {
if (isPrime(i)) {
primes.push(i);
count++;
sum += i;
}
}
// 在网页中显示结果
var resultDiv = document.getElementById("result");
resultDiv.innerHTML = "<p>在范围 " + start + " 到 " + end + " 中的质数有：</p>";
for (let i = 0; i < primes.length; i++) {
resultDiv.innerHTML += primes[i] + " ";
if ((i + 1) % 10 === 0) {
resultDiv.innerHTML += "<br>";
}
}
resultDiv.innerHTML += "<p>质数的个数为：" + count + "</p>";
resultDiv.innerHTML += "<p>质数的和为：" + sum + "</p>";
} else {
alert("您取消了输入");
}
}
</script>
<div>
<button onclick="findPrimesInRange()">计算质数</button>
</div>
<div id="result"></div>
</body>
</html>
4. Prepare cases to demonstrate the application of recursive functions.
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>递归函数演示</title>
</head>
<body>
<script>
function factorial(n) {
// 基本情况：0的阶乘是1
if (n === 0) {
return 1;
}
// 递归调用：n的阶乘等于n乘以(n-1)的阶乘
else {
return n * factorial(n - 1);
}
}
function demonstrateRecursion() {
var number = prompt("请输入一个非负整数", "5");
if (number !== null) {
var inputNumber = parseInt(number);
if (!isNaN(inputNumber) && inputNumber >= 0) {
var result = factorial(inputNumber);
alert(inputNumber + "的阶乘是：" + result);
} else {
alert("请输入有效的非负整数");
}
} else {
alert("您取消了输入");
}
}
</script>
<div>
<button onclick="demonstrateRecursion()">演示递归</button>
</div>
</body>
</html>
5. Prepare a case to demonstrate the application of callback function.
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>回调函数演示</title>
</head>
<body>
<script>
// 模拟异步操作，例如从服务器获取数据
function fetchData(callback) {
setTimeout(function () {
// 模拟异步操作完成后的数据
var data = {
name: "John Doe",
age: 30,
city: "Example City"
};
// 调用回调函数并传递数据
callback(data);
}, 2000); // 模拟2秒延迟
}
// 回调函数，用于处理异步操作完成后的数据
function handleData(data) {
alert("成功获取数据：" + JSON.stringify(data));
}
// 用户触发异步操作，并传递回调函数
function demonstrateCallback() {
alert("开始获取数据...");
fetchData(handleData);
}
</script>
<div>
<button onclick="demonstrateCallback()">演示回调函数</button>
</div>
</body>
</html>
6. Prepare cases to demonstrate the application of closures
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>闭包演示</title>
</head>
<body>
<script>
// 闭包计数器
function createCounter() {
let count = 0; // 内部变量，被闭包引用
function increment() {
count++;
alert("计数器值：" + count);
}
return increment; // 返回内部函数，形成闭包
}
// 使用闭包计数器
function demonstrateClosure() {
let counter = createCounter();
counter(); // 输出 1
counter(); // 输出 2
counter(); // 输出 3
}
// 闭包在异步操作中的应用
function asyncOperation(callback) {
setTimeout(function () {
let result = "异步操作完成";
callback(result);
}, 2000); // 模拟2秒延迟
}
function demonstrateClosureInAsync() {
let status = "等待异步操作...";
asyncOperation(function (result) {
// 在回调函数中使用了外部变量 status，形成闭包
status = result;
alert(status);
});
}
</script>
<div>
<button onclick="demonstrateClosure()">演示闭包计数器</button>
</div>
<div>
<button onclick="demonstrateClosureInAsync()">演示闭包在异步操作中的应用</button>
</div>
</body>
</html>
Source code self-pickup (if it expires, please leave a private message)
Experiment three:
Link: https://pan.baidu.com/s/1gaHMEgTMFH5n8JKnxaMvQA?pwd=6wuc
Extraction code: 6wuc
Experiment 4:
Link: https://pan.baidu.com/s/12XbeBr66k6X3BJeadpgrnA?pwd=evow
Extraction code: evow