Creé un bucle simple que llena la pantalla con emojis. Esto funcionó bien, sin embargo, traté de agregar un pequeño retraso antes de mostrar cada emoji subsiguiente y después del retraso inicial hay un comportamiento extraño donde todo lo que está arriba de la etiqueta de apertura <body> se reemplaza con lo siguiente:
<html> <head></head> <body> <div style="left: 25px; top: 5px;">🤠</div> <div style="left: 45px; top: 5px;">🤠</div> ...etc Antes de esto, tengo estilos, título, etiquetas meta, la etiqueta inicial <!DOCTYPE html> , etc. El código que estoy usando es:
<!DOCTYPE html> <html lang="en"> <head> ... etc ... </head> <body> <script> function delay(ms) { return new Promise(resolve => setTimeout(resolve, ms)); } async function load() { // Below snippet works standalone, as intended, without "await delay(1000);" for (let y = 5; y < screen.height - 20; y = y + 20) { for (let i = 5; i < screen.width - 20; i = i + 20) { document.writeln('<div style="left: ' + i + 'px; top: ' + y + 'px;">🤠</div>'); await delay(1000); // Code gets replaced after this line runs the first time. } } // End snippet } load(); </script> </body>Estoy haciendo esto como un ejercicio para aprender JavaScript, por lo que probablemente hay algo obvio que estoy haciendo mal, sin embargo, no pude encontrar ningún resultado para reemplazar la información del encabezado.
Gracias por tomarse el tiempo de leer hasta aquí.