prefacio
Ha pasado mucho tiempo desde que escribí un artículo. La última vez que publiqué un artículo fue un resumen de fin de año. En un abrir y cerrar de ojos, es otro año. Cada vez que quiero resumir más, no puedo ceñirme a Es difícil. Esta vez, compartiré un pequeño juego de lotería Jiugongge. El origen es que la empresa necesita hacer puntos de lotería recientemente. Dibujaré un resumen del efecto dinámico de la lotería y me daré cuenta del proceso y los puntos de atención de una lotería. función desde cero. El código de la función de demostración se implementa utilizando vue3, que utiliza principalmente la API combinada. Dado que es solo una demostración simple, no se utilizan herramientas de andamiaje y empaquetado.
Demanda y efecto
Requisitos: 1. El regalo se genera de acuerdo con la configuración de fondo 2. El efecto de rotación de marquesina 3. El resultado se genera en segundo plano y la probabilidad de cada regalo es diferente (la probabilidad no se discutirá aquí)
Puntos a tener en cuenta: 1. Cómo organizar el diseño, ya sea de arriba hacia abajo de izquierda a derecha 2. Cómo insertar el botón de clic, cómo generar la estructura DOM 3. Cómo realizar el efecto de las carreras de caballos y cómo controlar la velocidad 4. Cómo lidiar con la interfaz, incluidos los informes de errores de la interfaz, los efectos especiales 5 al solicitar Pendiente, el resultado de retorno de fondo consistente con el resultado seleccionado después de la carrera de caballos, etc.
Representaciones finales:
Nota: todas las imágenes se encuentran en las imágenes de Baidu.
realización de funciones
Paso 1: implementar el diseño
Idea: Solicite la lista de regalos configurada en segundo plano. Generalmente, se configuran 8 regalos, incluido el agradecimiento por participar. El primer método es diseñar y escribir manualmente 9 etiquetas div de regalo. De esta manera, el botón de inicio se puede escribir directamente en el diseño El segundo se puede atravesar, aquí uso el método transversal, pero el botón necesita que lo insertemos en la matriz de la lista de regalos. El código css puede usar el diseño flexible, tres filas y tres columnas son correctas y luego agregar los estilos requeridos. La parte js utiliza principalmente el método splice() para insertar el <botón de inicio>.
Parte del 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)
})
El segundo paso: darse cuenta del efecto dinámico.
La realización del efecto de marquesina de ideas es principalmente para resaltar en un círculo. Aquí podemos pensar que las coordenadas del regalo actual y el resto del número de pasos ejecutados por la carrera de caballos dividido por 8 son los mismos. Sin embargo, el orden de representación es diferente de la lista de regalos, por lo que podemos definir una matriz de secuencias de coordenadas de regalos ejecutadas por una carrera de caballos prizeSort = [0, 1, 2, 5, 8, 7, 6, 3], por lo que se ejecuta en un círculo. Luego, si la animación se ejecuta paso a paso, podemos usar un temporizador y luego dejar que el índice de subíndice actualmente resaltado currentIndex cambie el número de vueltas a intervalos. Podemos personalizar el número de vueltas. Aquí usamos el número total de ejecución pasos para calcular, que debe ser un múltiplo de 8, por ejemplo, si necesita girar 4 veces cada vez, el número total básico de pasos para ejecutar es 32 pasos, y luego calcule cuántos pasos tomar en función de las coordenadas de el regalo en segundo plano, más 32, que es el número de cuartel que ejecuta la carrera de caballos. Primero es rápido y luego ocupado. Si usamos el método timer setTimeout(), el tiempo de espera del segundo parámetro será más largo y Se puede juzgar que si el número total de pasos de ejecución excede el normal o dos tercios, el tiempo de espera del temporizador aumentará, haciendo que la ejecución del siguiente paso sea cada vez más lenta.
Paso 3: Resultados de la lotería de antecedentes
Idea: si los resultados de la lotería se devuelven en segundo plano, puede haber problemas 4 y 5 mencionados anteriormente, como informes de errores de interfaz y largas esperas, podemos manejarlo de la siguiente manera: haga clic para solicitar el resultado devuelto antes de iniciar la animación, y podemos solicitar directamente el informe de error de la interfaz, cómo esperar mucho tiempo, podemos agregar un aviso de carga, para que estos dos problemas básicamente puedan resolverse. En cuanto a la cuestión de cómo hacer coincidir los resultados devueltos por el fondo con los resultados de la ejecución del efecto de animación, como se mencionó anteriormente, tenemos un número básico de pasos de ejecución y luego calculamos cuántos pasos ejecutar según el regalo. coordenadas de los resultados de la solicitud y agregue los resultados para que coincidan con superior.
el 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>
Por fin
Organicé un conjunto de "Colección de entrevistas de fabricantes de front-end", que incluye HTML, CSS, JavaScript, HTTP, protocolo TCP, navegador, VUE, React, estructura de datos y algoritmos, un total de 201 preguntas de entrevistas, e hice una respuesta para cada pregunta Responde y analiza.
Amigos necesitados, pueden hacer clic en la tarjeta al final del artículo para recibir este documento y compartirlo gratis
Parte de la documentación muestra:
La longitud del artículo es limitada y el siguiente contenido no se mostrará uno por uno.
Amigos que lo necesitan, pueden hacer clic en la tarjeta a continuación para obtenerla gratis