- js27115 的博客
系统是什么
-
js27115
LV 1
@
2026-9-14 10:15:53
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>第一节 身边系统初探秘｜互动学习</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Microsoft Yahei", sans-serif;
}
body {
background-color: #fff8ef;
color: #333;
line-height: 1.7;
}
.container {
max-width: 1000px;
margin: 0 auto;
padding: 20px;
}
.page-card {
background: #ffffff;
border-radius: 16px;
padding: 30px;
margin-bottom:24px;
box-shadow: 0 2px 12px #00000014;
min-height: 520px;
}
h1{
color:#e6772e;
text-align:center;
margin-bottom:12px;
}
h2{
color:#d46b22;
margin:16px 0 10px;
border-left:5px solid #ff9b54;
padding-left:12px;
}
.tip-box{
background:#fff2e4;
border-radius:10px;
padding:16px;
margin:14px 0;
}
/* 翻页 */
.page-wrap{
position:relative;
}
.slide-page{
display: none;
}
.slide-page.active{
display:block;
}
.page-nav{
display:flex;
justify-content:space-between;
margin-top:20px;
}
.page-nav button{
background:#ff8c38;
color:white;
border:none;
padding:10px 24px;
border-radius:8px;
font-size:16px;
cursor:pointer;
}
.page-nav button:disabled{
background:#cccccc;
cursor:not-allowed;
}
.page-index{
text-align:center;
margin:8px 0;
color:#884c1e;
}
/* 判断题交互 */
.judge-item{
margin:12px 0;
padding:14px;
border:1px solid #ffddbc;
border-radius:8px;
}
.btn-group button{
padding:6px 18px;
margin:4px;
border:none;
border-radius:6px;
cursor:pointer;
font-size:16px;
}
.btn-right{
background:#42b983;
color:white;
}
.btn-wrong{
background:#ff6b6b;
color:white;
}
.feedback{
margin-top:8px;
font-weight:bold;
}
.correct{
color:#27ae60;
}
.error{
color:#e74c3c;
}
/* 填表交互 */
.table-interactive{
width:100%;
border-collapse: collapse;
margin:15px 0;
}
.table-interactive th,.table-interactive td{
border:1px solid #ffd2ad;
padding:12px;
}
.table-interactive th{
background:#ffe9d6;
}
input{
width:100%;
padding:8px;
border:1px solid #ffc89c;
border-radius:4px;
font-size:15px;
}
/* 拖拽分类游戏 */
.game-container{
margin:20px 0;
}
.drop-area-row{
display:grid;
grid-template-columns:1fr 1fr 1fr;
gap:12px;
}
.drop-zone{
min-height:180px;
border:2px dashed #ff9b54;
border-radius:10px;
padding:12px;
background:#fff7ec;
}
.drop-zone h4{
text-align:center;
color:#d46b22;
}
.item-pool{
margin-top:16px;
padding:12px;
background:#fff2e4;
border-radius:8px;
}
.drag-item{
display:inline-block;
background:#ff8c38;
color:white;
padding:6px 12px;
border-radius:6px;
margin:4px;
cursor:grab;
}
.drag-item:active{
cursor:grabbing;
}
.game-feedback{
margin-top:12px;
}
/* 控制系统模拟器 */
.sim-box{
border:2px solid #ffddbc;
border-radius:12px;
padding:20px;
margin:16px 0;
}
.flow-sim{
display:flex;
gap:8px;
justify-content:center;
flex-wrap:wrap;
margin:14px 0;
}
.sim-node{
padding:12px 16px;
background:#f1f1f1;
border-radius:8px;
}
.sim-node.active{
background:#ffdfc4;
}
.sim-arrow{
font-size:22px;
line-height:2;
}
.sim-log{
background:#222;
color:#42b983;
padding:10px;
border-radius:6px;
min-height:80px;
}
.hide{
display:none;
}
</style>
</head>
<body>
<div class="container">
<div class="page-card page-wrap">
<!-- 第1页 标题+学习目标 -->
<div class="slide-page active" data-page="1">
<h1>第一节 身边系统初探秘</h1>
<div class="tip-box">
<h3>📖学习目标</h3>
<ol>
<li>能说出系统的概念，并列举出生活中常见的系统</li>
<li>能说出不同的系统类型，并设计简单的复合系统</li>
<li>能描述系统的工作过程，并分析生活中常见的控制系统</li>
</ol>
</div>
</div>
<!-- 第2页 情境引入 -->
<div class="slide-page" data-page="2">
<h2>🚩情境引入</h2>
<p>小明和爸妈暑假旅游回到家中，家里闷热，热水器也没有打开。小明心想：如果出门在外，就可以提前自动打开空调、热水器，该多好！</p>
<div class="tip-box">
<p>生活中类似的还有：智能家居、自动售货机、高铁调度系统、生态鱼缸。</p>
<p><strong>思考：</strong>小明的生态缸，鱼儿不经常喂食也可以存活，这是什么原因？</p>
<button onclick="showAnswer1()">点击查看提示</button>
<div id="ans1" class="hide" style="margin-top:10px">
✨这是一个<strong>微型生态系统</strong>，模仿大自然，各个部分互相配合，可以实现自给自足。
</div>
</div>
</div>
<!-- 第3页 什么是系统 + 判断题 -->
<div class="slide-page" data-page="3">
<h2>🔍新知：什么是系统？</h2>
<div class="tip-box">
<p><strong>系统定义：</strong>由<strong>相互联系、相互作用</strong>的若干部分构成，形成一个有机整体，并具有某些特定功能，就叫系统。</p>
<p>例子：人体消化系统、呼吸系统、交通系统、班级系统、声控灯系统。</p>
</div>
<p>🎯声控灯系统组成：电源、声音传感器、延时开关、灯泡</p>
<p>⚠️重点：系统不是部件简单堆砌！零件全部拆开单独摆放，无法实现开灯功能。<br/>判断是否是系统看三点：</p>
<ol>
<li>是否有两个及以上组成部分？</li>
<li>各个部分之间有没有互相联系、互相作用？</li>
<li>组合后有没有产生整体的特定功能？</li>
</ol>
<h3>✍互动判断题，请你来判断对错</h3>
<div class="judge-item">
<p>1.一个由多个独立个体组成的集合就是一个系统。（）</p>
<div class="btn-group">
<button class="btn-right" onclick="checkQ1(true)">√</button>
<button class="btn-wrong" onclick="checkQ1(false)">×</button>
</div>
<div id="feed1" class="feedback"></div>
</div>
<div class="judge-item">
<p>2.系统必须包含至少两个或两个以上的组成部分。（）</p>
<div class="btn-group">
<button class="btn-right" onclick="checkQ2(true)">√</button>
<button class="btn-wrong" onclick="checkQ2(false)">×</button>
</div>
<div id="feed2" class="feedback"></div>
</div>
<div class="judge-item">
<p>3.系统的功能完全取决于其组成部分的性质。（）</p>
<div class="btn-group">
<button class="btn-right" onclick="checkQ3(true)">√</button>
<button class="btn-wrong" onclick="checkQ3(false)">×</button>
</div>
<div id="feed3" class="feedback"></div>
</div>
</div>
<!-- 第4页 系统分类拖拽游戏 -->
<div class="slide-page" data-page="4">
<h2>📚系统的分类｜拖拽小游戏</h2>
<p>把下面案例拖拽到正确的系统方框中，检验你的学习成果！</p>
<div class="game-container">
<div class="drop-area-row">
<div class="drop-zone" id="drop-natural">
<h4>🌍自然系统</h4>
</div>
<div class="drop-zone" id="drop-artificial">
<h4>🔧人工系统</h4>
</div>
<div class="drop-zone" id="drop-compound">
<h4>🧩复合系统</h4>
</div>
</div>
<div class="item-pool" id="itemPool">
<div class="drag-item" draggable="true" data-type="natural">气候系统</div>
<div class="drag-item" draggable="true" data-type="artificial">智能家居</div>
<div class="drag-item" draggable="true" data-type="compound">微型生态缸</div>
<div class="drag-item" draggable="true" data-type="natural">人体呼吸系统</div>
<div class="drag-item" draggable="true" data-type="artificial">自动售货机</div>
<div class="drag-item" draggable="true" data-type="compound">生态农场</div>
</div>
<div class="game-feedback">
<button onclick="checkGame()">提交批改</button>
<button onclick="resetGame()">重置游戏</button>
<div id="gameResult"></div>
</div>
</div>
<div class="tip-box">
<ul>
<li><strong>自然系统：</strong>大自然本身形成，不是人类制造</li>
<li><strong>人工系统：</strong>由人类设计搭建出来</li>
<li><strong>复合系统：</strong>自然+人工结合在一起</li>
</ul>
</div>
</div>
<!-- 第5页 系统优化填表 -->
<div class="slide-page" data-page="5">
<h2>🛠系统优化：优化生态缸</h2>
<p>思考：给生态缸增加硬件，让它变得更智能，请填写表格。</p>
<table class="table-interactive">
<tr>
<th>增加的硬件元件</th>
<th>优化后实现的功能</th>
</tr>
<tr>
<td><input placeholder="示例：自动喂食元件" id="inp1"></td>
<td><input placeholder="示例：按设定时间投放适量鱼食" id="inp2"></td>
</tr>
<tr>
<td><input placeholder="请输入硬件" id="inp3"></td>
<td><input placeholder="填写对应的功能" id="inp4"></td>
</tr>
</table>
<button onclick="showOptAnswer()">参考示例</button>
<div id="optAns" class="hide tip-box">
参考：<br/>1.水质过滤元件 → 过滤水体杂质，改善水质<br/>2.定时供氧元件 → 到时间自动向水里输送氧气<br/>3.水温传感器+温控设备 → 维持鱼缸合适水温
</div>
</div>
<!-- 第6页 控制系统交互式模拟器 -->
<div class="slide-page" data-page="6">
<h2>⚙控制系统的工作过程：输入→计算→输出</h2>
<p>所有自动控制系统，都遵循这套模型！点击按钮体验两个控制系统模拟器。</p>
<div class="sim-box">
<h3>模拟器一：声控灯系统</h3>
<div class="flow-sim">
<div class="sim-node" id="sc-input">输入(声音传感器)</div>
<span class="sim-arrow">➡</span>
<div class="sim-node" id="sc-calc">计算(延时开关判断)</div>
<span class="sim-arrow">➡</span>
<div class="sim-node" id="sc-output">输出(灯泡)</div>
</div>
<button onclick="runSoundLight()">制造声音，触发系统</button>
<button onclick="resetSoundLight()">重置模拟器</button>
<div class="sim-log" id="scLog">模拟器日志：等待操作...</div>
</div>
<div class="sim-box">
<h3>模拟器二：智慧农场自动灌溉系统</h3>
<div class="flow-sim">
<div class="sim-node" id="ir-input">输入(湿度传感器)</div>
<span class="sim-arrow">➡</span>
<div class="sim-node" id="ir-calc">计算(控制器判断)</div>
<span class="sim-arrow">➡</span>
<div class="sim-node" id="ir-output">输出(灌溉设备)</div>
</div>
<button onclick="runIrrigate()">土壤变干燥，触发系统</button>
<button onclick="resetIrrigate()">重置模拟器</button>
<div class="sim-log" id="irLog">模拟器日志：等待操作...</div>
</div>
</div>
<!-- 第7页 课堂小测 -->
<div class="slide-page" data-page="7">
<h2>📝课堂小测</h2>
<div class="quiz-item">
<p>1.什么是系统？简单说一说你的理解</p>
<input placeholder="在这里输入你的答案" id="quiz1">
</div>
<div class="quiz-item">
<p>2.系统分为哪三类？</p>
<input placeholder="在这里输入你的答案" id="quiz2">
</div>
<div class="quiz-item">
<p>3.描述自动灌溉系统的：输入、计算、输出分别是什么？</p>
<input placeholder="在这里输入你的答案" id="quiz3">
</div>
<button onclick="showQuizAnswer()">查看参考答案</button>
<div id="quizAns" class="hide tip-box">
<p>1.由互相联系、互相作用多个部分，组成有机整体，具备特定功能就是系统。</p>
<p>2.自然系统、人工系统、复合系统</p>
<p>3.输入：土壤湿度传感器数据；计算：控制器判断湿度是否低于设定值；输出：启动灌溉设备浇水。</p>
</div>
<br/>
<p>🎉本节课到此结束！你已经完成《身边系统初探秘》全部学习。</p>
</div>
<div class="page-index">第 <span id="currentPage">1</span> / 7 页</div>
<div class="page-nav">
<button id="prevBtn">上一页</button>
<button id="nextBtn">下一页</button>
</div>
</div>
</div>
<script>
// ==========翻页逻辑==========
const totalPage = 7;
let curPage = 1;
const pages = document.querySelectorAll('.slide-page');
const curPageDom = document.getElementById('currentPage');
const prevBtn = document.getElementById('prevBtn');
const nextBtn = document.getElementById('nextBtn');
function renderPage(){
pages.forEach(p=>p.classList.remove('active'));
document.querySelector(`.slide-page[data-page="${curPage}"]`).classList.add('active');
curPageDom.innerText = curPage;
prevBtn.disabled = curPage <= 1;
nextBtn.disabled = curPage >= totalPage;
}
prevBtn.addEventListener('click',()=>{
if(curPage>1){
curPage--;renderPage();
}
});
nextBtn.addEventListener('click',()=>{
if(curPage<totalPage){
curPage++;renderPage();
}
});
// 第2页提示
function showAnswer1(){
document.getElementById("ans1").classList.remove("hide");
}
// ==========判断题==========
function checkQ1(userSelect){
const feed = document.getElementById("feed1");
if(userSelect===false){
feed.innerHTML="<span class='correct'>✅回答正确！多个独立个体只是集合，部件之间没有互相联系，不能叫系统。</span>";
}else{
feed.innerHTML="<span class='error'>❌不对，必须要部件之间互相联系，形成整体功能，才是系统。</span>";
}
}
function checkQ2(userSelect){
const feed = document.getElementById("feed2");
if(userSelect===true){
feed.innerHTML="<span class='correct'>✅回答正确，系统至少要有2个及以上组成部分。</span>";
}else{
feed.innerHTML="<span class='error'>❌答错，请回忆系统的构成条件。</span>";
}
}
function checkQ3(userSelect){
const feed = document.getElementById("feed3");
if(userSelect===false){
feed.innerHTML="<span class='correct'>✅正确！系统功能不只看零件本身，更要看零件之间的连接结构。</span>";
}else{
feed.innerHTML="<span class='error'>❌错误，整体功能不等于零件简单相加。</span>";
}
}
// ==========拖拽分类游戏==========
let dragTarget = null;
document.querySelectorAll('.drag-item').forEach(item=>{
item.addEventListener('dragstart',e=>{
dragTarget = e.target;
})
})
//放置区域
const zones = [
{dom:document.getElementById('drop-natural'), accept:"natural"},
{dom:document.getElementById('drop-artificial'), accept:"artificial"},
{dom:document.getElementById('drop-compound'), accept:"compound"},
];
zones.forEach(z=>{
z.dom.addEventListener('dragover',e=>e.preventDefault());
z.dom.addEventListener('drop',e=>{
e.preventDefault();
if(dragTarget){
z.dom.appendChild(dragTarget);
dragTarget=null;
}
})
})
function checkGame(){
let score=0;
let total=6;
let msg=[];
//检查自然区
const natItems = Array.from(document.querySelector('#drop-natural').querySelectorAll('.drag-item')).map(i=>i.dataset.type);
const artItems = Array.from(document.querySelector('#drop-artificial').querySelectorAll('.drag-item')).map(i=>i.dataset.type);
const comItems = Array.from(document.querySelector('#drop-compound').querySelectorAll('.drag-item')).map(i=>i.dataset.type);
natItems.forEach(t=>{if(t==="natural")score++;else msg.push(`【${t}】放到自然系统是错误`)})
artItems.forEach(t=>{if(t==="artificial")score++;else msg.push(`【${t}】放到人工系统是错误`)})
comItems.forEach(t=>{if(t==="compound")score++;else msg.push(`【${t}】放到复合系统是错误`)})
const resDom = document.getElementById('gameResult');
if(score===total){
resDom.innerHTML = `<span class="correct">🎉全部正确！${score}/${total}分，你掌握了系统分类</span>`;
}else{
resDom.innerHTML = `<span class="error">得分：${score}/${total}。${msg.join("；")}</span>`
}
}
function resetGame(){
const pool = document.getElementById('itemPool');
zones.forEach(z=>{
const items = z.dom.querySelectorAll('.drag-item');
items.forEach(i=>pool.appendChild(i));
})
document.getElementById('gameResult').innerHTML="";
}
// ==========系统优化参考答案==========
function showOptAnswer(){
document.getElementById("optAns").classList.remove("hide");
}
// ==========声控灯模拟器==========
async function runSoundLight(){
const log = document.getElementById('scLog');
const inNode = document.getElementById('sc-input');
const calcNode = document.getElementById('sc-calc');
const outNode = document.getElementById('sc-output');
log.innerText = "日志：①输入阶段：声音传感器收到脚步声（声音信号）";
inNode.classList.add('active');
await sleep(1200);
log.innerText = "日志：②计算阶段：延时开关判断，声音足够大，满足开灯条件";
calcNode.classList.add('active');
await sleep(1200);
log.innerText = "日志：③输出阶段 → 灯泡点亮，延时一段时间自动熄灭！";
outNode.classList.add('active');
await sleep(2000);
log.innerText = "日志：延时结束，灯泡熄灭，一轮系统工作完成。";
}
function resetSoundLight(){
document.getElementById('sc-input').classList.remove('active');
document.getElementById('sc-calc').classList.remove('active');
document.getElementById('sc-output').classList.remove('active');
document.getElementById('scLog').innerText="模拟器日志：等待操作...";
}
// ==========灌溉模拟器==========
async function runIrrigate(){
const log = document.getElementById('irLog');
const inNode = document.getElementById('ir-input');
const calcNode = document.getElementById('ir-calc');
const outNode = document.getElementById('ir-output');
log.innerText = "日志：①输入阶段：湿度传感器采集土壤数据，检测土壤干燥";
inNode.classList.add('active');
await sleep(1200);
log.innerText = "日志：②计算阶段：控制器对比预设湿度，判断土壤湿度过低，需要浇水";
calcNode.classList.add('active');
await sleep(1200);
log.innerText = "日志：③输出阶段 → 启动灌溉设备，开始浇水！";
outNode.classList.add('active');
}
function resetIrrigate(){
document.getElementById('ir-input').classList.remove('active');
document.getElementById('ir-calc').classList.remove('active');
document.getElementById('ir-output').classList.remove('active');
document.getElementById('irLog').innerText="模拟器日志：等待操作...";
}
function sleep(ms){
return new Promise(resolve=>setTimeout(resolve,ms))
}
//小测答案
function showQuizAnswer(){
document.getElementById("quizAns").classList.remove("hide");
}
renderPage();
</script>
</body>
</html>
冒死从初中电脑课偷的，如果哪天没了就真的没了