当前位置：首页 > wzjs >正文

深圳网站设计技术网站seo优化免费

wzjs 2025/7/21 7:46:12

深圳网站设计技术,网站seo优化免费,电子商务主要是什么,太原市给企业做网站首先用户打开网页，映入眼帘的是一个输入框和一个提交按钮。当用户在输入框中输入自己的年龄并点击提交后，系统会根据输入的年龄给出相应提示。若年龄达到 60 岁，页面将显示一个新的抽奖区域，用户可以点击 “抽奖” 按钮开始抽奖。…

首先用户打开网页，映入眼帘的是一个输入框和一个提交按钮。当用户在输入框中输入自己的年龄并点击提交后，系统会根据输入的年龄给出相应提示。若年龄达到 60 岁，页面将显示一个新的抽奖区域，用户可以点击 “抽奖” 按钮开始抽奖。随着每次点击，抽奖次数会实时更新显示，并且根据抽奖次数的不同，用户将有机会获得不同等级的奖项，从 “恭喜你，没抽到” 到 “隐藏款” 惊喜，充满了未知与期待。

html

<div class="text_box"><input type="text" class="text" /><input type="submit" id="sub" name="sub" onclick="sub_num()" /></div><div class="draw_box"><input type="text" class="draw" readonly /><button onclick="click_draw()">抽奖</button></div>

在这段 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;}

CSS 部分，通配符选择器*用于清除所有元素的默认内外边距，保证页面布局的整洁统一。.text_box类设置了宽度以及外边距，定义了输入区域的大小和位置。.draw_box类除了设置外边距外，通过display: none确保抽奖区域初始时不显示在页面上，直到满足条件才通过 JavaScript 动态显示。

// 首先获取到第一个提交按钮和第二个的大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.display='none';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);}

变量初始化：

首先获取提交按钮元素并赋值给submit变量。获取抽奖区域的<div>元素并赋值给draw变量。获取抽奖次数显示的文本框元素并赋值给draw_num变量。获取 “抽奖” 按钮元素并赋值给draw_button变量。获取输入年龄的区域<div>元素并赋值给submit_box变量。
初始化click_num变量为 0，用于记录抽奖次数。