时间戳

首页 > 解决方案 > Wix上的教会在线平台倒数计时器

javascript - Wix上的教会在线平台倒数计时器

问题描述

在我的 WIX 网站 (camnaz.org) 上使用倒数计时器 javascript 时遇到问题。它应该从教堂在线平台提取数据。我们在教会在线平台上的服务是 camnaz.online.church。我已将所有代码插入 WIX，并尝试在 WIX masterpage.js 和页面的 javascript 上运行 javascript。

我认为这是一个 lib 文档错误。我的调试器说“找不到名称'document'。您需要更改目标库吗？尝试更改lib编译器选项以包含'dom'。”

请帮忙！！

import "public/styles.css";
import "public/package.json"

const CURRENT_SERVICE_QUERY = `
query CurrentService {
  currentService(onEmpty: LOAD_NEXT) {
    id
    startTime
    endTime
    content {
      title
    }
  }
}
`;

async function startCountdown() {
  // Fetch the current or next service data
  const service = await fetch("https://camnaz.online.church/graphql", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      Accept: "application/json"
    },
    body: JSON.stringify({
      query: CURRENT_SERVICE_QUERY,
      operationName: "CurrentService"
    })
  })
    .then((response) => response.json())
    .catch((error) => console.error(error));

  // If no service was returned from the API, don't display the countdown
  if (!service.data.currentService || !service.data.currentService.id) {
    return;
  }

  // Set the service title
  document.getElementById("serviceTitle").innerText =
    service.data.currentService.content.title;

  // Set the date we're counting down to
  const startTime = new Date(service.data.currentService.startTime).getTime();
  const endTime = new Date(service.data.currentService.endTime).getTime();

  // Create a one second interval to tick down to the startTime
  const intervalId = setInterval(function () {
    const now = new Date().getTime();

    // If we are between the start and end time, the service is live
    if (now >= startTime && now <= endTime) {
      clearInterval(intervalId);
      document.getElementById("countdown").innerHTML = "Live";
      return;
    }

    // Find the difference between now and the start time
    const difference = startTime - now;

    // Time calculations for days, hours, minutes and seconds
    const days = Math.floor(difference / (1000 * 60 * 60 * 24));
    const hours = Math.floor(
      (difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
    );
    const minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
    const seconds = Math.floor((difference % (1000 * 60)) / 1000);

    // Display the results in the element with id="countdown"
    document.getElementById("countdown").innerHTML =
      days + "d " + hours + "h " + minutes + "m " + seconds + "s ";

    // If we are past the end time, clear the countdown
    if (difference < 0) {
      clearInterval(intervalId);
      document.getElementById("countdown").innerHTML = "";
      return;
    }
  }, 1000);
}

startCountdown();
body {
  font-family: sans-serif;
}
<!DOCTYPE html>
<html>
  <head>
    <title>Countdown Example</title>
    <meta charset="Avenir" />
  </head>

  <body>
    NEXT ONLINE SERVICE:
    <div id="countdown"></div>
    <p id="serviceTitle"></p>

    <script src="src/CHOP.js"></script>
  </body>
</html>

标签： javascriptvelo

解决方案

documentWix Velo 不支持，因为您无权访问 DOM，您需要使用$w 函数。

例如，如果我在页面上有一个带有 id的文本元素text1，并且我想将文本设置为，356我将执行以下操作：

$w("#text1").text = '356';

或者

const value = '356';
$w("#text1").text = value;

另外，我不确定你想用这些做什么：

import "public/styles.css";
import "public/package.json"

您不能在 Wix 站点上使用 CSS。通过文本元素的.html属性和一些其他元素的.style只能有限使用。

此外，您不能在 Wix 上插入 HTML 标签。HTML 代码必须嵌入到HTML 组件中。阅读API 参考以了解更多关于 Wix Velo 的信息，因为它不同于传统的 HTML、CSS、JS 用法。

推荐阅读