prefácio
Faz muito tempo que não escrevo um artigo. A última vez que publiquei um artigo foi um resumo de final de ano. Em um piscar de olhos, é mais um ano. Cada vez que quero resumir mais, não consigo me limitar a É difícil. Desta vez, vou compartilhar um pequeno jogo da loteria Jiugongge. A origem é que a empresa precisou fazer uma loteria de pontos recentemente. Vou fazer um resumo do efeito dinâmico da loteria e perceber o processo e os pontos de atenção de uma loteria funcionar do zero. O código da função de demonstração é implementado usando vue3, que usa principalmente a API combinada. Como é apenas uma demonstração simples, nenhuma ferramenta de scaffolding e empacotamento é usada.
Demanda e efeito
Requisitos: 1. O presente é gerado de acordo com a configuração de fundo 2. O efeito de rotação do letreiro 3. O resultado é gerado em segundo plano e a probabilidade de cada presente é diferente (a probabilidade não será discutida aqui)
Pontos a serem observados: 1. Como organizar o layout, seja organizado de acordo com a execução ou de cima para baixo, da esquerda para a direita. 2. Como inserir o botão de clique, como gerar a estrutura DOM 3. Como realizar o efeito das corridas de cavalos e como controlar a velocidade 4. Como lidar com a interface, incluindo relatórios de erros de interface, efeitos especiais 5 ao solicitar Pendente, resultado de retorno de fundo consistente com o resultado selecionado após a corrida de cavalos, etc.
Renderizações finais:
Nota: As imagens são todas encontradas por imagens Baidu
realização de funções
Etapa 1: Implementar o layout
Ideia: Solicite a lista de presentes configurada em segundo plano. Geralmente, são configurados 8 presentes, incluindo o agradecimento pela participação. O primeiro método é fazer o layout manualmente e escrever 9 tags div de presente. Dessa forma, o botão Iniciar pode ser gravado diretamente no o layout. O segundo pode ser percorrido, aqui eu uso o método traverse, mas o botão precisa ser inserido no array lista de presentes. O código css pode usar layout flexível, três linhas e três colunas estão corretas e, em seguida, adicione os estilos necessários. A parte js usa principalmente o método splice() para inserir o <botão de início>.
Parte do código:
<body><div id="app" v-cloak><div class="container"><div :class="['item', {'active': currentIndex === index}]"v-for="(item, index) in prizeList"@click="start(index)"><img :src="item.pic" alt=""><p v-if="index !== 4">{
{ item.name }}</p></div></div></div>
</body>
const state = reactive({prizeList: [{ name: '手机', pic: 'https://bkimg.cdn.bcebos.com/pic/3801213fb80e7bec54e7d237ad7eae389b504ec23d9e' },{ name: '手表', pic: 'https://img1.baidu.com/it/u=2631716577,1296460670&fm=253&fmt=auto&app=120&f=JPEG' },{ name: '苹果', pic: 'https://img2.baidu.com/it/u=2611478896,137965957&fm=253&fmt=auto&app=138&f=JPEG' },{ name: '棒棒糖', pic: 'https://img2.baidu.com/it/u=576980037,1655121105&fm=253&fmt=auto&app=138&f=PNG' },{ name: '娃娃', pic: 'https://img2.baidu.com/it/u=4075390137,3967712457&fm=253&fmt=auto&app=138&f=PNG' },{ name: '木马', pic: 'https://img1.baidu.com/it/u=2434318933,2727681086&fm=253&fmt=auto&app=120&f=JPEG' },{ name: '德芙', pic: 'https://img0.baidu.com/it/u=1378564582,2397555841&fm=253&fmt=auto&app=120&f=JPEG' },{ name: '玫瑰', pic: 'https://img1.baidu.com/it/u=1125656938,422247900&fm=253&fmt=auto&app=120&f=JPEG' }], // 后台配置的奖品数据
})
const startBtn = { name: '开始按钮', pic: 'https://img2.baidu.com/it/u=1497996119,382735686&fm=253' }
onMounted(() => {// state.prizeList.forEach((item, index) => {//item.id = index// })state.prizeList.splice(4, 0, startBtn)console.log(state.prizeList)
})
O segundo passo: perceber o efeito dinâmico
A realização do efeito marquise de ideia é principalmente destacar em um círculo. Aqui podemos pensar que as coordenadas do presente atual e o restante do número de passos executados pela corrida de cavalos dividido por 8 são os mesmos. No entanto, a ordem de renderização é diferente da lista de presentes, então podemos definir uma matriz de sequência de coordenadas de presentes executada por uma corrida de cavalos prizeSort = [0, 1, 2, 5, 8, 7, 6, 3], para que seja executada em um círculo. Então, se a animação for executada passo a passo, podemos usar um cronômetro e, em seguida, deixar o índice subscrito atualmente destacado currentIndex alterar o número de voltas em intervalos. Podemos personalizar o número de voltas. Aqui usamos o número total de execução etapas a serem calculadas, que devem ser um múltiplo de 8, por exemplo, se você precisar girar 4 vezes a cada vez, o número total básico de etapas a serem executadas é de 32 etapas e, em seguida, calcule quantos etapas a serem executadas com base nas coordenadas de o presente em segundo plano, mais 32, que é o número de sedes executadas pela corrida de cavalos. É rápido primeiro e depois ocupado. Se usarmos o método timer setTimeout(), o tempo de espera do segundo parâmetro será maior e Pode-se julgar que se o número total de etapas de execução exceder o normal ou dois terços, o tempo de espera do temporizador será aumentado. , tornando a execução da próxima etapa cada vez mais lenta.
Etapa 3: resultados da loteria em segundo plano
Ideia: Se os resultados da loteria forem retornados em segundo plano, pode haver os problemas 4 e 5 mencionados acima, como relatório de erro de interface e longa espera, podemos lidar com isso da seguinte maneira: clique para solicitar o retorno do resultado antes de iniciar a animação e podemos solicitar diretamente o relatório de erros da interface, como esperar por um longo tempo, podemos adicionar um prompt de carregamento, para que esses dois problemas possam ser basicamente resolvidos. Quanto à questão de como combinar os resultados retornados pelo plano de fundo com os resultados da execução do efeito de animação, conforme mencionado acima, temos um número básico de etapas de execução e, a seguir, calculamos quantas etapas executar de acordo com o presente coordenadas dos resultados da solicitação e adicione os resultados para corresponder superior.
o código
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style> * {margin: 0; padding: 0; box-sizing: border-box; }[v-cloak] {display: none;}.container {width: 450px;height: 450px;background: #98d3fc;border: 1px solid #98d3fc;margin: 100px auto;display: flex;flex-wrap: wrap;justify-content: space-around;align-items: center;}.item {width: 140px;height: 140px;border: 2px solid #fff;position: relative;}.item:nth-of-type(5) {cursor: pointer;}.item img {width: 100%;height: 100%;}.item p {width: 100%;height: 20px;background: rgba(0, 0, 0, 0.5);color: #fff;font-size: 12px;text-align: center;line-height: 20px;position: absolute;left: 0;bottom: 0;}.active {border: 2px solid red;box-shadow: 2px 2px 30px #fff;} </style>
</head>
<body><div id="app" v-cloak><div class="container"><div :class="['item', {'active': currentIndex === index}]"v-for="(item, index) in prizeList"@click="start(index)"><img :src="item.pic" alt=""><p v-if="index <img src="https://unpkg.com/vue@3/dist/vue.global.js"></script><script> const { createApp, onMounted, ref, reactive, toRefs, computed } = VuecreateApp({setup () {const state = reactive({prizeList: [{ name: '手机', pic: 'https://bkimg.cdn.bcebos.com/pic/3801213fb80e7bec54e7d237ad7eae389b504ec23d9e' },{ name: '手表', pic: 'https://img1.baidu.com/it/u=2631716577,1296460670&fm=253&fmt=auto&app=120&f=JPEG' },{ name: '苹果', pic: 'https://img2.baidu.com/it/u=2611478896,137965957&fm=253&fmt=auto&app=138&f=JPEG' },{ name: '棒棒糖', pic: 'https://img2.baidu.com/it/u=576980037,1655121105&fm=253&fmt=auto&app=138&f=PNG' },{ name: '娃娃', pic: 'https://img2.baidu.com/it/u=4075390137,3967712457&fm=253&fmt=auto&app=138&f=PNG' },{ name: '木马', pic: 'https://img1.baidu.com/it/u=2434318933,2727681086&fm=253&fmt=auto&app=120&f=JPEG' },{ name: '德芙', pic: 'https://img0.baidu.com/it/u=1378564582,2397555841&fm=253&fmt=auto&app=120&f=JPEG' },{ name: '玫瑰', pic: 'https://img1.baidu.com/it/u=1125656938,422247900&fm=253&fmt=auto&app=120&f=JPEG' }], // 后台配置的奖品数据currentIndex: 0, // 当前位置isRunning: false, // 是否正在抽奖speed: 10, // 抽奖转动速度timerIns: null, // 定时器实例currentRunCount: 0, // 已跑次数totalRunCount: 32, // 总共跑动次数 8的倍数prizeId: 0, // 中奖id})const startBtn = { name: '开始按钮', pic: 'https://img2.baidu.com/it/u=1497996119,382735686&fm=253' }// 奖品高亮顺序const prizeSort = [0, 1, 2, 5, 8, 7, 6, 3]// 要执行总步数const totalRunStep = computed(() => {return state.totalRunCount + prizeSort.indexOf(state.prizeId)})onMounted(() => {// state.prizeList.forEach((item, index) => {//item.id = index// })state.prizeList.splice(4, 0, startBtn)console.log(state.prizeList)})// 获取随机数const getRandomNum = () => {// const num = Math.floor(Math.random() * 9)// if (num === 4) {//console.log(">>>>>不能为4")//return getRandomNum()// } else {//return num // }// 这里一次必然可以取到 时间为1次return prizeSort[Math.floor(Math.random() * prizeSort.length)]}const start = (i) => {if (i === 4 && !state.isRunning) {// 重置数据state.currentRunCount = 0state.speed = 100state.isRunning = trueconsole.log('开始抽奖，后台请求中奖奖品')// 请求返回的奖品编号 这里使用随机数 但不能为4// const prizeId = getRandomNum()// console.log('中奖ID>>>', prizeId, state.prizeList[prizeId])// state.prizeId = prizeId// 模拟接口延时返回 如果接口突然报错如何处理？直接调用stopRun()方法停止转动setTimeout(() => {const prizeId = getRandomNum()console.log('中奖ID>>>', prizeId, state.prizeList[prizeId])state.prizeId = prizeId}, 2000)startRun()}}const startRun = () => {stopRun()console.log(state.currentRunCount, totalRunStep.value)// 要执行总步数// 已走步数超过if (state.currentRunCount > totalRunStep.value) {state.isRunning = falsereturn}state.currentIndex = prizeSort[state.currentRunCount % 8]// 如果当前步数超过了2/3则速度慢下来if (state.currentRunCount > Math.floor(state.totalRunCount * 2 / 3)) {state.speed = state.speed + Math.floor(state.currentRunCount / 3)console.log('速度>>>>', state.speed)}state.timerIns = setTimeout(() => {state.currentRunCount++startRun()}, state.speed)}const stopRun = () => {state.timerIns && clearTimeout(state.timerIns)}return {...toRefs(state),start}}}).mount('#app') </script" style="margin: auto" />
</body>
</html>
Finalmente
Organizou um conjunto de "Coleção de entrevistas de fabricantes de front-end", incluindo HTML, CSS, JavaScript, HTTP, protocolo TCP, navegador, VUE, React, estrutura de dados e algoritmo, um total de 201 perguntas de entrevista e deu uma resposta para cada pergunta Responda e analise.
Amigos necessitados, você pode clicar no cartão no final do artigo para receber este documento e compartilhá-lo gratuitamente
Parte da documentação mostra:
A extensão do artigo é limitada e o conteúdo a seguir não será exibido um por um
Amigos necessitados, você pode clicar no cartão abaixo para obtê-lo gratuitamente