Dibujar una escalera con javascript

0
(0)

Publicado

Aviso importante web en obras

Es posible que el contenido que estás visualizando tenga un formato un poco raro o que se haya perdido algún contenido. Esto se debe a que en 2023/09 decidí renovar la página y con más de 1000 escritos el trabajo de irlos revisando uno por uno es agotador. Poco a poco iré corrigiendo todos los contenidos. ¡Gracias por la comprensión!

Dibujar una escalera con javascript 1

En este ejercicio vamos a combinar css y javascript de un modo divertido.

A pesar de que escribiremos la página web con javascript es verdad que algunos estilos deberán ser declarados de inicio.

Las siguientes entradas te pueden ser de utilidad.

Existen muchas formas de solucionar el ejercicio. Sin embargo en este caso el ejercicio está orientado a nivel principiante de alguien que justo está empezando a aprender.

¡Vayamos al ejercicio!

Vamos a repasarlo mediante un ejercicio.

Enunciado

Se desea escribir en un documento web una escalera de color #cccccc; como el indicado en la imagen.

Utiliza la instrucción document.write( ) para ello.
Dibujar una escalera con javascript 2

Solución del ejercicio

La solución pasa por saber escribir el primer peldaño.

document.write('<div style="width:'+50*i+'px"></div>');

Una vez escribimos el primer peldaño los siguientes se pueden dibujar iterativamente.

La etiqueta elegida es un div cuyo background-color es #cccccc;

Se usan los siguientes estilos:

<style>
div{
	display:block;
	height:50px;
	background-color:#ccc;
}
</style>

[vc_custom_heading text=»¿Como queda el documento js?» font_container=»tag:h3|text_align:left» use_theme_fonts=»yes»]

for(i=1;i<=10;i++){
	document.write('<div style="width:'+50*i+'px"></div>');
};

Como observación al salir del for el valor de i es 11.¡Hola!

Querido lector,

¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *