vue-clock/vue-cloc.mjs

一个简单的时钟组件

import { defineComponent as H, ref as _, onMounted as S, openBlock as B, createElementBlock as D, createStaticVNode as I } from "vue";
const P = { class: "clock" }, q = /* @__PURE__ */ I('<div class="outer-clock-face" data-v-87570781><div class="marking marking-one" data-v-87570781></div><div class="marking marking-two" data-v-87570781></div><div class="marking marking-three" data-v-87570781></div><div class="marking marking-four" data-v-87570781></div><div class="inner-clock-face" data-v-87570781><div class="hand hour-hand" data-v-87570781></div><div class="hand min-hand" data-v-87570781></div><div class="hand second-hand" data-v-87570781></div></div></div>', 1), W = [
  q
], z = {
  name: "Clock"
}, A = /* @__PURE__ */ H({
  ...z,
  setup(c) {
    const l = _(), h = _(), p = _(), y = () => {
      let i = [], s = !1, g, o = 0, r, u, d, v, a;
      const x = ["#F73859", "#14FFEC", "#00E0FF", "#FF99FE", "#FAF15D"], n = document.createElement("canvas");
      document.body.appendChild(n), n.setAttribute(
        "style",
        "width: 100%; height: 100%; top: 0; left: 0; z-index: 99999; position: fixed; pointer-events: none;"
      );
      const w = document.createElement("span");
      w.classList.add("pointer"), document.body.appendChild(w), n.getContext && window.addEventListener ? (a = n.getContext("2d"), k(), window.addEventListener("resize", k, !1), E(), window.addEventListener(
        "mousedown",
        function(t) {
          M(m(10, 20), t.clientX, t.clientY), document.body.classList.add("is-pressed"), g = setTimeout(function() {
            document.body.classList.add("is-longpress"), s = !0;
          }, 500);
        },
        !1
      ), window.addEventListener(
        "mouseup",
        function(t) {
          clearInterval(g), s == !0 && (document.body.classList.remove("is-longpress"), M(
            m(
              50 + Math.ceil(o),
              100 + Math.ceil(o)
            ),
            t.clientX,
            t.clientY
          ), s = !1), document.body.classList.remove("is-pressed");
        },
        !1
      ), window.addEventListener(
        "mousemove",
        function(t) {
          let e = t.clientX, f = t.clientY;
          w.style.top = f + "px", w.style.left = e + "px";
        },
        !1
      )) : console.log("canvas or addEventListener is unsupported!");
      function k() {
        n.width = window.innerWidth * 2, n.height = window.innerHeight * 2, n.style.width = window.innerWidth + "px", n.style.height = window.innerHeight + "px", a.scale(2, 2), r = n.width = window.innerWidth, u = n.height = window.innerHeight, d = {
          x: r / 2,
          y: u / 2
        }, v = {
          x: r / 2,
          y: u / 2
        };
      }
      class L {
        constructor(e = d.x, f = d.y) {
          this.x = e, this.y = f, this.angle = Math.PI * 2 * Math.random(), s == !0 ? this.multiplier = m(14 + o, 15 + o) : this.multiplier = m(6, 12), this.vx = (this.multiplier + Math.random() * 0.5) * Math.cos(this.angle), this.vy = (this.multiplier + Math.random() * 0.5) * Math.sin(this.angle), this.r = m(8, 12) + 3 * Math.random(), this.color = x[Math.floor(Math.random() * x.length)];
        }
        update() {
          this.x += this.vx - v.x, this.y += this.vy - v.y, v.x = -2 / window.innerWidth * Math.sin(this.angle), v.y = -2 / window.innerHeight * Math.cos(this.angle), this.r -= 0.3, this.vx *= 0.9, this.vy *= 0.9;
        }
      }
      function M(t = 1, e = d.x, f = d.y) {
        for (let b = 0; b < t; b++)
          i.push(new L(e, f));
      }
      function m(t, e) {
        return Math.floor(Math.random() * e) + t;
      }
      function E() {
        a.fillStyle = "rgba(255, 255, 255, 0)", a.clearRect(0, 0, n.width, n.height);
        for (let t = 0; t < i.length; t++) {
          let e = i[t];
          e.r < 0 || (a.fillStyle = e.color, a.beginPath(), a.arc(e.x, e.y, e.r, 0, Math.PI * 2, !1), a.fill(), e.update());
        }
        s == !0 ? o += 0.2 : !s && o >= 0 && (o -= 0.4), C(), requestAnimationFrame(E);
      }
      function C() {
        for (let t = 0; t < i.length; t++) {
          let e = i[t];
          (e.x + e.r < 0 || e.x - e.r > r || e.y + e.r < 0 || e.y - e.r > u || e.r < 0) && i.splice(t, 1);
        }
      }
    };
    return S(() => {
      l.value = document.querySelector(".second-hand"), h.value = document.querySelector(".min-hand"), p.value = document.querySelector(".hour-hand"), setInterval(() => {
        const i = new Date(), s = i.getSeconds(), g = s / 60 * 360 + 90;
        l.value.style.transform = `rotate(${g}deg)`;
        const o = i.getMinutes(), r = o / 60 * 360 + s / 60 * 6 + 90;
        h.value.style.transform = `rotate(${r}deg)`;
        const d = i.getHours() / 12 * 360 + o / 60 * 30 + 90;
        p.value.style.transform = `rotate(${d}deg)`;
      }, 1e3), y();
    }), (i, s) => (B(), D("div", P, W));
  }
});
const X = (c, l) => {
  const h = c.__vccOpts || c;
  for (const [p, y] of l)
    h[p] = y;
  return h;
}, F = /* @__PURE__ */ X(A, [["__scopeId", "data-v-87570781"]]), Y = [F], V = {
  install(c) {
    Y.forEach((l) => {
      c.component(l.name, F);
    });
  }
};
export {
  F as Clock,
  V as default
};