ya se han respondido muchas preguntas similares, pero nada parece funcionar para mí, así que quiero resaltar el elemento al hacer clic en la barra de navegación (8k) y luego eliminarlo después de unos segundos, simplemente no puedo entender cómo hacerlo sin actualizar toda la página. ¿Hay alguna forma de actualizar solo el div o se puede hacer sin actualizar? (principiante aquí). Gracias
JavaScript
function dance() { document.getElementById("c4").style.boxShadow= "0 4px 8px 0 rgba(218, 51, 119, 0.4), 0 6px 20px 0 rgba(0, 0, 0, 0.19)"; }HTML
<img src="../pics/-vine-3404474.jpg" id="c4"> <div class="flex-nav" id="n1"> <a href="#" style="order:3">2k</a> <a href="#" style="order:2">4k</a> <a href="#" style="order:4">1080p</a> <a href="#C2" style="order:1" onclick="dance()">8k</a> </div>ACTUALIZAR Según su código, he agregado dos funciones. La primera función es sobre el temporizador y la eliminación del elemento. la segunda función es el propio temporizador.
function dance() { const el = document.getElementById("c4"); el.style.boxShadow = "0 4px 8px 0 rgba(218, 51, 119, 0.4), 0 6px 20px 0 rgba(0, 0, 0, 0.19)"; start(el); } function sleep(ms) { return new Promise(resolve => setTimeout(resolve, ms)); } async function start(el) { for (let i = 0; i < 3; i++) { console.log(`Waiting ${i} seconds...`); await sleep(i * 1000); } console.log('Done'); el.style.boxShadow = null; } <img src="https://via.placeholder.com/100" id="c4"> <div class="flex-nav" id="n1"> <a href="#" style="order:3">2k</a> <a href="#" style="order:2">4k</a> <a href="#" style="order:4">1080p</a> <a href="#C2" style="order:1" onclick="dance()">8k</a> </div>ACTUALIZADO
Según los comentarios, agregué una llamada clearTimeout y reemplacé el controlador onclick en línea con una llamada genérica addEventListener como recomendación.
Como sugerencia adicional, también recomendaría que reemplace <div class="flex-nav"> con una etiqueta <nav> y potencialmente <a> con <button> para el marcado semántico.
Se agregaron algunas líneas de CSS y una línea adicional de JavaScript.
Al hacer clic, agregue una clase .highlight con una llamada setTimeout para eliminarla después de un tiempo determinado.
const image = document.getElementById("c4"); let timeoutID; document.querySelectorAll(".flex-nav a").forEach(item => item.addEventListener("click", dance)); function dance() { image.classList.add('highlight'); timeoutID = setTimeout(() => { image.classList.remove('highlight'); clearTimeout(timeoutID); }, 1000) } .highlight { box-shadow: 0 4px 8px 0 rgba(218, 51, 119, 0.4), 0 6px 20px 0 rgba(0, 0, 0, 0.19); animation: dance infinite linear 0.5s; } @keyframes dance { 0% { transform: rotate(5deg); } 25% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } 75% { transform: rotate(-5deg); } 100% { transform: rotate(5deg); } } <img src="https://picsum.photos/400/100" id="c4"> <div class="flex-nav" id="n1"> <a href="#" style="order:3">2k</a> <a href="#" style="order:2">4k</a> <a href="#" style="order:4">1080p</a> <a href="#C2" style="order:1">8k</a> </div> let hide; function highlight(){ clearTimeout(hide); document.getElementById("highlight").classList.add("highlight"); hide= setTimeout(() => document.getElementById("highlight").classList.toggle("highlight"), 3000); } .highlight{ box-shadow: 1px 5px 6px 3px black; } <div id="highlight" onclick="highlight()"> Hello, I am a beginner in web dev.</div>