实验3 – 过渡效果和Flex布局实验
提示：需要源码文件的，详见文章末尾，免费自提
实现如下编程内容：
- 参考下图所示，使用HTML和CSS技术编制网页:
要求如下： - 功能模块按钮为倒角矩形方框，长度为150px，高度为60px。
- 在空间宽度足够的情况下，多功能模块按钮可以排在一行，如果不足，则自动换行排列. 模块按钮之间保持合理的间距
- 功能模块按钮的颜色、文字保持不变，图标可自行设定或者省略
- 当鼠标移动到功能模块按钮上方（显示手型图标），按钮呈现为向上浮起，背景颜色变深，请自行根据上述效果设置过渡动画实现。
- 产品标题在窗口放大缩小情况下始终居中。“配置页面”始终保持在右上方。
- 本页面应能做到自动适配多终端显示
先看实现效果 --> 随着页面的缩放，布局自动的变化
*具体实现
<!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>
实验4 – JavaScript基本语法和函数
实现如下编程内容：
1. 从prompt弹窗中输入您的出生年份，然后在弹出对话框中显示您的年龄。
具体实现:
<!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. 根据邮件的重量和用户是否选择加急计算邮费。
计算规则：
重量在1000克以内(包括1000克), 基本费8元。超过1000克的部分，每500克加收超重费4元，不足500克部分按500克计算；如果用户选择加急，多收5元。
在prompt弹窗中输入要寄的物品的重量以及是否要加紧（加急输入yes, 不加急输入no），然后在弹出对话框中显示对应的邮费。
具体实现
<!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. 输入开始范围和结束范围，求这个范围中的所有质数，要求如下：
1）每10个质数输出一行
2）统计质数的个数和质数的和
3）尽量保持美观的输出效果
4）在网页中显示操作结果
具体实现
<!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.编制案例演示递归函数的应用。
<!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.编制案例演示回调函数的应用。
<!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.编制案例演示闭包的应用
<!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>
源码自提（若过期，请私信留言）
实验三：
链接：https://pan.baidu.com/s/1gaHMEgTMFH5n8JKnxaMvQA?pwd=6wuc
提取码：6wuc
实验四：
链接：https://pan.baidu.com/s/12XbeBr66k6X3BJeadpgrnA?pwd=evow
提取码：evow
8790
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
