首先用户打开网页映入眼帘的是一个输入框和一个提交按钮。当用户在输入框中输入自己的年龄并点击提交后系统会根据输入的年龄给出相应提示。若年龄达到 60 岁页面将显示一个新的抽奖区域用户可以点击 “抽奖” 按钮开始抽奖。随着每次点击抽奖次数会实时更新显示并且根据抽奖次数的不同用户将有机会获得不同等级的奖项从 “恭喜你没抽到” 到 “隐藏款” 惊喜充满了未知与期待。————————————————版权声明本文为CSDN博主「好青崧」的原创文章遵循CC 4.0 BY-SA版权协议转载请附上原文出处链接及本声明。原文链接https://blog.csdn.net/jht_520/article/details/147101413htmldiv classtext_boxinput typetext classtext /input typesubmit idsub namesub onclicksub_num() //divdiv classdraw_boxinput typetext classdraw readonly /button onclickclick_draw()抽奖/button/divAI写代码html在这段 HTML 代码中我们构建了两个主要的区域。text_box类所在的div包含一个用于输入年龄的文本框和一个提交按钮用户在此输入年龄并提交。draw_box类所在的div初始时是隐藏的通过 CSS 的display: none设置当用户满足特定条件年龄达到 60 岁时该区域将显示出来其中包含一个只读的文本框用于显示抽奖次数以及一个 “抽奖” 按钮。css* {margin: 0;padding: 0;}.text_box {width: 30%;margin: 20px 10px 20px 20px;}.draw_box {display: none;margin: 20px 10px 20px 20px;}AI写代码cssCSS 部分通配符选择器*用于清除所有元素的默认内外边距保证页面布局的整洁统一。.text_box类设置了宽度以及外边距定义了输入区域的大小和位置。.draw_box类除了设置外边距外通过display: none确保抽奖区域初始时不显示在页面上直到满足条件才通过 JavaScript 动态显示。js// 首先获取到第一个提交按钮和第二个的大divlet submit document.getElementById(sub);let draw document.getElementsByClassName(draw_box)[0];let draw_num document.getElementsByClassName(draw)[0];let draw_button document.getElementsByTagName(button)[0];let submit_box document.getElementsByClassName(text_box)[0];let click_num 0;function sub_num() {let num document.getElementsByClassName(text)[0];console.log(num);if (num.value 18) {alert(年龄不够哦);num.value ;} else if (num.value 18 num.value 35) {alert(青少年);num.value ;} else if (35 num.value num.value 60) {alert(加油);num.value ;} else if (num.value 60) {alert(年龄到啦可以抽奖啦);draw.style.display block;num.value ;// submit_box.style.displaynone;setTimeout(function() {if (click_num 30) {alert(恭喜你没抽到);draw.style.display none;submit_box.style.display block;alert(要在抽一次吗);} else if (click_num 30 click_num 60) {alert(太可惜了二等奖);draw.style.display none;submit_box.style.display block;alert(要在抽一次吗);} else if (click_num 60 click_num 120) {alert(恭喜你一等奖);submit_box.style.display block;draw.style.display none;alert(要在抽一次吗);} else {alert(隐藏款);submit_box.style.display block;draw.style.display none;alert(要在抽一次吗);}draw_num.value ;// click_num 0;}, 10000)}}function click_draw() {click_num;draw_num.value click_num;console.log(click_num);}AI写代码javascript运行变量初始化​首先获取提交按钮元素并赋值给submit变量。​获取抽奖区域的div元素并赋值给draw变量。​获取抽奖次数显示的文本框元素并赋值给draw_num变量。​获取 “抽奖” 按钮元素并赋值给draw_button变量。​获取输入年龄的区域div元素并赋值给submit_box变量。​初始化click_num变量为 0用于记录抽奖次数。​提交年龄相关的函数sub_num​获取输入年龄的文本框元素num。​根据输入的年龄进行条件判断​若年龄小于等于 18 岁弹出提示 “年龄不够哦”并清空输入框内容。​若年龄大于 18 岁且小于 35 岁弹出提示 “青少年”并清空输入框内容。​若年龄在 35 岁到 60 岁之间弹出提示 “加油”并清空输入框内容。​若年龄大于等于 60 岁弹出提示 “年龄到啦可以抽奖啦”显示抽奖区域通过draw.style.display block清空输入框内容。同时设置一个 10 秒的定时器setTimeout在 10 秒后根据当前的抽奖次数click_num判断奖项​若click_num小于等于 30弹出提示 “恭喜你没抽到”隐藏抽奖区域显示输入年龄区域并询问是否再抽一次。​若click_num大于 30 且小于 60弹出提示 “太可惜了二等奖”隐藏抽奖区域显示输入年龄区域并询问是否再抽一次。​若click_num在 60 到 120 之间弹出提示 “恭喜你一等奖”隐藏抽奖区域显示输入年龄区域并询问是否再抽一次。​若click_num大于 120弹出提示 “隐藏款”隐藏抽奖区域显示输入年龄区域并询问是否再抽一次。最后清空抽奖次数显示文本框的内容。​抽奖函数click_draw​每次点击 “抽奖” 按钮click_num自增 1。​将更新后的click_num值显示在抽奖次数显示的文本框中通过draw_num.value click_num并在控制台打印click_num值方便调试。————————————————版权声明本文为CSDN博主「好青崧」的原创文章遵循CC 4.0 BY-SA版权协议转载请附上原文出处链接及本声明。原文链接https://blog.csdn.net/jht_520/article/details/147101413