J. Usa custom element

Salida

Ábrelo en otra pestaña.

Revísalo en gilpgedit.

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>Custom Elements</title>
9 <style>
10 figura-web {
11 position: fixed;
12 font-size: 60px;
13 }
14 </style>
15 <script>
16 class FiguraWeb
17 extends HTMLElement {
18 connectedCallback() {
19 this.x = 0
20 const attrY =
21 this.getAttribute("y")
22 const attrVel =
23 this.getAttribute("velocidad")
24 this.y = parseInt(attrY, 10)
25 this.velocidad =
26 parseInt(attrVel, 10)
27 }
28 muevete() {
29 this.style.right =
30 `${this.x}px`
31 this.style.top = `${this.y}px`
32 this.x =
33 (this.x + this.velocidad) %
34 innerWidth
35 }
36 }
37 customElements.define(
38 "figura-web", FiguraWeb)
39 </script>
40</head>
41
42<body>
43 <h1>Custom Elements</h1>
44 <figura-web id="fantasma"
45 y="0" velocidad="20">
46 👻
47 </figura-web>
48 <figura-web id="sonrisa"
49 y="100" velocidad="10">
50 😁
51 </figura-web>
52 <script>
53 setInterval(anima, 120)
54
55 function anima() {
56 fantasma.muevete()
57 sonrisa.muevete()
58 }
59 </script>
60</body>
61
62</html>
skip_previous skip_next