用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来完成的一个小游戏,进行了简单的点击触发以及判断 css: <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 属性(用于匹配参数)。必须实现 to_python 和 to_url 方法。 to_python: 将匹配的参数转换为视图函数可用的 Python 数据。to_url: 将数据转换为 URL 格式(用于反向解析)。 注册转换器 使用…...
【JavaEE初阶】枫叶经霜艳,梅花透雪香-计算机是如何运行的?
本篇博客给大家带来的是与计算机相关的知识点, 包括:计算机的组成, 指令, 进程(重点). 文章专栏: JavaEE初阶 若有问题 评论区见 欢迎大家点赞 评论 收藏 分享 如果你不知道分享给谁,那就分享给薯条. 你们的支持是我不断创作的动力 . 1. 计算机的组成 1.1 计算机的发展史 计算…...
破解天然气巡检挑战,构建智能运维体系
一、行业现状 天然气行业在能源领域地位举足轻重,其工作环境高风险,存在有毒有害、易爆气体及高温等情况,且需持续监控设备运行状态,人工巡检面临巨大挑战与风险。好在随着科技发展,防爆巡检机器人的应用为天然气管道…...
go web单体项目 学习总结
为什么学习go 博主的主语言是Java,目前的工作也是做Java web开发,有了Java的经验后就想着再学一门语言,其实有两个原因,第一是基于兴趣,也想和Java对比下到底有什么不同,在学习go的时候让我更加了解了Java…...
Cocos游戏优化
在游戏开发中,性能优化是确保游戏流畅运行和玩家体验的关键环节。Cocos作为一款强大的开源游戏引擎,支持多平台开发,尤其在2D游戏开发领域有着显著优势。以下是一些针对 Cocos游戏优化的实用策略,旨在帮助开发者提升游戏性能和用户…...
wsl2的Ubuntu18.04安装ros和anaconda
参考:超详细 WSL2 安装 ros 和 anaconda_wsl2安装anaconda-CSDN博客 一.安装ros 1. 更换系统源 输入 wget http://fishros.com/install -O fishros && . fishros 和上面的链接一样,依次输入5-2-1 2. 安装ros 输入 wget http://fishros.c…...
基于迅为RK3568开发板全国产平台,快速实现APP开机自启动技术分享
应用场景: 在一些场景中需要系统启动以后就让应用程序运行起来,如闸机打卡系统,智能点餐系统,广告机系统等等。这个需求叫做自启动。 除全国产版本核心板以外,RK3568核心板还有工业级,商业级,连…...
C++网络编程之多播
概述 在移动互联网时代,随着多媒体应用的日益普及,如何高效地将数据传输给多个接收者成为了网络通信领域的一个重要课题。多播(英文为Multicast)作为一种高效的网络通信方式,可以将数据同时发送到多个接收者࿰…...
不只是请求和响应:使用Fiddler抓包URL和Method全指南(中)
欢迎浏览高耳机的博客 希望我们彼此都有更好的收获 感谢三连支持! 不只是请求和响应:使用Fiddler抓包HTTP协议全指南(上)-CSDN博客https://blog.csdn.net/Chunfeng6yugan/article/details/144005872?spm1001.2014.3001.5502 🙉在(上)篇博客中…...
学习threejs,使用设置normalMap法向量贴图创建更加细致的凹凸和褶皱
👨⚕️ 主页: gis分享者 👨⚕️ 感谢各位大佬 点赞👍 收藏⭐ 留言📝 加关注✅! 👨⚕️ 收录于专栏:threejs gis工程师 文章目录 一、🍀前言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是谷歌开源的一个跨平台开发的框架,方便好用,这里以Windows 上构建 Flutter Android 应用为例,记录下我搭建环境时碰到的一些问题以及解决。 第一步:参考官网:开发 Android 应用 | Flutter 中文文档 - Flutter …...
Linux中的共享内存
在Linux中,共享内存是一种高效的进程间通信(IPC)机制,允许多个进程共享一块内存区域,从而实现数据的快速传递和共享。它的特点是可以直接访问共享的内存,无需额外的拷贝操作,因此速度非常快。 共…...
SpringBoot中忽略实体类中的某个属性不返回给前端的方法
使用Jackson的方式: //第一种方式,使用JsonIgnore注解标注在属性上,忽略指定属性 public class PropertyDTO {JsonProperty("disable")private Integer disable;JsonProperty("placeholder")private String placeholde…...
ubuntu 安装proxychains
在Ubuntu上安装Proxychains,你可以按照以下步骤操作: 1、更新列表 sudo apt-update 2、安装Proxychains sudo apt-get install proxychains 3、安装完成后,你可以通过编辑/etc/proxychains.conf文件来配置代理规则 以下是一个简单的配置示例&…...
pytorch四种单机多卡分布式训练方法
文章目录 1、原生pytorch(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/ 目录下会有默认的触摸板配置文件,如果…...
djinn:1 靶场学习小记
一、测试环境: kail攻击机:Get Kali | Kali Linux 靶场镜像:https://download.vulnhub.com/djinn/djinn.ova 描述: 该机器与 VirtualBox 和 VMWare 兼容。DHCP 将自动分配一个 IP。您将在登录屏幕上看到 IP。您必须找到并读取分…...
Ubuntu系统下交叉编译openssl
一、参考资料 OpenSSL&&libcurl库的交叉编译 - hesetone - 博客园 二、准备工作 1. 编译环境 宿主机:Ubuntu 20.04.6 LTSHost:ARM32位交叉编译器:arm-linux-gnueabihf-gcc-11.1.0 2. 设置交叉编译工具链 在交叉编译之前&#x…...
【解密LSTM、GRU如何解决传统RNN梯度消失问题】
解密LSTM与GRU:如何让RNN变得更聪明? 在深度学习的世界里,循环神经网络(RNN)以其卓越的序列数据处理能力广泛应用于自然语言处理、时间序列预测等领域。然而,传统RNN存在的一个严重问题——梯度消失&#…...
电脑插入多块移动硬盘后经常出现卡顿和蓝屏
当电脑在插入多块移动硬盘后频繁出现卡顿和蓝屏问题时,可能涉及硬件资源冲突、驱动兼容性、供电不足或系统设置等多方面原因。以下是逐步排查和解决方案: 1. 检查电源供电问题 问题原因:多块移动硬盘同时运行可能导致USB接口供电不足&#x…...
vue3 字体颜色设置的多种方式
在Vue 3中设置字体颜色可以通过多种方式实现,这取决于你是想在组件内部直接设置,还是在CSS/SCSS/LESS等样式文件中定义。以下是几种常见的方法: 1. 内联样式 你可以直接在模板中使用style绑定来设置字体颜色。 <template><div :s…...
保姆级教程:在无网络无显卡的Windows电脑的vscode本地部署deepseek
文章目录 1 前言2 部署流程2.1 准备工作2.2 Ollama2.2.1 使用有网络的电脑下载Ollama2.2.2 安装Ollama(有网络的电脑)2.2.3 安装Ollama(无网络的电脑)2.2.4 安装验证2.2.5 修改大模型安装位置2.2.6 下载Deepseek模型 2.3 将deepse…...
BLEU评分:机器翻译质量评估的黄金标准
BLEU评分:机器翻译质量评估的黄金标准 1. 引言 在自然语言处理(NLP)领域,衡量一个机器翻译模型的性能至关重要。BLEU (Bilingual Evaluation Understudy) 作为一种自动化评估指标,自2002年由IBM的Kishore Papineni等人提出以来,…...
脑机新手指南(七):OpenBCI_GUI:从环境搭建到数据可视化(上)
一、OpenBCI_GUI 项目概述 (一)项目背景与目标 OpenBCI 是一个开源的脑电信号采集硬件平台,其配套的 OpenBCI_GUI 则是专为该硬件设计的图形化界面工具。对于研究人员、开发者和学生而言,首次接触 OpenBCI 设备时,往…...
日常一水C
多态 言简意赅:就是一个对象面对同一事件时做出的不同反应 而之前的继承中说过,当子类和父类的函数名相同时,会隐藏父类的同名函数转而调用子类的同名函数,如果要调用父类的同名函数,那么就需要对父类进行引用&#…...
适应性Java用于现代 API:REST、GraphQL 和事件驱动
在快速发展的软件开发领域,REST、GraphQL 和事件驱动架构等新的 API 标准对于构建可扩展、高效的系统至关重要。Java 在现代 API 方面以其在企业应用中的稳定性而闻名,不断适应这些现代范式的需求。随着不断发展的生态系统,Java 在现代 API 方…...
在鸿蒙HarmonyOS 5中使用DevEco Studio实现指南针功能
指南针功能是许多位置服务应用的基础功能之一。下面我将详细介绍如何在HarmonyOS 5中使用DevEco Studio实现指南针功能。 1. 开发环境准备 确保已安装DevEco Studio 3.1或更高版本确保项目使用的是HarmonyOS 5.0 SDK在项目的module.json5中配置必要的权限 2. 权限配置 在mo…...
