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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/29481.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

有限自动机解释和应用案例

有限自动机&#xff08;Finite Automata&#xff09;&#xff0c;也称为有穷状态的机器&#xff0c;是一种数学模型&#xff0c;用于描述和识别输入符号串的过程。它由一个有限的内部状态集和一组控制规则组成&#xff0c;这些规则决定了在当前状态下读入输入符号后应转向什么状…

Android 配置蓝牙遥控器键值

文章目录 篇头一、规格书二、红外按键配置三、蓝牙按键配置3.1 查看设备号3.1.1 方式一&#xff1a;dumpsys input3.1.2 方式二&#xff1a; cat /proc/bus/input/devices 3.2 配置kl文件3.2.1 方案商原始配置3.2.2 Generic.kl 文件3.2.3 重映射蓝牙按键3.2.4 完成 Vendor\_568…

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

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

Docker MySQL Shutting down mysqld

6月初至6月15日发现MySQL无故停机多次&#xff0c;导致系统无法使用。接下来各种日志查看&#xff0c;排查原因。先附上一份Docker种MySQL的日志的截图。 一、根据Docker的日志初步估计是数据库内存飙升&#xff0c;从而被系统杀掉进程 查询Linux系统日志&#xff0c;在宿主机…

安卓Context上下文

目录 前言一、Context简介二、Application Context2.1 Application Context的创建过程2.2 Application Context的获取过程 三、Activity的Context创建过程四、Service的Context创建过程 前言 Context也就是上下文对象&#xff0c;是Android较为常用的类&#xff0c;但是对于Co…

互斥锁,自旋锁和死锁 一文详解,一网打尽

互斥锁&#xff08;Mutex&#xff09;和自旋锁&#xff08;Spinlock&#xff09;是两种常见的用于多线程编程中的同步机制&#xff0c;用于确保在多个线程访问共享资源时的协调性和正确性。以下是它们的主要特点和区别&#xff1a; 互斥锁&#xff08;Mutex&#xff09; 定义…

curl: (56) Recv failure: 连接被对方重设

目录 问题描述&#xff1a; 解决方案&#xff1a; 1.确认端口未被占用 2.检查 Docker 容器端口映射设置 3. 检查防火墙设置 4. 检查 Docker 网络配置 5. 检查 Docker Daemon 配置 6. 检查 SELinux 或 AppArmor 设置 7. 使用 Docker 命令行工具调试 8. 检查网络和路由设…

基于langchain和向量库微调qwen2-1.5B学习行业专属知识

现在有大量的word文档数据需要让大模型学习形成专业业务领域的知识后对外提供问答服务&#xff0c;以下是基于前问Qwen2-1.5B模型进行langchain RAG向量搜索大模型问答的实现过程。 第一步&#xff1a;原始数据处理 原始word文档数据里面包含了封面、目录、概述、专业知识章节…

网络聚合通信测试--自动化测试脚本

一 网络聚合通信测试 以下测试用例为&#xff1a; 整集群测试&#xff0c;每节点进程数从2开始以2的幂次增加至满核心&#xff1b; 测试常见的通信聚合测试8个条目 二 测试前准备 待测节点已完成OS安装及基础配置待测节点已配置完IP&#xff08;若存在IB&#xff0c;则需要配置…

第二十二篇——香农第二定律(一):为什么你的网页总是打不开?

目录 一、背景介绍二、思路&方案三、过程1.思维导图2.文章中经典的句子理解3.学习之后对于投资市场的理解4.通过这篇文章结合我知道的东西我能想到什么&#xff1f; 四、总结五、升华 一、背景介绍 看似在将知识&#xff0c;实际是在讲生活和所有&#xff1b;突破边界偶尔…

gitlab 获取指定分支下指定路径文件夹的解决方案

第一步&#xff1a; 获取 accessToken 及你的 项目 id &#xff1a; 获取 accessToken ,点击用户头像进入setting 按图示操作&#xff0c;第 3 步 填写你发起请求的域名。 获取项目 id , 简单粗暴方案 进入 你项目仓库页面后 直接 源码搜索 project_id&#xff0c; value 就…

【神经网络】基于CNN(卷积神经网络)构建猫狗分类模型

文章目录 解决问题数据集探索性数据分析数据预处理数据集分割数据预处理 构建模型并训练构建模型训练模型 结果分析与评估模型保存结果预测经验总结 解决问题 针对经典猫狗数据集&#xff0c;基于卷积神经网络&#xff0c;构建猫狗二元分类模型&#xff0c;使用数据集进行参数…

怎么提取视频中的音频?别错过这6个音频提取方法了!(全新)

您是否曾经发现过一个音乐很棒的视频&#xff0c;并想从视频中提取音频&#xff1f;如今&#xff0c;关于提取mp4视频中的音频需求越来越常见。例如&#xff0c;您可能想从mp4格式的电影中提取音频&#xff0c;将音乐用作手机铃声&#xff0c;或在自己的视频项目中使用视频中的…

[Qt] Qt Creator 编码警告:warning:C4819

Qt项目使用VC&#xff08;2019 64bit&#xff09;编译器出现此错误。 warning&#xff1a;C4819&#xff1a;该文件包含不能在当前代码页&#xff08;936&#xff09;中表示的字符。请将该文件保存为Unicode格式以防止数据丢失。(可能这个警告内容也会在Qt Creator 中乱码) 如…

Matlab只选取自己需要的数据画图

在Matlab作图的时候&#xff0c;经常会在同一个坐标系中作很多数据的图&#xff0c;如下图所示&#xff1a; 这就会导致不同数据所作的线会重叠在一起&#xff0c;不利于数据分析。如果只想对比几个数据的趋势&#xff0c;直接修改代码太过麻烦&#xff0c;可通过Matlab的绘图…

【C语言】数组参数和指针参数详解

在写代码的时候难免要把【数组】或者【指针】传给函数&#xff0c;那函数的参数该如何设计呢&#xff1f; 1 一维数组传参 #include <stdio.h> void test(int arr[])//ok? {} void test(int arr[10])//ok? {} void test(int* arr)//ok? {} void test2(int* arr[20])…

Java毕业设计 基于SSM助学贷款管理系统

Java毕业设计 基于SSM助学贷款管理系统 SSM 助学贷款管理系统 功能介绍 学生&#xff1a;登录 修改密码 学生信息 贷款项目信息 申请贷款 留言信息 公告 学校负责人&#xff1a;登录 修改密码 学生管理 学校负责人信息 贷款项目 贷款申请审批 留言信息 公告 银行负责人&…

Linux中nginx.conf如何配置【搬代码】

Nginx 是一个独立的软件。 它是一款高性能的 Web 服务器、反向代理服务器和负载均衡器等&#xff0c;具有强大的功能和广泛的应用场景。它通常需要单独进行安装和配置来发挥其作用。 下载网址&#xff1a;http://nginx.org/en/download.html nginx.conf写法&#xff1a; #配置…

鸿蒙实现金刚区效果

前言&#xff1a; DevEco Studio版本&#xff1a;4.0.0.600 所谓“金刚区"是位于APP功能入口的导航区域&#xff0c;通常以“图标文字”的宫格导航的形式出现。之所以叫“金刚区”&#xff0c;是因为该区域会随着业务目标的改变&#xff0c;展示不同的功能图标&#xff…

PostgreSQL源码分析——CREATE DATABASE

这里我们分析一下在PostgreSQL中创建数据库的源码&#xff0c;在分析源码之前&#xff0c;最好先阅读《PostgreSQL指南内幕探索》的第一章&#xff0c;数据库集簇、数据库和数据表&#xff0c;弄清其空间布局&#xff0c;理解PG中&#xff0c;数据库、表、元组是怎么布局的。通…