# fibonacci **Repository Path**: aimaier4869/fibonacci ## Basic Information - **Project Name**: fibonacci - **Description**: 求斐波拉契数列函数运行时的栈变化 - **Primary Language**: JavaScript - **License**: Not specified - **Default Branch**: main - **Homepage**: http://sswa.top/fibonacci - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2023-09-12 - **Last Updated**: 2023-09-12 ## Categories & Tags **Categories**: Uncategorized **Tags**: Frontend, 斐波拉契数列, 栈, animejs, 汇编 ## README # 斐波拉契函数运行时的栈变化 ![](assets/1694507470.png) ## 1. 项目概述 该项目是一款基于 HTML、CSS 和 JavaScript 开发的辅助演示工具，旨在通过动画演示调用斐波拉契函数时计算机内存中栈的变化过程。该工具将以网页形式呈现，通过可视化的方式展示栈的内容、栈帧以及寄存器的值在执行代码过程中的变化。教师可以利用该工具在课堂上进行演示，帮助学生更好地理解计算机如何执行代码。 ## 2. 项目目标 - 提供一种直观、可视化的方式，展示斐波拉契函数的运行过程。 - 辅助教师在计算机系统课程中进行演示，帮助学生理解栈的概念和运行时变化。 - 利用动画效果和交互功能，增强学生的参与度和学习效果。 ## 3. 主要功能 ### 3.1 斐波拉契函数的计算 - 提供一个输入框，允许用户输入斐波拉契函数的参数。 - 解析用户输入，并计算斐波拉契数列中对应位置的值。 #### 3.1.1 参数输入解析 - 对用户输入的参数进行解析和验证，确保输入的合法性。 - 支持正整数参数的输入。 #### 3.1.2 斐波拉契数列计算 - 实现斐波拉契函数的递归或迭代计算方法。 - 根据输入的参数，计算出对应位置的斐波拉契数值。 ### 3.2 内存栈的可视化 - 在网页上显示内存栈的可视化界面。 - 使用动画效果展示栈的变化过程，包括入栈和出栈操作。 #### 3.2.1 栈的结构和数据表示 - 设计合适的数据结构来表示内存栈的内容。 - 使用 HTML 和 CSS 布局，创建栈的可视化界面。 #### 3.2.2 入栈和出栈动画效果 - 使用 JavaScript 实现入栈和出栈操作的动画效果。 - 根据计算过程，动态更新栈的可视化展示。 ### 3.3 栈帧和寄存器的变化 - 显示每个栈帧的结构和内容，包括局部变量、返回地址等。 - 实时更新寄存器的值，如栈指针、帧指针等。 #### 3.3.1 栈帧结构和内容展示 - 在栈的可视化界面中，为每个栈帧显示相应的结 构和内容。 - 包括局部变量、函数参数、返回地址等信息。 #### 3.3.2 寄存器值的实时更新 - 监听计算过程中寄存器的变化，如栈指针、帧指针等。 - 在界面上实时更新寄存器的值，以反映计算过程中的变化。 ### 3.4 二叉树展示斐波拉契数列函数调用过程 - 在页面中以二叉树的形式展示斐波拉契数列函数的调用过程。 - 每个节点代表一个函数调用，包括参数、返回值等信息。 #### 3.4.1 二叉树结构和节点表示 - 设计合适的数据结构来表示函数调用的二叉树。 - 使用 HTML 和 CSS 布局，创建二叉树的可视化界面。 #### 3.4.2 调用过程的可视化展示 - 根据斐波拉契数列的计算过程，动态生成二叉树的节点。 - 显示每个节点的信息，包括函数调用的参数和返回值。 ### 3.5 自定义选择求数列的第几项 - 允许用户自定义选择要计算的斐波拉契数列的第几项。 - 更新可视化界面以展示所选项的计算过程和栈的变化。 #### 3.5.1 用户输入验证和处理 - 对用户输入的项数进行验证，确保输入的合法性。 - 根据用户选择的项数，更新计算和展示的内容。 #### 3.5.2 计算和展示更新 - 根据用户选择的项数重新计算斐波拉契数列的值。 - 更新栈的可视化和二叉树的展示，以展示新的计算过程。 ### 3.6 动画控制和交互功能 - 提供播放、暂停、快进、倒退等控制按钮，以便教师根据需要控制动画的展示速度。 - 允许用户通过点击特定的栈帧或寄存器，查看详细信息和解释。 #### 3.6.1 动画控制功能 - 实现播放、暂停、快进、倒退等动画控制按钮。 - 教师可以根据需要控制动画的播放速度和展示进度。 #### 3.6.2 交互功能 - 响应用户的交互操作，如点击栈帧或寄存器。 - 显示详细信息和解释，帮助学生更好地理解代码执行过程。 ## 4. 开发计划 ### 4.1 需求收集和分析阶段 - 确定项目需求和目标。 - 收集用户对 于可视化演示工具的意见和建议。 ### 4.2 系统设计阶段 - 设计网页界面的整体结构和布局。 - 确定动画效果的实现方式和技术选型。 ### 4.3 前端开发阶段 - 开发斐波拉契函数计算模块，实现用户输入解析和数列计算。 - 实现内存栈可视化界面，包括栈帧和寄存器的展示。 - 实现二叉树展示斐波拉契数列函数调用过程的功能。 - 实现动画控制和交互功能。 ### 4.4 测试和调试阶段 - 对整个系统进行功能测试，确保各项功能正常运行。 - 修复潜在的 Bug 和问题，提高系统的稳定性和可靠性。 ### 4.5 文档编写和发布阶段 - 编写项目文档，包括用户手册和开发者文档。 - 发布项目，提供下载和使用方式。 ## 5. 预期成果 - 完成一款可视化的斐波拉契函数运行时栈变化工具。 - 工具能够以动画形式演示栈的变化过程和二叉树展示函数调用过程。 - 教师可以借助该工具进行计算机系统课程的辅助演示。 ## 6. 项目团队 该项目的开发团队由以下人员组成： - 项目负责人：负责项目管理和进度控制。 - 前端开发人员：负责实现网页界面和用户交互功能。 - 测试人员：负责对系统进行测试和调试。 - 技术文档编写人员：负责编写项目文档。 ## 7. 预算和资源需求 - 预算：根据团队规模和项目复杂度确定预算。 - 开发工具和软件：HTML、CSS、JavaScript 开发工具，动画效果库等。 - 开发设备：计算机、显示器等开发设备。 ## 8. 目标用户群体 该产品的目标用户群体主要包括以下人群： - 计算机系统课程的教师：教师可以借助该工具在课堂上进行演示，帮助学生更好地理解计算机是如何执行代码的，提高课程教学效果。 - 计算机系统课程的学生：学生可以通过该工具的可视化演示，深入理解栈的概念、内存栈的变化以及函数调用的过程，加深对计算机系统的理解。 - 编程初学者：对于正在学习编程的初学者，该工具可以帮助他们直观地了解代码执行过程中内存栈的变化，提高对编程概念的理解和学习兴趣。 - 技术爱好者：对计算机系统和编程感兴趣的非专业人士，可以通过该工具深入了解计算机底层的运行原理，拓展自己的技术知识。 通过针对以上目标用户群体的需求，我们可以更好地设计和开发产品，以满足不同用户的需求，并提供更好的使用体验。