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

news/2025/1/15 21:54:08/

抽奖程序介绍:

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>//获取元素idlet 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 = aconsole.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>


http://www.ppmy.cn/news/1070675.html

相关文章

Git分布式版本控制系统与github

第四阶段提升 时 间&#xff1a;2023年8月29日 参加人&#xff1a;全班人员 内 容&#xff1a; Git分布式版本控制系统与github 目录 一、案例概述 二、版本控制系统 &#xff08;一&#xff09; 本地版本控制 &#xff08;二&#xff09;集中化的版本控制系统 &…

Leetcode刷题笔记--Hot31-40

1--颜色分类&#xff08;75&#xff09; 主要思路&#xff1a; 快排 #include <iostream> #include <vector>class Solution { public:void sortColors(std::vector<int>& nums) {quicksort(nums, 0, nums.size()-1);}void quicksort(std::vector<int…

mybatis:动态sql【2】+转义符+缓存

目录 一、动态sql 1.set、if 2.foreach 二、转义符 三、缓存cache 1. 一级缓存 2. 二级缓存 一、动态sql 1.set、if 在update语句中使用set标签&#xff0c;动态更新set后的sql语句&#xff0c;&#xff0c;if作为判断条件。 <update id"updateStuent" pa…

三种事实表

事实表作为数据仓库维度建模的核心&#xff0c;紧紧围绕着业务过程来设计&#xff0c;通过获取描述业务过程的度量来表达业务过程&#xff0c;包含了引用的维度和与业务过程有关的度量。 事实表概述&#xff1a; 三种类型&#xff1a;事务事实表、周期快照事实表、累计快照事实…

Redis数据类型(list\set\zset)

"maybe its why" List类型 列表类型是⽤来存储多个有序的字符串&#xff0c;列表中的每个字符串称为元素&#xff08;element&#xff09;&#xff0c;⼀个列表最多可以存储个2^32 - 1个元素。在Redis中&#xff0c;可以对列表两端插⼊&#xff08;push&#xff09…

【计算机组成 课程笔记】1.2 冯·诺伊曼结构

课程链接&#xff1a; 计算机组成_北京大学_中国大学MOOC(慕课) 1 - 2 - 102-冯诺依曼结构的要点&#xff08;13-59--&#xff09;_哔哩哔哩_bilibili 现代的计算机形态各异&#xff0c;但究其本质&#xff0c;几乎全部采用了冯诺依曼结构。要了解计算机&#xff0c;首先要知道…

springgateway网关修改响应后,部分中文乱码问题

原因 是因为响应体过大&#xff0c;开启了压缩&#xff0c;数据分段进行响应得&#xff0c;导致处理返回体得时候乱码 解决方式 Overridepublic Mono<Void> filter(ServerWebExchange exchange, GatewayFilterChain chain) {ServerHttpRequest request exchange.getR…

访问学者择校容易犯哪些错误?

在选择访问学者的学校时&#xff0c;很多人容易犯一些错误&#xff0c;这些错误可能会影响他们的学术和个人发展。下面就让知识人网小编带大家一起来探讨一下&#xff0c;访问学者在选择学校时容易犯的一些错误。 首先&#xff0c;许多访问学者容易陷入排名偏见。他们可能会过于…