小功能(判断是否为年青人)(如侵权)

这段代码是一个简单的年龄判断和抽奖的小程序,具体解释如下:

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';
                    
                }
            }

总之谢谢大家的观看:不喜勿喷;

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值