網(wǎng)上很火的刮刮樂(lè)抽獎(jiǎng)是怎么做的？

這是很多老師最近在咨詢(xún)的一個(gè)問(wèn)題。其實(shí)現(xiàn)在DeepSeek這么火，每個(gè)人都能讓AI來(lái)制作這樣簡(jiǎn)單的網(wǎng)頁(yè)。

但和AI對(duì)話(huà)，其實(shí)是受自身對(duì)某個(gè)領(lǐng)域的認(rèn)知所影響的，所以我還是幫大家來(lái)制作一個(gè)吧，順便再簡(jiǎn)單分享一下讓AI生成網(wǎng)頁(yè)的思路。

制作過(guò)程分享

在最開(kāi)始的時(shí)候，我是直接讓它寫(xiě)一個(gè)獎(jiǎng)品和方塊數(shù)量固定的抽獎(jiǎng)頁(yè)面。

寫(xiě)一個(gè)HTML頁(yè)面，總體的功能是“刮刮樂(lè)”，上面有10個(gè)方塊，里面寫(xiě)著5個(gè)獎(jiǎng)品，分別是：本子一個(gè)、卷子一套、星星一顆、免作業(yè)一次、未中獎(jiǎng)，最開(kāi)始這個(gè)方塊是被灰色的遮住的，用戶(hù)用手刮了之后才展示真正的內(nèi)容。（需要支持教室的大屏觸屏刮開(kāi)）

基本功能是做出來(lái)了，但以后如果想要修改的話(huà)，就得去改HTML代碼。

我想制作的這個(gè)抽獎(jiǎng)活動(dòng)是想適應(yīng)更多人、更多場(chǎng)景來(lái)使用，所以我重新提交了描述語(yǔ)。

寫(xiě)一個(gè)HTML頁(yè)面，總體的功能是“刮刮樂(lè)”（鼠標(biāo)點(diǎn)擊），界面上放著N個(gè)方塊，里面隨機(jī)放著獎(jiǎng)品列表中的獎(jiǎng)品，廣場(chǎng)數(shù)量和獎(jiǎng)品，用戶(hù)可以完全自定義。最開(kāi)始這個(gè)方塊是被灰色的遮住的，用戶(hù)用手刮了之后才展示真正的內(nèi)容。注意整體界面風(fēng)格要卡通、可愛(ài)。

由于家里沒(méi)有觸屏，無(wú)法測(cè)試“刮開(kāi)的效果，所以索性改成“點(diǎn)擊”來(lái)翻開(kāi)卡片。

可以自定義方塊數(shù)量了，也能自定義獎(jiǎng)品了；但這設(shè)置面板就這么放著，別人都看得清清楚楚了，那可不行！

于是，再次提要求：

現(xiàn)在你弄得很好了，請(qǐng)把設(shè)置界面變得可以收起來(lái)，讓設(shè)置的人在設(shè)置時(shí)展示，活動(dòng)開(kāi)始后，要收縮起來(lái)，免得參與者在活動(dòng)過(guò)程中還能看到獎(jiǎng)品信息。

然后，就得到了最終的效果啦~

怎么樣，就幾分鐘就完成了這個(gè)頁(yè)面的制作。

還有很多老師需要其他的連線(xiàn)、詞語(yǔ)配對(duì)、英語(yǔ)練習(xí)等活動(dòng)，都可以這樣去完成。

想體驗(yàn)和想要源碼的，直接訪問(wèn)后，右鍵查看源碼即可。

https://html5./gua/

- end -