Dibujar una escalera con javascript

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.

• Estructuras iterativas de programación.
• Instrucción document.write()

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.

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.

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>

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!