当前位置: 首页 > news >正文

用js实现点击抽奖

用原生的JS来完成的一个小游戏,进行了简单的点击触发以及判断

css:

 <style>* {margin: 0;padding: 0;}body {background-color: #f7f7f7;display: flex;justify-content: center;align-items: center;height: 100vh;margin: 0;}.container {background-color: white;padding: 30px;border-radius: 10px;box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);text-align: center;width: 300px;}h1 {font-size: 24px;color: #333;margin-bottom: 20px;}input[type="text"],input[type="number"] {width: 100%;padding: 10px;margin: 10px 0;border: 2px solid #ddd;border-radius: 5px;font-size: 16px;}button {background-color: #4CAF50;color: white;padding: 12px 20px;font-size: 16px;border: none;border-radius: 5px;cursor: pointer;width: 100%;margin-top: 10px;transition: background-color 0.3s ease;}button:hover {background-color: #45a049;}.btn {display: none;background-color: #008CBA;}.btn:hover {background-color: #007B9F;}.alert-message {font-size: 18px;color: #333;margin-top: 20px;}.btn-container {display: none;}</style>

 html

<div class="container"><h1>抽奖活动</h1><input type="text" id="types" placeholder="请输入年龄"><button onclick="getOld()" class="buttons">提交</button><div class="btn-container"><input type="number" id="hands" readonly><button class="btn" onclick="dclick()">点击</button></div><div id="message" class="alert-message"></div></div>

 js:

<script>const old = document.querySelector('#types');const buttons = document.querySelector('.buttons');const clicks = document.querySelector('#hands');const btn = document.querySelector('.btn');const message = document.querySelector('#message');function getOld() {// 清除之前旧的消息message.innerHTML = '';//获取并判断输入框内的值if (old.value < 18) {alert('青少年不让抽奖');} else if (old.value < 25) {alert('壮年不让抽奖');} else if (old.value < 60) {alert('只允许60岁以上老人抽奖');} else if (old.value > 100) {alert('请输入正确年龄');} else {alert('开始');//获取并更改点击框为显示状态document.querySelector('.btn-container').style.display = 'block';//设置为行内块clicks.style.display = 'inline-block';//设置为行内块btn.style.display = 'inline-block';//设置一个一次性定时器,当10s后执行内里语句setTimeout(function () {if (clicks.value >= 30 && clicks.value < 60) {message.innerHTML = '手速还不错吧';} else if (clicks.value >= 60 && clicks.value < 100) {message.innerHTML = '手速可以啊';} else if (clicks.value >= 100) {message.innerHTML = '你用连点器了吧?';} else if (clicks.value >= 10 && clicks.value < 30) {message.innerHTML = '菜就多练';}//完成以上一切以后清空所有数据,还原为最初样式getReset();}, 10000);}//若判断错误,即用户输入错误则清空值old.value = '';}function dclick() {//令第二个输入框内值自增clicks.value++;}//进行清空操作function getReset() {old.value = '';clicks.value = '';clicks.style.display = 'none';btn.style.display = 'none';document.querySelector('.btn-container').style.display = 'none';}</script>

 

相关文章:

用js实现点击抽奖

用原生的JS来完成的一个小游戏&#xff0c;进行了简单的点击触发以及判断 css&#xff1a; <style>* {margin: 0;padding: 0;}body {background-color: #f7f7f7;display: flex;justify-content: center;align-items: center;height: 100vh;margin: 0;}.container {backg…...

Django 自定义路由转换器

步骤 创建自定义转换器类 必须定义 regex 属性&#xff08;用于匹配参数&#xff09;。必须实现 to_python 和 to_url 方法。 to_python: 将匹配的参数转换为视图函数可用的 Python 数据。to_url: 将数据转换为 URL 格式&#xff08;用于反向解析&#xff09;。 注册转换器 使用…...

【JavaEE初阶】枫叶经霜艳,梅花透雪香-计算机是如何运行的?

本篇博客给大家带来的是与计算机相关的知识点, 包括:计算机的组成, 指令, 进程(重点). 文章专栏: JavaEE初阶 若有问题 评论区见 欢迎大家点赞 评论 收藏 分享 如果你不知道分享给谁,那就分享给薯条. 你们的支持是我不断创作的动力 . 1. 计算机的组成 1.1 计算机的发展史 计算…...

破解天然气巡检挑战,构建智能运维体系

一、行业现状 天然气行业在能源领域地位举足轻重&#xff0c;其工作环境高风险&#xff0c;存在有毒有害、易爆气体及高温等情况&#xff0c;且需持续监控设备运行状态&#xff0c;人工巡检面临巨大挑战与风险。好在随着科技发展&#xff0c;防爆巡检机器人的应用为天然气管道…...

go web单体项目 学习总结

为什么学习go 博主的主语言是Java&#xff0c;目前的工作也是做Java web开发&#xff0c;有了Java的经验后就想着再学一门语言&#xff0c;其实有两个原因&#xff0c;第一是基于兴趣&#xff0c;也想和Java对比下到底有什么不同&#xff0c;在学习go的时候让我更加了解了Java…...

Cocos游戏优化

在游戏开发中&#xff0c;性能优化是确保游戏流畅运行和玩家体验的关键环节。Cocos作为一款强大的开源游戏引擎&#xff0c;支持多平台开发&#xff0c;尤其在2D游戏开发领域有着显著优势。以下是一些针对 Cocos游戏优化的实用策略&#xff0c;旨在帮助开发者提升游戏性能和用户…...

wsl2的Ubuntu18.04安装ros和anaconda

参考&#xff1a;超详细 WSL2 安装 ros 和 anaconda_wsl2安装anaconda-CSDN博客 一.安装ros 1. 更换系统源 输入 wget http://fishros.com/install -O fishros && . fishros 和上面的链接一样&#xff0c;依次输入5-2-1 2. 安装ros 输入 wget http://fishros.c…...

基于迅为RK3568开发板全国产平台,快速实现APP开机自启动技术分享

应用场景&#xff1a; 在一些场景中需要系统启动以后就让应用程序运行起来&#xff0c;如闸机打卡系统&#xff0c;智能点餐系统&#xff0c;广告机系统等等。这个需求叫做自启动。 除全国产版本核心板以外&#xff0c;RK3568核心板还有工业级&#xff0c;商业级&#xff0c;连…...

C++网络编程之多播

概述 在移动互联网时代&#xff0c;随着多媒体应用的日益普及&#xff0c;如何高效地将数据传输给多个接收者成为了网络通信领域的一个重要课题。多播&#xff08;英文为Multicast&#xff09;作为一种高效的网络通信方式&#xff0c;可以将数据同时发送到多个接收者&#xff0…...

不只是请求和响应:使用Fiddler抓包URL和Method全指南(中)

欢迎浏览高耳机的博客 希望我们彼此都有更好的收获 感谢三连支持! 不只是请求和响应&#xff1a;使用Fiddler抓包HTTP协议全指南(上)-CSDN博客https://blog.csdn.net/Chunfeng6yugan/article/details/144005872?spm1001.2014.3001.5502 &#x1f649;在(上)篇博客中&#xf…...

学习threejs,使用设置normalMap法向量贴图创建更加细致的凹凸和褶皱

&#x1f468;‍⚕️ 主页&#xff1a; gis分享者 &#x1f468;‍⚕️ 感谢各位大佬 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍⚕️ 收录于专栏&#xff1a;threejs gis工程师 文章目录 一、&#x1f340;前言1.1 ☘️THREE.MeshPhongMaterial高…...

Hive构建日搜索引擎日志数据分析系统

1.数据预处理 根据自己或者学校系统预制的数据 使用less sogou.txt可查看 wc -l sogou.txt 能够查看总行数 2.数据扩展部分 我的数据位置存放在 /data/bigfiles 点击q退出 将一个文件的内容传递到另一个目录文件下 原数据在 /data/bigfiles ->传递 到/data/workspac…...

Vue 3 defineModel: 简化组件的双向绑定

1. 引言 在 Vue 3.4 版本中,引入了一个新的组合式 API 函数 defineModel。这个函数大大简化了自定义组件中实现 v-model 的过程,使得创建具有双向绑定功能的组件变得更加直观和简洁。 © ivwdcwso (ID: u012172506) 2. defineModel 的基本概念 defineModel 是一个宏,它简…...

【Flutter】搭建Flutter开发环境,安卓开发

Flutter是谷歌开源的一个跨平台开发的框架&#xff0c;方便好用&#xff0c;这里以Windows 上构建 Flutter Android 应用为例&#xff0c;记录下我搭建环境时碰到的一些问题以及解决。 第一步&#xff1a;参考官网&#xff1a;开发 Android 应用 | Flutter 中文文档 - Flutter …...

Linux中的共享内存

在Linux中&#xff0c;共享内存是一种高效的进程间通信&#xff08;IPC&#xff09;机制&#xff0c;允许多个进程共享一块内存区域&#xff0c;从而实现数据的快速传递和共享。它的特点是可以直接访问共享的内存&#xff0c;无需额外的拷贝操作&#xff0c;因此速度非常快。 共…...

SpringBoot中忽略实体类中的某个属性不返回给前端的方法

使用Jackson的方式&#xff1a; //第一种方式&#xff0c;使用JsonIgnore注解标注在属性上&#xff0c;忽略指定属性 public class PropertyDTO {JsonProperty("disable")private Integer disable;JsonProperty("placeholder")private String placeholde…...

ubuntu 安装proxychains

在Ubuntu上安装Proxychains&#xff0c;你可以按照以下步骤操作&#xff1a; 1、更新列表 sudo apt-update 2、安装Proxychains sudo apt-get install proxychains 3、安装完成后&#xff0c;你可以通过编辑/etc/proxychains.conf文件来配置代理规则 以下是一个简单的配置示例&…...

pytorch四种单机多卡分布式训练方法

文章目录 1、原生pytorch&#xff08;mp.spawn)2、pytorch ddp (torchrun)3、lightning fabric4、Hugging Face Accelerate4、总结与对比4.1 mp.spawn4.2 torchrun4.3 Lightning Fabric4.4 Hugging face accelerate pytorch 分布式训练的四种方法。 我将会产生一份伪数据0到19共…...

archlinux 触摸板手势配置

文章目录 [toc]libinput-gestures安装 libinput-gestures加入 input 组创建配置文件可用手势 启动 libinput-gestures停止 libinput-gestures自启动 libinput-gestures Touchpad Synapticssynaptics.4 在 /etc/X11/xorg.conf.d/ 目录下会有默认的触摸板配置文件&#xff0c;如果…...

djinn:1 靶场学习小记

一、测试环境&#xff1a; kail攻击机&#xff1a;Get Kali | Kali Linux 靶场镜像&#xff1a;https://download.vulnhub.com/djinn/djinn.ova 描述&#xff1a; 该机器与 VirtualBox 和 VMWare 兼容。DHCP 将自动分配一个 IP。您将在登录屏幕上看到 IP。您必须找到并读取分…...

谷歌浏览器插件

项目中有时候会用到插件 sync-cookie-extension1.0.0&#xff1a;开发环境同步测试 cookie 至 localhost&#xff0c;便于本地请求服务携带 cookie 参考地址&#xff1a;https://juejin.cn/post/7139354571712757767 里面有源码下载下来&#xff0c;加在到扩展即可使用FeHelp…...

Golang 面试经典题:map 的 key 可以是什么类型?哪些不可以?

Golang 面试经典题&#xff1a;map 的 key 可以是什么类型&#xff1f;哪些不可以&#xff1f; 在 Golang 的面试中&#xff0c;map 类型的使用是一个常见的考点&#xff0c;其中对 key 类型的合法性 是一道常被提及的基础却很容易被忽视的问题。本文将带你深入理解 Golang 中…...

关于nvm与node.js

1 安装nvm 安装过程中手动修改 nvm的安装路径&#xff0c; 以及修改 通过nvm安装node后正在使用的node的存放目录【这句话可能难以理解&#xff0c;但接着往下看你就了然了】 2 修改nvm中settings.txt文件配置 nvm安装成功后&#xff0c;通常在该文件中会出现以下配置&…...

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院挂号小程序

一、开发准备 ​​环境搭建​​&#xff1a; 安装DevEco Studio 3.0或更高版本配置HarmonyOS SDK申请开发者账号 ​​项目创建​​&#xff1a; File > New > Create Project > Application (选择"Empty Ability") 二、核心功能实现 1. 医院科室展示 /…...

Android Bitmap治理全解析:从加载优化到泄漏防控的全生命周期管理

引言 Bitmap&#xff08;位图&#xff09;是Android应用内存占用的“头号杀手”。一张1080P&#xff08;1920x1080&#xff09;的图片以ARGB_8888格式加载时&#xff0c;内存占用高达8MB&#xff08;192010804字节&#xff09;。据统计&#xff0c;超过60%的应用OOM崩溃与Bitm…...

Redis数据倾斜问题解决

Redis 数据倾斜问题解析与解决方案 什么是 Redis 数据倾斜 Redis 数据倾斜指的是在 Redis 集群中&#xff0c;部分节点存储的数据量或访问量远高于其他节点&#xff0c;导致这些节点负载过高&#xff0c;影响整体性能。 数据倾斜的主要表现 部分节点内存使用率远高于其他节…...

Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决

Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决 问题背景 在一个基于 Spring Cloud Gateway WebFlux 构建的微服务项目中&#xff0c;新增了一个本地验证码接口 /code&#xff0c;使用函数式路由&#xff08;RouterFunction&#xff09;和 Hutool 的 Circle…...

Git 3天2K星标:Datawhale 的 Happy-LLM 项目介绍(附教程)

引言 在人工智能飞速发展的今天&#xff0c;大语言模型&#xff08;Large Language Models, LLMs&#xff09;已成为技术领域的焦点。从智能写作到代码生成&#xff0c;LLM 的应用场景不断扩展&#xff0c;深刻改变了我们的工作和生活方式。然而&#xff0c;理解这些模型的内部…...

用递归算法解锁「子集」问题 —— LeetCode 78题解析

文章目录 一、题目介绍二、递归思路详解&#xff1a;从决策树开始理解三、解法一&#xff1a;二叉决策树 DFS四、解法二&#xff1a;组合式回溯写法&#xff08;推荐&#xff09;五、解法对比 递归算法是编程中一种非常强大且常见的思想&#xff0c;它能够优雅地解决很多复杂的…...

Python爬虫实战:研究Restkit库相关技术

1. 引言 1.1 研究背景与意义 在当今信息爆炸的时代,互联网上存在着海量的有价值数据。如何高效地采集这些数据并将其应用于实际业务中,成为了许多企业和开发者关注的焦点。网络爬虫技术作为一种自动化的数据采集工具,可以帮助我们从网页中提取所需的信息。而 RESTful API …...