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

Vue3模拟国足18强赛抽签

Vue3国足18强赛抽签

国足遇到这个对阵,能顺利出现吗?
在这里插入图片描述

1、系统演示

Vue3模拟国足18强赛抽签

2、关键代码
  • 开始抽签
<script setup>
import FenDang from "@/components/chouqian/FenDang.vue";
import {ref} from "vue";let isShowFenDang = ref(false)
function showFenDang(){isShowFenDang.value = true;
}</script><template><div class="flex-container"><h2>2024年世界杯预选赛亚洲区抽签仪式</h2><img src="@/assets/fendang.png" alt="Logo" class="logo"><button class="start-button" @click="showFenDang">开始抽签</button><FenDang v-if="isShowFenDang"/></div>
</template><style scoped>
.flex-container {display: flex;flex-direction: column;align-items: center;justify-content: center;text-align: center; 
}.logo {width: 600px;
}.start-button {/* 根据需要设置合适的宽度和高度 */width: 100px; height: 40px; background-color: #4CAF50;border: none;color: white; padding: 10px 20px;text-align: center; text-decoration: none;font-size: 14px; margin: 4px 2px;cursor: pointer; border-radius: 8px; transition: background-color 0.3s; 
}.start-button:hover {background-color: #45a049;
}
</style>
  • 抽签结果
<template><div class="group-container"><div v-for="(groupImages, groupName) in dynamicGroups" :key="groupName" class="group-item"><h2>{{ groupName }}</h2><div class="image-grid"><div v-for="(image, index) in groupImages" :key="index" class="image-item"><img :src="image" :alt="`Image ${index + 1}`"></div></div></div><!-- 添加闪烁图片区域 --><div class="flashing-area"><h5 :class="tips==='抽签中...'?'tips-process-color':'tips-done-color'">{{tips}}</h5><transition name="fade"><img v-if="flashImages.length > 0" :src="flashImages[0]" alt="Flashing Image" /></transition></div></div>
</template><script setup>
import {ref, onMounted, nextTick, onUnmounted} from 'vue';const images = ref({level1: ['/level1/image1.png', '/level1/image2.png', '/level1/image3.png'],level2: ['/level2/image1.png', '/level2/image2.png', '/level2/image3.png'],level3: ['/level3/image1.png', '/level3/image2.png', '/level3/image3.png'],level4: ['/level4/image1.png', '/level4/image2.png', '/level4/image3.png'],level5: ['/level5/image1.png', '/level5/image2.png', '/level5/image3.png'],level6: ['/level6/image1.png', '/level6/image2.png', '/level6/image3.png']
});const dynamicGroups = ref({'A组': [],'B组': [],'C组': []
});const currentLevel = ref('level1');
const currentGroupIndex = ref(0);
const flashImages = ref([]);
const selectedImages = ref([]);
let flashTimer = null;
let tips = ref("抽签中...");const selectAndFlashImage = () => {const levelImagesCopy = [...images.value[currentLevel.value]];let flashIndex = 0;let flashSpeed = 50; // 初始闪烁速度,单位:毫秒let randomIndex = Math.floor(Math.random() * levelImagesCopy.length);let startTime = Date.now(); // 记录开始时间const adjustFlashSpeed = () => {if (Date.now() - startTime < 1800) {// 在前1.8秒内,根据时间线性增加闪烁速度flashSpeed += 5;} else {// 在最后0.2秒内,指数级增加闪烁速度flashSpeed = Math.min(flashSpeed * 1.5, 200);}};const flashTimer = setInterval(() => {adjustFlashSpeed();if (Date.now() - startTime < 1000) {flashImages.value = [levelImagesCopy[flashIndex]];flashIndex = (flashIndex + 1) % levelImagesCopy.length;} else {clearInterval(flashTimer);const finalImage = levelImagesCopy[randomIndex];flashImages.value = [finalImage]; // 设置为最终图片// 增加延时,让图片停留更长时间setTimeout(() => {dynamicGroups.value[Object.keys(dynamicGroups.value)[currentGroupIndex.value]].push(finalImage);selectedImages.value.push(finalImage);images.value[currentLevel.value] = images.value[currentLevel.value].filter((_, i) => i !== randomIndex);if (selectedImages.value.length < 18) {nextLevel();}else{tips.value="抽签结束,祝中国队好运";}}, 1000); // 延时2000毫秒}}, flashSpeed);
};const nextLevel = () => {if (selectedImages.value.length % 6 === 0 && selectedImages.value.length < 18) {currentGroupIndex.value = (currentGroupIndex.value + 1) % Object.keys(dynamicGroups.value).length;}const levels = Object.keys(images.value);const currentIndex = levels.indexOf(currentLevel.value);currentLevel.value = levels[(currentIndex + 1) % levels.length];if (selectedImages.value.length < 18) {selectAndFlashImage();}
};onMounted(() => {selectAndFlashImage();
});</script>

相关文章:

Vue3模拟国足18强赛抽签

Vue3国足18强赛抽签 国足遇到这个对阵&#xff0c;能顺利出现吗&#xff1f; 1、系统演示 Vue3模拟国足18强赛抽签 2、关键代码 开始抽签 <script setup> import FenDang from "/components/chouqian/FenDang.vue"; import {ref} from "vue";le…...

mesa编译器nir信息储存问题

概述 本来想将一个完整的可以从hlsl-dxil-spirv-nir-code的项目划分为两个动态库a.dll与b.dll。应用程序调用a.dll与b.dll执行相同的过程。 a.dll&#xff1a;执行dxil-spirv-nir前端相关的转换。 b.dll&#xff1a;执行nir-code的转换。 应用程序调用dxc实现hlsl-dxil的过程&…...

windows下mysql设置开机自启动

windows下mysql设置开机自启动 情况1.mysql服务不存在情况2.mysql服务已存在 我们先检查一下电脑是否存在mysql服务 此电脑(右键)—>管理—>服务 看一下能不能找到相关mysql 服务 情况1.mysql服务不存在 以管理员的身份运行命令窗口,找到mysqld.exe 所在的路径 命令如下…...

L2-002 链表去重(C++)

给定一个带整数键值的链表 L&#xff0c;你需要把其中绝对值重复的键值结点删掉。即对每个键值 K&#xff0c;只有第一个绝对值等于 K 的结点被保留。同时&#xff0c;所有被删除的结点须被保存在另一个链表上。例如给定 L 为 21→-15→-15→-7→15&#xff0c;你需要输出去重后…...

异或运算在面试题中的应用

异或运算 是 涉及到数据位运算时常见的处理方式。如何进行异或运算?在对应位上,相同为0,不同1,但其实两个数据异或运算就是进行无进位加法。 例如: int a = 7, b = 6, a ^b = ? 算法1: 相同为0,不同为1 a ^ b= : 0 0 0 1 算法2: 无进位…...

【2024最新华为OD-C/D卷试题汇总】[支持在线评测] 单词大师(100分) - 三语言AC题解(Python/Java/Cpp)

&#x1f36d; 大家好这里是清隆学长 &#xff0c;一枚热爱算法的程序员 ✨ 本系列打算持续跟新华为OD-C/D卷的三语言AC题解 &#x1f4bb; ACM银牌&#x1f948;| 多次AK大厂笔试 &#xff5c; 编程一对一辅导 &#x1f44f; 感谢大家的订阅➕ 和 喜欢&#x1f497; &#x1f…...

LabVIEW在SpaceX的应用

结合真实的资料介绍LabVIEW在SpaceX的应用&#xff0c;涵盖自动化测试系统、数据采集与监控、可视化与分析、模块化设计与扩展&#xff0c;以及效率与可靠性的提高。 ​ 自动化测试系统 LabVIEW在SpaceX的自动化测试系统中发挥了关键作用。自动化测试是确保SpaceX火箭及其子系…...

【Android面试八股文】讲一讲String、StringBuffer和StringBuilder在进行字符串操作时候的效率

文章目录 一、String二、StringBuffer三、StringBuilder四、String、StringBuffer和StringBuilder的效率测试五、String、StringBuffer和StringBuilder的选择一、String String是不可变的,final修饰,任何对String的操作都会创建一个新的String对象。在进行大量字符串拼接或修…...

[自动驾驶 SoC]-4 特斯拉FSD

FSD, 参考资料来源FSD Chip - Tesla - WikiChip 另外可参考笔者之前分享文章&#xff1a;[自动驾驶技术]-6 Tesla自动驾驶方案之硬件&#xff08;AI Day 2021&#xff09;&#xff0c;​​​​​​​[自动驾驶技术]-8 Tesla自动驾驶方案之硬件&#xff08;AI Day 2022&#xf…...

PostgreSQL源码分析——物化视图

我们前面分析完视图后&#xff0c;这里再继续分析一下物化视图&#xff0c;其实现原理是不相同的&#xff0c;需要注意&#xff0c;物化视图等于是将返回的结果集缓存起来&#xff0c;而视图是查询重写&#xff0c;结果需要重新进行计算。 create materialized view matvt1 as…...

操作系统入门系列-MIT6.828(操作系统工程)学习笔记(七)---- 系统调用函数与GDB(Lab: system calls)

系列文章目录 操作系统入门系列-MIT6.828&#xff08;操作系统工程&#xff09;学习笔记&#xff08;一&#xff09;---- 操作系统介绍与接口示例 操作系统入门系列-MIT6.828&#xff08;操作系统工程&#xff09;学习笔记&#xff08;二&#xff09;---- 课程实验环境搭建&am…...

ORA-12560: TNS:协议适配器错误

项目场景&#xff1a; 由于最近一直没有连接oracle&#xff0c;然后之前windows也是正常可以启动oracle&#xff0c;正常连接。无论是SQL Developer还是SQL PLUS命令&#xff0c;都能正常连接和操作。 问题描述 这两天刚好用SQL Developer工具连接&#xff0c;然后报错&#…...

不容小觑的“白纸黑字”:银行重空凭证的风险与防控

一、定义与重要性 定义&#xff1a; 银行重空凭证&#xff0c;也称为重要空白凭证&#xff0c;是银行专业术语&#xff0c;指银行印制的无面额、经银行或单位填写金额并签章后&#xff0c;即具有支取款项效力的空白凭证。 重要性&#xff1a; 它是银行资金支付的重要工具&a…...

30v-180V降3.3V100mA恒压WT5107

30v-180V降3.3V100mA恒压WT5107 WT5107是一款恒压单片机供电芯片&#xff0c;它可以30V-180V直流电转换成稳定的3.3V直流电&#xff08;最大输出电流300mA&#xff09;&#xff0c;为各种单片机供电。WT5107的应用也非常广泛。它可以用于智能家居、LED照明、电子玩具等领域。比…...

Spring Boot 和 Spring Cloud 的区别及选型

Spring Boot 和 Spring Cloud 是现代 Java 开发中非常流行的两个框架&#xff0c;它们分别解决了不同层次的问题。本文将详细介绍 Spring Boot 和 Spring Cloud 的区别&#xff0c;以及在不同场景下如何选择合适的技术。 Spring Boot 什么是 Spring Boot Spring Boot 是一个…...

【神经网络】图像的数字视角

文章目录 图像的数字视角引言直观感受内在剖析图像常用函数图像三维层次 经验总结 图像的数字视角 引言 在机器视觉和目标识别领域&#xff0c;需要处理的对象都是图像&#xff0c;但这些领域的模型都是针对数值进行训练的&#xff0c;那么图像和数值之间是什么关系呢?答案是…...

ChatGPT的问题与回复的内容导出(Chorme)

我给出两种方式&#xff0c;第一种方式无使用要求&#xff0c;第二种方式必须安装Chorme 个人更推荐第二种方式 第一种方式&#xff1a;使用chatgpt自带的数据导出 缺点&#xff1a;会将当前未归档的所有聊天记录导出&#xff0c;发送到你的电子邮箱中 第二种方式&#xff1a…...

游戏开发中的坑之十四 photoshop的javascript脚本批量修改分辨率

原因&#xff1a;美术提交大量2048x2048的贴图&#xff0c;导致工程臃肿。 方案&#xff1a;使用photoshop的javascript脚本批量把指定的文件夹以及所有子文件夹的贴图进行压缩。 脚本中指定针对2048x2048的贴图进行处理。 // Photoshop JavaScript to resize TGA images with…...

leetcode打卡#day45 携带研究材料(第七期模拟笔试)、518. 零钱兑换 II、377. 组合总和 Ⅳ、爬楼梯(第八期模拟笔试)

携带研究材料&#xff08;第七期模拟笔试&#xff09; #include<iostream> #include<algorithm> #include<vector>using namespace std;int main() {int N, V;cin >> N >> V;vector<int> weights(N1);vector<int> values(V1);int w…...

Vite+Vue3安装且自动按需引入Element Plus组件库

一&#xff0c;安装Element Plus npm install element-plus //node环境16二&#xff0c;安装插件 npm install unplugin-auto-import unplugin-vue-components -D三&#xff0c;配置vite.config.ts文件 //按需引入element-plus组件 import AutoImport from unplugin-auto-i…...

React Native 导航系统实战(React Navigation)

导航系统实战&#xff08;React Navigation&#xff09; React Navigation 是 React Native 应用中最常用的导航库之一&#xff0c;它提供了多种导航模式&#xff0c;如堆栈导航&#xff08;Stack Navigator&#xff09;、标签导航&#xff08;Tab Navigator&#xff09;和抽屉…...

Auto-Coder使用GPT-4o完成:在用TabPFN这个模型构建一个预测未来3天涨跌的分类任务

通过akshare库&#xff0c;获取股票数据&#xff0c;并生成TabPFN这个模型 可以识别、处理的格式&#xff0c;写一个完整的预处理示例&#xff0c;并构建一个预测未来 3 天股价涨跌的分类任务 用TabPFN这个模型构建一个预测未来 3 天股价涨跌的分类任务&#xff0c;进行预测并输…...

Nginx server_name 配置说明

Nginx 是一个高性能的反向代理和负载均衡服务器&#xff0c;其核心配置之一是 server 块中的 server_name 指令。server_name 决定了 Nginx 如何根据客户端请求的 Host 头匹配对应的虚拟主机&#xff08;Virtual Host&#xff09;。 1. 简介 Nginx 使用 server_name 指令来确定…...

CocosCreator 之 JavaScript/TypeScript和Java的相互交互

引擎版本&#xff1a; 3.8.1 语言&#xff1a; JavaScript/TypeScript、C、Java 环境&#xff1a;Window 参考&#xff1a;Java原生反射机制 您好&#xff0c;我是鹤九日&#xff01; 回顾 在上篇文章中&#xff1a;CocosCreator Android项目接入UnityAds 广告SDK。 我们简单讲…...

Springcloud:Eureka 高可用集群搭建实战(服务注册与发现的底层原理与避坑指南)

引言&#xff1a;为什么 Eureka 依然是存量系统的核心&#xff1f; 尽管 Nacos 等新注册中心崛起&#xff0c;但金融、电力等保守行业仍有大量系统运行在 Eureka 上。理解其高可用设计与自我保护机制&#xff0c;是保障分布式系统稳定的必修课。本文将手把手带你搭建生产级 Eur…...

WEB3全栈开发——面试专业技能点P2智能合约开发(Solidity)

一、Solidity合约开发 下面是 Solidity 合约开发 的概念、代码示例及讲解&#xff0c;适合用作学习或写简历项目背景说明。 &#x1f9e0; 一、概念简介&#xff1a;Solidity 合约开发 Solidity 是一种专门为 以太坊&#xff08;Ethereum&#xff09;平台编写智能合约的高级编…...

USB Over IP专用硬件的5个特点

USB over IP技术通过将USB协议数据封装在标准TCP/IP网络数据包中&#xff0c;从根本上改变了USB连接。这允许客户端通过局域网或广域网远程访问和控制物理连接到服务器的USB设备&#xff08;如专用硬件设备&#xff09;&#xff0c;从而消除了直接物理连接的需要。USB over IP的…...

return this;返回的是谁

一个审批系统的示例来演示责任链模式的实现。假设公司需要处理不同金额的采购申请&#xff0c;不同级别的经理有不同的审批权限&#xff1a; // 抽象处理者&#xff1a;审批者 abstract class Approver {protected Approver successor; // 下一个处理者// 设置下一个处理者pub…...

R语言速释制剂QBD解决方案之三

本文是《Quality by Design for ANDAs: An Example for Immediate-Release Dosage Forms》第一个处方的R语言解决方案。 第一个处方研究评估原料药粒径分布、MCC/Lactose比例、崩解剂用量对制剂CQAs的影响。 第二处方研究用于理解颗粒外加硬脂酸镁和滑石粉对片剂质量和可生产…...

Mysql8 忘记密码重置,以及问题解决

1.使用免密登录 找到配置MySQL文件&#xff0c;我的文件路径是/etc/mysql/my.cnf&#xff0c;有的人的是/etc/mysql/mysql.cnf 在里最后加入 skip-grant-tables重启MySQL服务 service mysql restartShutting down MySQL… SUCCESS! Starting MySQL… SUCCESS! 重启成功 2.登…...