原生js通过年龄判断是否可以抽奖

简介: 原生js通过年龄判断是否可以抽奖

抽奖程序介绍:

1. 年龄18岁或小于18岁, 提示( 青年 )

2. 大于18岁小于30岁提示( 年龄不够)  

3. 大于30岁小于66岁提示 (年龄还差一点)    

4. 大于等于66岁则可以进行抽奖, 用户在十秒内点击按钮20次, 提示抽奖成功, 否则失败

根据需求可知:

需要有一个input框来输入年龄,并且需要有一个按钮来点击进行判断是否比66大

(可以有一个提交按钮,当输入的值大于66的时候抽奖按钮才出来,我这里为了方便就直接用一个按钮了)

当大于66岁的时候,需要再有一个input框,默认值为0,每点击一次抽奖按钮,他就会加1,

在10秒内如果点击的次数超过20即为抽奖成功,反之则失败

代码实现:cv可以直接使用

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
  </head>
  <style>
    #we {
      display: none;
    }
 
    #wea {
      display: none;
    }
  </style>
  <body>
 
    <input type="number" id="input">
    <button onclick="fu()">提交</button>
    <input type="text" id="we" disabled>
    <button id="wea" >开始点击</button>
 
 
    <script>
      //获取元素id
      let input = document.getElementById("input");
      let id = document.getElementById("we");
      let kai = document.getElementById("wea");
      //命名函数
      function fu() {
        //判断input元素的值小于18弹出
        if (input.value < 18) {
          alert('青年')
          //否则 判断input元素值小于30弹出
        } else if (input.value < 30) {
          alert('年龄不够')
          //否则 判断input元素值小于66弹出
        } else if (input.value < 66) {
          alert('年龄还差一点')
          //否则
        } else{
          //id样式显示、kai样式显示
          id.style.display = "block";
          kai.style.display = "block";
          //设置变量a=0;
          let a = 0;
          //设置kai按钮点击事件
          kai.onclick = function() {
            //每次加1;
            a++;
            //id值=a;
            id.value = a
            console.log(a);
          }
          //设置一个定时器
          setTimeout(function() {
            //判断id元素的值大于10弹出
            if (id.value > 10) {
              alert('抽奖成功');
              //id样式隐藏,kai样式隐藏
              id.style.display = "none";
              kai.style.display = "none";
              //成功后让a=0;
              a = null;
              id.value = a;
              input.value = null;
              //否则 弹出
            } else {
              alert('抽奖失败');
              id样式隐藏,kai样式隐藏
              id.style.display = "none";
              kai.style.display = "none";
              //失败后让a=0;
              a = null;
              id.value = a;
              input.value = null;
            }
          //1000毫秒等于1秒
          }, 5000)
        }
      }
    </script>
  </body>
</html>


相关文章
|
3月前
|
存储 JavaScript 前端开发
用 HTML + JavaScript DIY 渐进式延迟法定退休年龄测算器
用 HTML + JavaScript DIY 渐进式延迟法定退休年龄测算器
|
24天前
|
JavaScript
原生js炫酷随机抽奖中奖效果代码
原生js随机抽奖是一个炫酷的根据数据随机抽奖的代码,该网页可进行随机抽取一个数据,页面动画高科技、炫酷感觉的随机抽奖效果,简单好用,欢迎下载!
41 3
原生js炫酷随机抽奖中奖效果代码
|
22天前
|
移动开发 前端开发 JavaScript
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
于辰在大学期间带领团队参考网易游戏官网的部分游戏页面,开发了一系列前端实训作品。项目包括首页、2021校园招聘页面和明日之后游戏页面,涉及多种特效实现,如动态图片切换和人物聚合效果。作品源码已上传至CSDN,视频效果可在CSDN预览。
29 0
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
|
2月前
|
JavaScript
js学习--九宫格抽奖
js学习--九宫格抽奖
19 2
|
2月前
|
JavaScript
js学习--抽奖
js学习--抽奖
17 1
|
3月前
|
移动开发 前端开发 JavaScript
原生JavaScript+canvas实现五子棋游戏_值得一看
本文介绍了如何使用原生JavaScript和HTML5的Canvas API实现五子棋游戏,包括棋盘的绘制、棋子的生成和落子、以及判断胜负的逻辑,提供了详细的代码和注释。
38 0
原生JavaScript+canvas实现五子棋游戏_值得一看
|
4月前
|
Devops 持续交付 测试技术
JSF遇上DevOps:开发流程将迎巨变?一篇文章带你领略高效协同的魅力!
【8月更文挑战第31天】本文探讨了如何在JavaServer Faces(JSF)开发中融入DevOps文化,通过持续集成与部署、自动化测试、监控与日志记录及反馈机制,提升软件交付速度与质量。文中详细介绍了使用Jenkins进行自动化部署、JUnit与Selenium进行自动化测试、ELK Stack进行日志监控的具体方法,并强调了持续改进的重要性。
39 0
|
4月前
|
JavaScript 前端开发 API
从零开始学表单操作,jQuery 与原生 JavaScript 完全指南,带你轻松掌握网页交互关键!
【8月更文挑战第31天】在网页开发中,表单是实现用户互动的关键元素。无论是收集信息、提交数据还是验证输入,都需要对表单进行有效操作。本文档介绍了如何使用原生 JavaScript 和 jQuery 操作表单,包括获取表单元素、读写表单值、处理表单提交及验证等核心功能。jQuery 提供了更简洁的语法和更好的兼容性,但原生 JavaScript 在性能上有优势。选择合适的方法取决于项目需求和个人偏好。下面通过具体示例展示了两种方式的操作方法。
40 0
|
4月前
|
JavaScript 前端开发
JS九宫格抽奖制作
JS九宫格抽奖制作
35 0
|
4月前
|
JavaScript
js之九宫格抽奖
js之九宫格抽奖
33 0