En esta lección se presentan ejemplos de adornos en una página web.

A. Adorno horizontal

Salida


1	<!DOCTYPE html>
2	<html lang="es">
3
4	<head>
5	<meta charset="UTF-8">
6	<meta name="viewport"
7	content="width=device-width">
8	<title>Adorno Horizontal</title>
9	<style>
10	.sprite {
11	position: fixed;
12	}
13	</style>
14	</head>
15
16	<body>
17	<h1>Adorno Horizontal</h1>
18	<script>
19	const Y = 0
20	const DISTANCIA = 20
21	const X_MÁXIMA = innerWidth
22	let x = 0
23	/**
24	* En esta variable se agrega el
25	* HTML de las figuras que forman
26	* el adorno.
27	*/
28	let inner = ""
29	while (x < X_MÁXIMA) {
30	/* Agrega el HTML de un emoji a
31	* inner. */
32	inner += /* html */
33	`<div class="sprite"
34	style="top: ${Y}px;
35	left: ${x}px;">
36	💕
37	</div>`
38	x += DISTANCIA
39	}
40	/* Agrega las figuras al HTML de
41	* body. */
42	document.body.innerHTML += inner
43	</script>
44	</body>
45
46	</html>


1	<!DOCTYPE html>
2	<html lang="es">
3
4	<head>
5	<meta charset="UTF-8">
6	<meta name="viewport"
7	content="width=device-width">
8	<title>Adorno con Giro</title>
9	<style>
10	.sprite {
11	position: fixed;
12	}
13	</style>
14	</head>
15
16	<body>
17	<h1>Adorno con Giro</h1>
18	<script>
19	const INCREMENTO =
20	2 * Math.PI / 21
21	const X_BASE = innerWidth / 2
22	const Y_BASE = innerHeight / 2
23	const ANGULO_FINAL = 6 * Math.PI
24	const amplitud = Math.min(
25	window.innerHeight,
26	window.innerWidth) /
27	(3 * ANGULO_FINAL)
28	let inner = ""
29	for (let angulo = 0
30	; angulo < ANGULO_FINAL
31	; angulo += INCREMENTO) {
32	const r = amplitud * angulo
33	const x =
34	X_BASE + r * Math.cos(angulo)
35	const y =
36	Y_BASE + r * Math.sin(angulo)
37	inner += /* html */
38	`<div class="sprite"
39	style="bottom: ${y}px;
40	left: ${x}px;">
41	⌛
42	</div>`
43	}
44	document.body.innerHTML += inner
45	</script>
46	</body>
47
48	</html>