小学科学教学论坛

注册

 

返回列表 123
发新话题 回复该主题
查看: 786|回复: 77

【AI实用小技分享】常用HTML小程序的编写 [复制链接]

夏薏
头像

夏薏

  • 超级版主
  • 2576
  • 40
  • 21936
  • 19160
  • 27130
  • 2015-08-25
1#
t T
发表于 2025-08-03 13:39 |只看楼主
银光图片
     HTML互动小程序，可以根据自己的需求进行设计开发，还可以离线使用，可以分享。下面分享几款好用的HTML小程序编写的提示词，只需要deepseek即可！
  1. 计时器

视频操作学习链接：https://aitrain.zjer.cn/specialColumn/67/217/45375?courseId=249304&shareId=

方法一：

打开deepseek（勾选深度思考和与互联网搜索）→输入“用html语言写一个倒计时小程序”→点击“下载”，查看下载效果→可以不断调整想要的效果→例如“增加倒计时重置功能”“让整个功能区域处于网页中心位置”等。

方法二：

打开deepseek（勾选深度思考和与互联网搜索）→输入“帮我写一个网页互动代码（这句话特别重要，每次都要写在前面），写一个计时器的代码，有开始、暂停、重置的按钮，能够正向计时也能够倒计时。界面背景要具有科技感，名称是“计时器”→然后根据自己的需求可以继续进行优化。
本主题由 管理员 湖州熊二 于 2025/8/3 15:17:14 执行 设置精华/取消 操作
分享 转发
TOP
夏薏
头像

夏薏

  • 超级版主
  • 2576
  • 40
  • 21936
  • 19160
  • 27130
  • 2015-08-25
2#
t T
发表于 2025-08-03 13:43 |只看楼主

2.利用麦克风监测音量分贝

打开deepseek（勾选深度思考和与互联网搜索）→输入“使用HTML语言写一个工具，调用电脑的麦克风，监督学生有没有在安静地看书，如果声音很大，会作出“宝贝们，请安静哦”这样的不会很凶也不会很温柔的提醒语言，声音请用富有磁性的男性声音。监测工具的灵敏度根据现场实际情况而定。并在页面中设计一棵小树苗，小树苗直接长在草地上，类似像樟树，随着学生们安静地时间越来越长，小树苗的树冠与树干会一起越长越大，但是有吵闹声，小树苗就会变小，整合在一个HTML文件中输出。”→根据自己的需求继续调整优化。
TOP
夏薏
头像

夏薏

  • 超级版主
  • 2576
  • 40
  • 21936
  • 19160
  • 27130
  • 2015-08-25
3#
t T
发表于 2025-08-03 13:46 |只看楼主

3.运动轨迹的显示路线

提示词：呈现一个玩具小车的卡通图，在左边车轮的橡胶部分贴上一个红色圆点，右边车轮不贴圆点，当小车往前开，车轮就会向前运动，同时显示左边车轮上红色圆点的运动轨迹（注意运动轨迹是滚动，且有交叉的）。在车身上标记一个蓝色的点，同样显示运动轨迹。当小车行驶出去后恢复到最初位置，点击开始才能开始，点击停止就停止。两条运动轨迹请用虚线请帮我生成一个HTML文件。并根据要求不断优化已生成好的小程序。




这个对于三年级《物体的运动》单元显示物体的运动路径，让抽象的路径更加具象化，有助于学生建构科学概念。
最后编辑夏薏 最后编辑于 2025-08-03 18:51:07
TOP
夏薏
头像

夏薏

  • 超级版主
  • 2576
  • 40
  • 21936
  • 19160
  • 27130
  • 2015-08-25
4#
t T
发表于 2025-08-03 13:53 |只看楼主

4. 识字小游戏（文字固定版）           

    最近暑假孩子都在积极认字，但是有些平时用的不多的字，可能要反复记忆。昨晚就突发奇想自己开发一款适合自家娃的识字互动小游戏。随手输入了一些字，不断优化后，发现效果还不错。初始提示词：
帮我写一个网页互动代码。我需要考察孩子“猪、猴、颜、成、推、秘”等几个字的掌握情况，上方的界面漂浮着这几个生字，当提示音发出这几个生字的音时，可以点击来检测孩子是否掌握。并且答对的时候，会发出“恭喜你，答对了”。答错时，会发出鼓励音“别气馁，请继续加油”。要求画面可爱生动、清新，具有童趣和吸引力。
后来我删除了鼓励语，会比较干扰孩子的答题。需要根据自己的需求不断改进提示词，不读那优化代码。
最后编辑夏薏 最后编辑于 2025-08-03 13:54:44
TOP
夏薏
头像

夏薏

  • 超级版主
  • 2576
  • 40
  • 21936
  • 19160
  • 27130
  • 2015-08-25
5#
t T
发表于 2025-08-03 13:58 |只看楼主

5. 识字小游戏（文字可调整版）  

    上一版本的小游戏，文字固定的，只能检测这几个字，所以后来继续改进，方便家长的检测，需要可更换检测的字。所以将提示词进行了修改，还设计成小青蛙过河的情境。下面是我的初始版本提示词，也需要后期跟自己自己的需求不断进行调整：
请帮我写一段网页互动代码。汉字检测程序，上方界面，方便家长输入需要检测的汉字，每次可以输入6个监测的数据，旁边有一个小喇叭，可以播报汉字的读音，但是不要出现汉字，避免孩子照样。页面的下方可以进行汉字的检测和正确率的统计。画面是小青蛙过河，荷叶上就是待检测的汉字，小青蛙需要跳到和读音一样的汉字上方才能顺利过河。将上面要求整合在一个HTML文件中。
TOP
夏薏
头像

夏薏

  • 超级版主
  • 2576
  • 40
  • 21936
  • 19160
  • 27130
  • 2015-08-25
6#
t T
发表于 2025-08-03 14:01 |只看楼主

AI很好用，大家都知道，但是真的要自己操作几遍，才能够真正地服务生活和工作。这段时间也一直都跟着之江汇中的“人工智能”学习板块进行学习实践！大家也都行动起来吧~~
最后编辑夏薏 最后编辑于 2025-08-03 18:54:28
TOP
小卷在线
头像

  • 线形动物
  • 1065
  • 2
  • 6690
  • 5615
  • 2680
  • 2024-05-17
7#
t T
发表于 2025-08-03 14:01 |只看该用户

用AI生成html网页程序和小游戏是一个很好的方式，就是生成的网页有时候功能需要不断完善才能符合要求，这时候指令非常重要了
TOP
夏薏
头像

夏薏

  • 超级版主
  • 2576
  • 40
  • 21936
  • 19160
  • 27130
  • 2015-08-25
8#
t T
发表于 2025-08-03 14:03 |只看楼主

是的，要不断进行调整，毕竟做啥都不能一蹴而就，根据自己的需求，不断优化。但是试的次数多了，以后做出的指令就会越来越精准了，哈哈哈哈~~
TOP
樱桃荔枝
头像

  • 节肢动物
  • 1479
  • 0
  • 11879
  • 10400
  • 11260
  • 2024-05-21
9#
t T
发表于 2025-08-03 16:30 |只看该用户

还要根据不同的课型设计不同的活动和游戏
TOP
石头妈妈
头像

  • 原生动物
  • 591
  • 0
  • 3571
  • 2980
  • 2180
  • 2019-09-23
10#
t T
发表于 2025-08-03 16:57 |只看该用户

真的很好用啊
TOP
流风
头像

廖鑫胜

  • 两栖类
  • 2839
  • 16
  • 24459
  • 21540
  • 15110
  • 2018-09-25
11#
t T
发表于 2025-08-03 17:54 |只看该用户

2.利用麦克风监测音量分贝打开deepseek（勾选深度思考和与互联网搜索）→输入“使用HTML语言写一个工具，调用电脑的麦克风，监督学生有没有在安静地看书，
夏薏 发表于 2025/8/3 13:43:30
图书馆可以用
TOP
喻伯军
头像

  • 管理员
  • 12775
  • 33
  • 104152
  • 91212
  • 46340
  • 2006-12-14
12#
t T
发表于 2025-08-03 18:29 |只看该用户

AI很好用，大家都知道，但是真的要自己操作几遍，就会能够更好地服务的生活和工作。这段时间也一直都跟着之江汇中的“人工智能”学习板块进行学习实践！大家也都行动起来吧~~
夏薏 发表于 2025/8/3 14:01:04
行动起来，在实践中学习。
TOP
黄琳容
头像

  • 线形动物
  • 1111
  • 0
  • 6686
  • 5575
  • 2980
  • 2024-01-07
13#
t T
发表于 2025-08-03 18:48 |只看该用户

用AI生成html网页程序和小游戏是一个很好的方式

5. 识字小游戏（文字可调整版）  

[size=
夏薏 发表于 2025/8/3 13:58:34
TOP
夏薏
头像

夏薏

  • 超级版主
  • 2576
  • 40
  • 21936
  • 19160
  • 27130
  • 2015-08-25
14#
t T
发表于 2025-08-03 18:53 |只看楼主

回复 11楼流风的帖子

自习课的时候也可以用用，可以试着看看能不能协助帮助老师管理班级~~
TOP
夏薏
头像

夏薏

  • 超级版主
  • 2576
  • 40
  • 21936
  • 19160
  • 27130
  • 2015-08-25
15#
t T
发表于 2025-08-03 18:53 |只看楼主

回复 9楼樱桃荔枝的帖子

对的，根据自己的需求，让这些小程序真的可以帮助到学生，解放自己！
TOP
社恐星人
头像

社恐星人

  • 腔肠动物
  • 839
  • 0
  • 5104
  • 4265
  • 1160
  • 2024-05-19
16#
t T
发表于 2025-08-03 19:08 |只看该用户

感谢分享，应用一下
TOP
王丽洁
头像

  • 爬行类
  • 4270
  • 30
  • 31985
  • 27565
  • 19050
  • 2020-05-21
17#
t T
发表于 2025-08-03 19:53 |只看该用户

识字很适合低段小朋友，有趣又能获取知识
TOP
春见
头像

  • 腔肠动物
  • 910
  • 0
  • 5495
  • 4585
  • 2530
  • 2024-01-08
18#
t T
发表于 2025-08-03 19:56 |只看该用户

感谢分享学习到了。
TOP
红泥小火炉
头像

  • 环节动物
  • 1509
  • 7
  • 10119
  • 8575
  • 8430
  • 2023-09-04
19#
t T
发表于 2025-08-03 20:04 |只看该用户

巧妙借用ai，将运动的小车的运动路线显示出来，帮助学生理解
TOP
影随心动
头像

  • 管理员
  • 12553
  • 22
  • 106935
  • 94271
  • 24780
  • 2007-04-19
20#
t T
发表于 2025-08-03 20:07 |只看该用户

感谢分享
TOP
小卫
头像

  • 爬行类
  • 5909
  • 14
  • 41571
  • 35591
  • 26700
  • 2010-02-27
21#
t T
发表于 2025-08-03 20:09 |只看该用户

     HTML互动小程序，可以根据自己的需求进行设计开发，还可以离线使用，可以分享。下面分享几款好用的HTML小程序编写的提示词，只需要deepseek即可！
  1. 计时器
[siz
夏薏 发表于 2025/8/3 13:39:36
哇，人工智能deepseek还可以这样玩，牛。
TOP
小卫
头像

  • 爬行类
  • 5909
  • 14
  • 41571
  • 35591
  • 26700
  • 2010-02-27
22#
t T
发表于 2025-08-03 20:13 |只看该用户

3.运动轨迹的显示路线提示词：呈现一个玩具小车的卡通图，在左边车轮的橡胶部分贴上一个红色圆点，右边车轮不贴圆点，当小车往前开，车轮就会向前运动，同时显示左边车轮上红色圆点的运动轨迹（注意运动轨迹是滚
夏薏 发表于 2025/8/3 13:46:51
运动轨迹可视化，能促进学生思考。
TOP
小卫
头像

  • 爬行类
  • 5909
  • 14
  • 41571
  • 35591
  • 26700
  • 2010-02-27
23#
t T
发表于 2025-08-03 20:15 |只看该用户

5. 识字小游戏（文字可调整版）  

[size=
夏薏 发表于 2025/8/3 13:58:34
利用deepseek能否将文字转化为语音，大多数的APP转化都需要付费。
TOP
夏薏
头像

夏薏

  • 超级版主
  • 2576
  • 40
  • 21936
  • 19160
  • 27130
  • 2015-08-25
24#
t T
发表于 2025-08-03 20:22 |只看楼主

回复 23楼小卫的帖子

这个目前还没有尝试过，但是偶尔知识付费也是需要的，那些开发人员也需要我们用实际行动来支持一下
TOP
沫白
头像

  • 环节动物
  • 1348
  • 2
  • 8718
  • 7360
  • 6100
  • 2024-01-23
25#
t T
发表于 2025-08-03 20:22 |只看该用户

没试过，打算收藏使用。
TOP
夏薏
头像

夏薏

  • 超级版主
  • 2576
  • 40
  • 21936
  • 19160
  • 27130
  • 2015-08-25
26#
t T
发表于 2025-08-03 20:23 |只看楼主

回复 19楼红泥小火炉的帖子

教材里涉及到的这些物体的运动，都可以利用相同的方式进行运动轨迹可视化。
TOP
夏薏
头像

夏薏

  • 超级版主
  • 2576
  • 40
  • 21936
  • 19160
  • 27130
  • 2015-08-25
27#
t T
发表于 2025-08-03 20:23 |只看楼主

回复 17楼王丽洁的帖子

是的呢，我做出来主要目的也是在暑假方便女儿识字的。
TOP
夏薏
头像

夏薏

  • 超级版主
  • 2576
  • 40
  • 21936
  • 19160
  • 27130
  • 2015-08-25
28#
t T
发表于 2025-08-03 20:24 |只看楼主

回复 25楼沫白的帖子

赶紧打开deepseek尝试一下，会收获不一样的惊喜！
TOP
夏薏
头像

夏薏

  • 超级版主
  • 2576
  • 40
  • 21936
  • 19160
  • 27130
  • 2015-08-25
29#
t T
发表于 2025-08-03 20:24 |只看楼主

回复 12楼喻伯军的帖子

是的，只有行动起来了，才能知识技能内化~~
TOP
山奈
头像

  • 腔肠动物
  • 799
  • 6
  • 5914
  • 5085
  • 4680
  • 2024-01-20
30#
t T
发表于 2025-08-03 21:16 |只看该用户

这些 HTML 小程序提示词太实用了！感谢分享！
TOP
上一主题| 下一主题
返回列表 123
发新话题 回复该主题
高级编辑器高级编辑器