这段代码是一个简单的年龄判断和抽奖的小程序,具体解释如下:
1. 通过HTML代码创建了一个输入框和一个提交按钮,以及三个隐藏的按钮(用来进行抽奖操作)。
2. 在CSS中设置了三个按钮的样式,并将其初始状态设为隐藏。
3. 使用JavaScript获取到按钮和输入框的DOM元素,并定义了该程序的逻辑。
4. 在提交按钮的点击事件中,判断用户输入的年龄是否符合要求,若年龄小于等于0则提示年龄不对,若年龄在18岁以下则提示年龄尚小,若年龄在18-25之间则提示用户正值青少年,若年龄在25-35之间则提示用户正值壮年,若年龄在36-65之间则提示用户加油,若年龄在65岁及以上则提示用户点击抽奖。
5. 在抽奖按钮点击事件中,使用setTimeout函数设定计时器,若在10秒内未点击“按钮”按钮,即认为抽奖失败,提示用户并隐藏三个按钮。
6. 在“按钮”按钮点击事件中,每次点击该按钮都将num加1,并将其值赋给deg_value输入框。当num值大于20时,即判定抽奖成功,弹出提示框,并将num值以及输入框和三个按钮的状态恢复到初始状态,等待下一次操作。
首先是HTML结构
<input class="age" type="number" name="" id="age" value="">
<button οnclick="tj()">提交</button><br>
<input type="number" id="deg" value="0" class="deg">
<button class="deg" οnclick="cj()">抽奖</button>
<button class="deg" οnclick="anniu()">按钮</button>
然后是JavaScript样式:
<script>
let deg = document.getElementsByClassName('deg');
let age = document.getElementById('age');
function tj(){
let age = document.getElementById('age').value;
if(age <= 0){
alert('年龄不对吧?');
}else if(age <= 18){
alert('用户年龄尚小。');
}else if(age < 25 && age > 18){
alert('您正值青少年。');
}else if(age <= 35 && age >= 25){
alert('您正值壮年。');
}else if(age <= 65 && age >= 36){
alert('加油!');
}else if(age >= 66){
alert('请点击抽奖!');
deg[0].style.display = 'block';
deg[1].style.display = 'block';
deg[2].style.display = 'block';
}
}
let deg_value = document.getElementById('deg');
let tim;
function cj(){
alert('请快速点击按钮!!!')
tim = setTimeout(function (){
alert('抽奖失败。。。')
deg_value.value = '';
age.value = '';
deg[0].style.display = 'none';
deg[1].style.display = 'none';
deg[2].style.display = 'none';
},10000)
}
let num = 0;
function anniu(){
num = 1 + num;
deg_value.value = num;
if(num > 20){
clearTimeout(tim);
alert('抽奖成功!!!')
deg_value.value = '';
age.value = '';
deg[0].style.display = 'none';
deg[1].style.display = 'none';
deg[2].style.display = 'none';
}
}
总之谢谢大家的观看:不喜勿喷;