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/bicheng/29611.shtml

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

相关文章

赶紧收藏!2024 年最常见 20道设计模式面试题(三)

上一篇地址&#xff1a;赶紧收藏&#xff01;2024 年最常见 20道设计模式面试题&#xff08;二&#xff09;-CSDN博客 五、建造者模式&#xff1a;建造者模式如何解决复杂对象的构建问题&#xff1f; 建造者模式&#xff08;Builder Pattern&#xff09;是一种对象创建型设计…

看完轻松解决家里灰尘毛絮多难题?除粉尘的空气净化器品牌分享

家里的空气中弥漫着灰尘和毛絮&#xff0c;让人呼吸不畅&#xff0c;也影响着家人的健康。灰尘中含有各种有害物质&#xff0c;如细菌、病毒、花粉等&#xff0c;长期吸入会导致呼吸道疾病、皮肤过敏等问题。尤其是对于有宠物、孩子、过敏人群来说&#xff0c;空气质量更是至关…

关于办公软件的使用

第一部分&#xff1a; 常用函数的使用 在使用的地方&#xff0c;输入SUM(B2:F2)回车 第二部分&#xff1a; 自定义函数的使用 1、打开 宏编辑 2、 自定义函数方法 3、自定义函数的使用和常用函数一样&#xff1a; 在使用的地方&#xff0c;输入计算面积(A3&#xff0c;B3)…

游戏试玩站打码zq平台系统可运营的任务网源码

安装说明 1.恢复数据&#xff1b; 2.数据连接库配置路径&#xff1a;protected\config\mail.php 文件中修改第60行 &#xff08;记得不要用记事本修改&#xff0c;否则可能会出现验证码显示不了问题&#xff0c;建议用Notepad&#xff09; 3.浏览器访问输入 127.0.0.2 显示界…

Hype4.0 for Mac软件下载-Hype for Mac HTML5 创作工具下载附加详细安装步骤

Hype 4 Pro Mac正式版是款功能实用的动画创作工具。Hype 4 Pro Mac最新版可以帮您轻松创建令人惊叹的动画和交互式网页内容。并且Hype 4 Pro Mac还可被设计师用来创建动画&#xff0c;为网页、信息图形、演示文稿、数字杂志、广告、iBooks、教育内容、应用程序原型、作品集、动…

C# —— 字典

简介 字典: 包含一个key(键)和这个key所对应的value(值),字典是无序的,key是唯一的&#xff0c;可以根据key获取值。可以吧键当成数组的索引值进行理解 <> 泛型 定义一个字典 new Dictionary<key的类型, value值的类型>() var dic new Dictionary<string, s…

Flume基础教程

Apache Flume教程 资料来源&#xff1a;Apache Flume - Introduction (tutorialspoint.com) Flume是一个标准的、简单的、健壮的、灵活的、可扩展的工具&#xff0c;用于将从各种数据生产者(web服务器)中所产生的数据抽取到Hadoop中。在本教程中&#xff0c;我们将使用简单的…

软件测试技术(一):软件测试流程

软件测试流程 软件测试流程如下&#xff1a; 测试计划测试设计测试执行 单元测试集成测试确认测试系统测试验收测试回归测试验证活动 测试计划 测试计划由测试负责人来编写&#xff0c;用于确定各个测试阶段的目标和策略。这个过程将输出测试计划&#xff0c;明确要完成的测…

ch552g使用torch-pad测试触摸按键遇到的问题

基本工作原理 通过设置好功能在寄存器和控制寄存器检测引脚输入的值。 实际检测阶段分为3个步骤&#xff1a;第一阶段&#xff1a;选择需要检测的阶段&#xff0c;选择扫描周期1或2ms&#xff0c;开启触摸按键中断&#xff0c;然后在87us内为充电准备阶段&#xff0c;87us内数…

Matplotlib(小案例)

1、3D表面形状的绘制 from mpl_toolkits.mplot3d import Axes3D import matplotlib.pyplot as plt import numpy as np import matplotlib as mplfigplt.figure() axfig.add_subplot(111,projection3d)unp.linspace(0,2*np.pi,100) vnp.linspace(0,np.pi,100) x10*np.outer(n…

Faiss assertion ‘err == cudaSuccess‘ failed in void faiss::gpu:runL2Norm()

Faiss assertion ‘err cudaSuccess’ failed in void faiss::gpu:runL2Norm(). details:CUA error 209 no kernel image is available for execution on the device 本人使用的ubuntu 22.04系统&#xff0c;conda的环境。使用pip安装faiss-gpu出现的问题。 pip install fai…

心跳机制讲解及实例

什么是心跳机制 心跳机制出现在tcp长连接中&#xff0c;客户端和服务器之见定时发送一种特殊的数据包通知对方还在线&#xff0c;以确保tcp链接地可靠性&#xff0c;有可能tcp链接由于某些原因(列入网线被拔了&#xff0c;突然断电)导致客户端断了&#xff0c;但是服务器不知道…

从11个视角看全球Rust程序员3/4:深度解读JetBrains最新报告

讲动人的故事,写懂人的代码 6 Rust程序员都在用什么IDE? 基于之前的讨论,小吾想今年底的IntelliJ全球程序员生态报告出来后,IDE使用的情况可能会发生一些变化。小吾预计会有更多的程序员从IntelliJ IDEA和CLion转向RustRover。 55%的程序员在使用Visual Studio Code24%的程…

编程猫少儿编程怎么下载:详细步骤与实用指南

编程猫少儿编程怎么下载&#xff1a;详细步骤与实用指南 在数字化教育浪潮的推动下&#xff0c;编程猫少儿编程作为一款专为青少年设计的图形化编程工具平台&#xff0c;受到了越来越多家长和孩子的青睐。那么&#xff0c;如何下载并安装这款应用呢&#xff1f;接下来&#xf…

PostgreSQL源码分析——bgwriter

为什么会有bgwriter bgwriter进程主要负责将共享缓冲区&#xff08;Buffer&#xff09;中的脏页刷盘&#xff0c;这个进程主要是从数据库性能的考虑而加的&#xff0c;如果没有这个进程&#xff0c;数据库一样可以工作。所以&#xff0c;这里重点理解的就是bgwriter进程对性能…

SQL注入-中篇

SQL盲注 一、时间盲注 模拟环境&#xff1a;Less-9 概述 延迟注入&#xff0c;一种盲注的手法&#xff0c;提交对执行时间敏感的sql语句&#xff0c;通过执行时间的长短来判断是否执行成功。 时间注入函数 sleep() if() ascii() substring() length() mid()判断是否存在延…

存储文件夹下所有.cpp和.h的代码到对应的txt文件里

最近大半年刷了160多天的题&#xff0c;每次刷的时候都要新建一个VS文件&#xff0c;所以文件内存太大了&#xff0c;又舍不得删&#xff0c;就用ai整了一个脚本&#xff0c;可将当前路径下的所有文件里的.cpp和.h文件储存到相应名字的txt文件里&#xff0c;若文件夹下还有文件…

SpringBoot + Maven 项目的创建

文章目录 1、Maven2、SpringBoot3、二者之间的联系4、项目的创建 在创建项目之前&#xff0c;肯定要知道他们之间的区别 1、Maven maven是一个跨平台的项目管理工具。它是Apache的一个开源项目&#xff0c;主要服务于基于Java平台的项目构建、依赖管理和项目信息管理。 比如说…

Spring注解----------@Deprecated

情景&#xff1a; 在我们开发过程中&#xff0c;有时候会遇到我们需要将几个类中的方法集中到一个类中&#xff0c;但是我们又不希望把我们的原来的类删掉&#xff08;就是单纯的不想删除&#xff0c;都是我写的代码我不想杀死我的结晶&#xff0c;不能说我写的是shi&#xff…

为什么要选择华为 HCIE-Security 课程?

2020 年我国网络安全市场规模达到 680 亿元&#xff0c;同比增长 25%。随着对网络安全的愈加重视及布局&#xff0c;市场规模将持续扩大。 近年来&#xff0c;随着“云大物工移智”等新兴技术的快速发展和普及应用&#xff0c;数字化已经融入社会经济生活的方方面面&#xff0c…