AI编程：乘法竖式计算演示web应用

本文使用AI辅助，完全不敲一行代码，实现了一个乘法竖式计算演示的web应用，并部署到了github pages上

引言

在数学学习中，乘法竖式计算是一个重要的基础知识点。为了帮助小学生更好地理解乘法竖式的计算过程，我开发了一个乘法竖式计算演示应用。这个应用通过直观的动画效果，展示了乘法竖式的完整计算过程，支持自定义数字、播放控制和速度调节等功能。

应用功能介绍

1. 核心功能

• ✅乘法竖式动画演示：清晰展示乘法竖式的计算步骤
• ✅自定义数字输入：支持输入任意数进行计算
• ✅播放控制：提供播放、暂停、重置功能
• ✅速度调节：支持0.5x到3x的速度调节
• ✅随机数生成：一键生成随机的乘数和被乘数

2. 界面设计

• 🎨现代简洁UI：采用靛蓝色系渐变背景，白色卡片设计
• 📱响应式布局：适配各种屏幕尺寸
• 🎯直观操作：清晰的按钮和控制组件
• 🎬流畅动画：平滑的计算过程演示

3. 构建与部署

• 本地开发：使用Vite开发服务器，支持热更新
• 生产构建：npm run build生成优化后的静态文件
• 部署方式：
  • GitHub Actions自动部署到GitHub Pages

AI辅助开发

摘取部分提示词

• 我想生成一个乘法竖式计算动画演示的app，可以暂停，也可以自动播放，输入的两个数可以输入，也可以随机
• 不错，可以把每个数位相乘的时候给出一个红线进行连接，结束后红线消失，另外需要动态的给出进位的值
• 不错，可以把每个数位相乘的时候给出一个红线进行连接，结束后红线消失，另外需要动态的给出进位的值
  如图所示，不要一下子把一个数位和被乘数的结果计算出来
• 整体上动画没有问题，但是计算的数值显示的不对，已经计算出来的值为什么是跳动的。不应该是固定的吗
• 进位在被加入计算结果时才消失，进位的位置需要跟他的数值的水平位置对齐
• 播放速度可调，所有的数位除了进位之外，展示了就不要再消失了，加法求和，结果从最右侧开始放置。

这是一个不断的向AI反馈问题，让他进行修复的过程，语言描述有时候很难描述清楚，再加一些截图，比如这个进位要放在什么数的下方

开发的差不多了，我在 Trae 智能IDE 中让AI帮我把代码push到git上，自动化部署到 github pages

功能演示

https://www.bilibili.com/video/BV122vQB1EQh

部署与访问

应用已部署到GitHub Pages，可以通过以下链接访问：

https://kobe24o.github.io/multiply_show_web/

源码获取

项目源码已开源，欢迎Star和Fork：

https://github.com/kobe24o/multiply_show_web

作者：Michael Ming
网站：https://michael.blog.csdn.net/