에서 영감을 받다....

18054 단어 webdevobjectsjavascripthtml
"전통적인"방식으로 아날로그 시계를 만드는 방법을 보여주는 멋진 게시물 에서 영감을 받아 문서 구성 라이브러리DML 에 얼마나 많은 코딩이 필요한지 궁금했습니다.

원래 HTML 설정은 매우 훌륭하지만 약간 깁니다. 그리고 약간의 휴대성이 부족합니다. 그래서 여기서는 동일한 기능을 제공하는 DML로 클래스를 설정하는 방법을 보여줍니다. 이는 DML의 표준 HTML 요소처럼 사용하거나 최소한의 노력으로 WebComponent로 제공할 수 있습니다.

이것은 myclock.js입니다.

// just a class wrapper for convenience
function myClock(size = 300, attrib) { return new _myClock(size, attrib) }

// the class
class _myClock  {
  constructor(size, attrib) {
    this.size = size
    const cx = size/2, cy = size/2;  // Radius
    const _clockstyle = "width: " + (size) + "px;  height: " + (size) + "px;"
      + "border: 7px solid #282828; background: #585858;"
      + "border-radius: 50%; margin: 50px;"
      + "box-shadow: -4px -4px 10px rgba(67,67,67,0.5), inset 4px 4px 10px rgba(0,0,0,0.5),"
      + "inset -4px -4px 10px rgba(67,67,67,0.5), 4px 4px 10px rgba(0,0,0,0.3);"

    this.base = sidiv("", _clockstyle+attrib)
    let c = this.canvas = canvas2D({ width: px(2 * cx), height: px(2 * cy) })

    c.ctx.lineCap = "round"
    unselectBase()

    // Paint anything radial
    function tick(color, width, angle, length, innerlength = 0) {
      function ls(length) { return length * Math.sin(angle / 180.0 * Math.PI) }
      function lc(length) { return -length * Math.cos(angle / 180.0 * Math.PI) }
      c.setLineType(width, color)
      c.line(cx + ls(innerlength), cy + lc(innerlength), cx + ls(length), cy + lc(length))
    }

    // Draw clock
    function drawClock() {
      c.clear()
      // Draw ticks
      for (let i = 0; i < 360; i += 30)
        if ((i % 90) == 0) tick("#1df52f", 5, i, size*0.45, size*0.40)
        else tick("#bdbdcb", 3, i,  size*0.45, size*0.43)

      // draw hands
      let t = new Date();  // get time
      tick("#61afff", 5, t.getHours() * 30, size*0.25)  // hour
      tick("#71afff", 2, t.getMinutes() * 6, size*0.35)  // min
      tick("#ee791a", 2, t.getSeconds() * 6, size*0.42)  // s

      // drwa center
      c.setFillStyle("#4d4b63")
      c.circle(cx, cy, 10, { fill: true })
    }
    drawClock()
    setInterval(drawClock, 1000)
  }
}


이것은 다양한 크기의 시계를 만들 수 있는 완전한 웹 페이지입니다.

<!DOCTYPE html>
<html lang="de">

<head>
  <meta charset="utf-8">
  <title>title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://efpage.de/DML/DML_homepage/lib/DML-min.js"></script>
  <script src="myclock.js"></script>
</head>

<body>
  <script>  "use strict";
    for (let i = 200; i>30; i*=0.75)
    myClock(i, "background-color: teal; margin: 10px;")
  </script>
</body>

</html>


결과는 다음과 같아야 합니다.

다른 스타일도 추가할 수 있습니다.

  <script>  "use strict";
    let c = ["red", "green", "blue", "yellow", "orange"]
    let k=0
    for (let i = 200; i>30; i*=0.75)
    myClock(i, "background-color: "+c[k++]+"; margin: 10px; border-radius: 25%;")
  </script>




WebComponent 만들기...



보다 전통적인 방법을 좋아한다면 DML 클래스를 웹 구성 요소로 작동하도록 쉽게 변환할 수 있습니다. 실제로 DML에서는 변경 없이 계속 사용할 수 있습니다.

소스에 두 가지 작은 변경 사항만 있으면 됩니다.

a) HTMLElement에서 클래스 파생

class _myClock extends HTMLElement {....


b) 클래스 정의 아래에 HTML-element-definition을 추가합니다.

window.customElements.define('my-clock', _myClock);


이 클래스는 여전히 DML 클래스로 작동하지만 이제 새로운 html 태그로도 사용할 수 있습니다.

<body>
  <my-clock></my-clock>
</body>


클래스는 데모 목적으로 빠르게 변환되었으므로 일부 기능이 부족할 수 있습니다. 그냥, 효과가...
function object 연구의 6 bind example
내가 지난주에 배운:fetch () 개술

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage