Bento

Bento Timeago

<head>

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>bento-timeago</title>
    <script
      type="module"
      async
      src="https://cdn.ampproject.org/bento.mjs"
    ></script>
    <script nomodule src="https://cdn.ampproject.org/bento.js"></script>
    <script
      type="module"
      async
      src="https://cdn.ampproject.org/v0/bento-timeago-1.0.mjs"
    ></script>
    <script
      nomodule
      async
      src="https://cdn.ampproject.org/v0/bento-timeago-1.0.js"
    ></script>
    <link
      rel="stylesheet"
      type="text/css"
      href="https://cdn.ampproject.org/v0/bento-timeago-1.0.css"
    />
    <style>
      body {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
          Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
          'Segoe UI Symbol';
        margin: 2rem;
        background: #ecf1f3;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100vh;
      }
      bento-timeago {
        font-size: 22px;
      }
      .buttons {
        display: flex;
        flex-direction: column;
      }
      button {
        border: none;
        padding: 1rem 2rem;
        border-radius: 8px;
        color: #269da3;
        background: white;
        font-size: 18px;
        font-weight: bold;
        margin: 0.5rem auto;
        width: 300px;
      }
    </style>
</head>

<body>

    <bento-timeago
      id="my-timeago"
      datetime="2017-04-11T00:37:33.809Z"
      locale="en"
      style="height: 30px; width: 300px; margin: 0 auto"
    >
      Saturday 11 April 2017 00.37
    </bento-timeago>
    <div class="buttons" style="margin-top: 8px">
      <button id="ar-button">Change locale to Arabic</button>
      <button id="en-button">Change locale to English</button>
      <button id="now-button">Change time to now</button>
    </div>
    <script>
      (async () => {
        const timeago = document.querySelector('#my-timeago');
        await customElements.whenDefined('bento-timeago');
        // set up button actions
        document.querySelector('#ar-button').onclick = () =>
          timeago.setAttribute('locale', 'ar');
        document.querySelector('#en-button').onclick = () =>
          timeago.setAttribute('locale', 'en');
        document.querySelector('#now-button').onclick = () =>
          timeago.setAttribute('datetime', 'now');
      })();
    </script>
</body>

根据指定日期和时间进行倒计时或正计时。它会用自然语言时间戳替换文本节点，例如“30 年后”或“3 小时前”。

将 bento-timeago 用作 Web 组件或 React 函数组件

↓ Web 组件 ↓ React / Preact

Web 组件

在添加自定义样式之前，必须包含每个 Bento 组件所需的 CSS 库，以确保正确加载。或者使用内联的轻量级预升级样式。请参阅 布局和样式。

通过 npm 导入

npm install @bentoproject/timeago
import {defineElement as defineBentoTimeago} from '@bentoproject/timeago';
defineBentoTimeago();

通过 <script> 包含

<script
  type="module"
  async
  src="https://cdn.ampproject.org/bento.mjs"
></script>
<script nomodule src="https://cdn.ampproject.org/bento.js"></script>
<script
  type="module"
  async
  src="https://cdn.ampproject.org/v0/bento-timeago-1.0.mjs"
></script>
<script
  nomodule
  async
  src="https://cdn.ampproject.org/v0/bento-timeago-1.0.js"
></script>
<link
  rel="stylesheet"
  type="text/css"
  href="https://cdn.ampproject.org/v0/bento-timeago-1.0.css"
/>

示例

<head>

<script
      type="module"
      async
      src="https://cdn.ampproject.org/bento.mjs"
    ></script>
    <script nomodule src="https://cdn.ampproject.org/bento.js"></script>
    <script
      type="module"
      async
      src="https://cdn.ampproject.org/v0/bento-timeago-1.0.mjs"
    ></script>
    <script
      nomodule
      async
      src="https://cdn.ampproject.org/v0/bento-timeago-1.0.js"
    ></script>
    <link
      rel="stylesheet"
      type="text/css"
      href="https://cdn.ampproject.org/v0/bento-timeago-1.0.css"
    />
</head>

<body>

<bento-timeago
      id="my-timeago"
      datetime="2017-04-11T00:37:33.809Z"
      locale="en"
      style="height: 30px"
    >
      Saturday 11 April 2017 00.37
    </bento-timeago>
    <div class="buttons" style="margin-top: 8px">
      <button id="ar-button">Change locale to Arabic</button>
      <button id="en-button">Change locale to English</button>
      <button id="now-button">Change time to now</button>
    </div>

    <script>
      (async () => {
        const timeago = document.querySelector('#my-timeago');
        await customElements.whenDefined('bento-timeago');

        // set up button actions
        document.querySelector('#ar-button').onclick = () =>
          timeago.setAttribute('locale', 'ar');
        document.querySelector('#en-button').onclick = () =>
          timeago.setAttribute('locale', 'en');
        document.querySelector('#now-button').onclick = () =>
          timeago.setAttribute('datetime', 'now');
      })();
    </script>
</body>

布局和样式

每个 Bento 组件都有一个小型 CSS 库，必须包含该库才能在没有 内容偏移 的情况下确保正确加载。由于基于顺序的特异性，必须手动确保在任何自定义样式之前包含样式表。

<link
  rel="stylesheet"
  type="text/css"
  href="https://cdn.ampproject.org/v0/bento-timeago-1.0.css"
/>

或者，你还可以使轻量级的预升级样式内联可用

<style>
  bento-timeago {
    display: block;
    overflow: hidden;
    position: relative;
  }
</style>

属性

datetime

必需的 datetime 属性设置日期和时间。该值必须是 ISO 日期时间。

  • 以 UTC（协调世界时）表示时间：2017-03-10T01:00:00Z
  • 以带有时区偏移量的本地时间表示：2017-03-09T20:00:00-05:00

locale（可选）

添加 locale 属性以指定以下值之一来更改区域设置。默认值为 en。

  • ar（阿拉伯语）
  • be（白俄罗斯语）
  • bg（保加利亚语）
  • bn-IN（孟加拉语）
  • ca（加泰罗尼亚语）
  • cs（捷克语）
  • da（丹麦语）
  • de（德语）
  • el（希腊语）
  • en（英语）
  • en-short（英语 - 简短）
  • es（西班牙语）
  • eu（巴斯克语）
  • fa（波斯语 - 帕西语）
  • fi（芬兰语）
  • fr（法语）
  • gl（加利西亚语）
  • he（希伯来语）
  • hi-IN（印地语）
  • hu（匈牙利语）
  • id-ID（马来语）
  • it（意大利语）
  • ja（日语）
  • ka（格鲁吉亚语）
  • ko（韩语）
  • ml（马拉雅拉姆语）
  • my（缅甸语 - 缅甸语）
  • nb-NO（挪威语博克马尔语）
  • nl（荷兰语）
  • nn-NO（挪威语尼诺斯克语）
  • pl（波兰语）
  • pt-BR（葡萄牙语）
  • ro（罗马尼亚语）
  • ru（俄语）
  • sq（阿尔巴尼亚语）
  • sr（塞尔维亚语）
  • sv（瑞典语）
  • ta（泰米尔语）
  • th（泰语）
  • tr（土耳其语）
  • uk（乌克兰语）
  • vi（越南语）
  • zh-CN（中文）
  • zh-TW（台湾话）

cutoff

添加 cutoff 属性以在超过指定日期（以秒为单位）后显示 datatime 属性中指定日期。

API 示例

通过以编程方式更改属性值，你可以动态更改文本或区域设置

<head>

<script
      type="module"
      async
      src="https://cdn.ampproject.org/bento.mjs"
    ></script>
    <script nomodule src="https://cdn.ampproject.org/bento.js"></script>
    <script
      type="module"
      async
      src="https://cdn.ampproject.org/v0/bento-timeago-1.0.mjs"
    ></script>
    <script
      nomodule
      async
      src="https://cdn.ampproject.org/v0/bento-timeago-1.0.js"
    ></script>
    <link
      rel="stylesheet"
      type="text/css"
      href="https://cdn.ampproject.org/v0/bento-timeago-1.0.css"
    />
</head>

<body>

<bento-timeago
      id="my-timeago"
      datetime="2017-04-11T00:37:33.809Z"
      locale="en"
      style="height: 30px"
    >
      Saturday 11 April 2017 00.37
    </bento-timeago>
    <div class="buttons" style="margin-top: 8px">
      <button id="ar-button">Change locale to Arabic</button>
      <button id="en-button">Change locale to English</button>
      <button id="now-button">Change time to now</button>
    </div>

    <script>
      (async () => {
        const timeago = document.querySelector('#my-timeago');

        // set up button actions
        document.querySelector('#ar-button').onclick = () =>
          timeago.setAttribute('locale', 'ar');
        document.querySelector('#en-button').onclick = () =>
          timeago.setAttribute('locale', 'en');
        document.querySelector('#now-button').onclick = () =>
          timeago.setAttribute('datetime', 'now');
      })();
    </script>
</body>

Preact/React 组件

通过 npm 导入

npm install @bentoproject/timeago
import React from 'react';
import {BentoTimeago} from '@bentoproject/timeago/react';
import '@bentoproject/timeago/styles.css';

function App() {
  return (
    <BentoTimeago
      datetime={dateTime}
      locale={locale}
      cutoff={cutoff}
      placeholder={placeholder}
    />
  );
}

布局和样式

Bento Date Display Preact/React 组件允许使用者呈现自己的模板。这些模板可以使用内联样式、<style> 标签、导入其自己样式表的 Preact/React 组件。

属性

datetime

必需的 datetime 属性设置日期和时间。该值必须是 ISO 日期时间。

  • 以 UTC（协调世界时）表示时间：2017-03-10T01:00:00Z
  • 以带有时区偏移量的本地时间表示：2017-03-09T20:00:00-05:00

locale（可选）

添加 locale 属性以指定以下值之一来更改区域设置。默认值为 en。

  • ar（阿拉伯语）
  • be（白俄罗斯语）
  • bg（保加利亚语）
  • bn-IN（孟加拉语）
  • ca（加泰罗尼亚语）
  • cs（捷克语）
  • da（丹麦语）
  • de（德语）
  • el（希腊语）
  • en（英语）
  • en-short（英语 - 简短）
  • es（西班牙语）
  • eu（巴斯克语）
  • fa（波斯语 - 帕西语）
  • fi（芬兰语）
  • fr（法语）
  • gl（加利西亚语）
  • he（希伯来语）
  • hi-IN（印地语）
  • hu（匈牙利语）
  • id-ID（马来语）
  • it（意大利语）
  • ja（日语）
  • ka（格鲁吉亚语）
  • ko（韩语）
  • ml（马拉雅拉姆语）
  • my（缅甸语 - 缅甸语）
  • nb-NO（挪威语博克马尔语）
  • nl（荷兰语）
  • nn-NO（挪威语尼诺斯克语）
  • pl（波兰语）
  • pt-BR（葡萄牙语）
  • ro（罗马尼亚语）
  • ru（俄语）
  • sq（阿尔巴尼亚语）
  • sr（塞尔维亚语）
  • sv（瑞典语）
  • ta（泰米尔语）
  • th（泰语）
  • tr（土耳其语）
  • uk（乌克兰语）
  • vi（越南语）
  • zh-CN（中文）
  • zh-TW（台湾话）

cutoff

添加 cutoff 属性，以便在指定日期（以秒为单位）过去后显示 datetime 属性中指定日期。

占位符

添加 placeholder 属性，以便显示备用文本。计算出的时间戳准备就绪后，将替换占位符文本。

我们在本网站上使用 Cookie 来分析流量并优化您的体验。
更多详情