网上很火的刮刮乐抽奖是怎么做的?
这是很多老师最近在咨询的一个问题。其实现在DeepSeek这么火,每个人都能让AI来制作这样简单的网页。
但和AI对话,其实是受自身对某个领域的认知所影响的,所以我还是帮大家来制作一个吧,顺便再简单分享一下让AI生成网页的思路。
制作过程分享在最开始的时候,我是直接让它写一个奖品和方块数量固定的抽奖页面。
写一个HTML页面,总体的功能是“刮刮乐”,上面有10个方块,里面写着5个奖品,分别是:本子一个、卷子一套、星星一颗、免作业一次、未中奖,最开始这个方块是被灰色的遮住的,用户用手刮了之后才展示真正的内容。(需要支持教室的大屏触屏刮开)

基本功能是做出来了,但以后如果想要修改的话,就得去改HTML代码。

我想制作的这个抽奖活动是想适应更多人、更多场景来使用,所以我重新提交了描述语。
写一个HTML页面,总体的功能是“刮刮乐”(鼠标点击),界面上放着N个方块,里面随机放着奖品列表中的奖品,广场数量和奖品,用户可以完全自定义。最开始这个方块是被灰色的遮住的,用户用手刮了之后才展示真正的内容。注意整体界面风格要卡通、可爱。
由于家里没有触屏,无法测试“刮开的效果,所以索性改成“点击”来翻开卡片。

可以自定义方块数量了,也能自定义奖品了;但这设置面板就这么放着,别人都看得清清楚楚了,那可不行!
于是,再次提要求:
现在你弄得很好了,请把设置界面变得可以收起来,让设置的人在设置时展示,活动开始后,要收缩起来,免得参与者在活动过程中还能看到奖品信息。
然后,就得到了最终的效果啦~
怎么样,就几分钟就完成了这个页面的制作。
还有很多老师需要其他的连线、词语配对、英语练习等活动,都可以这样去完成。
想体验和想要源码的,直接访问后,右键查看源码即可。
https://html5.44886.com/gua/
- end -