---
url: 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/elements/countdown-timer'
title: '添加倒计时器 | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T13:50:41+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  实时时钟倒计时到您的活动、截止日期或优惠结束。日期重要、想让访客在到期前行动时使用。

  添加倒计时器
  登录后打开页面：悬停内容区即出现构建器控件。您的第一页介绍基础操作。
tags:
  - 'Data and motion'
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T13:50:41+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 添加倒计时器
      description: |-
        实时时钟倒计时到您的活动、截止日期或优惠结束。日期重要、想让访客在到期前行动时使用。

        添加倒计时器
        登录后打开页面：悬停内容区即出现构建器控件。您的第一页介绍基础操作。
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T13:50:41+0000'
      dateModified: '2026-10-24T13:50:41+0000'
      author:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      mainEntityOfPage: 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/elements/countdown-timer'
      articleSection: 数据与动效
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/elements/countdown-timer'
      description: |-
        实时时钟倒计时到您的活动、截止日期或优惠结束。日期重要、想让访客在到期前行动时使用。

        添加倒计时器
        登录后打开页面：悬停内容区即出现构建器控件。您的第一页介绍基础操作。
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: 首页
            item: 'https://dxpr.com/zh-hans'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: zh-hans
---
[帮助中心](/zh-hans/node/75)/[文档](/zh-hans/hc/documentation) /[学习 DXPR Builder](/zh-hans/hc/documentation/learn-dxpr-builder) /[搭建页面](/zh-hans/hc/documentation/learn-dxpr-builder/build) /[添加内容](/zh-hans/hc/documentation/learn-dxpr-builder/elements) /[数据与动效](/zh-hans/hc/documentation/learn-dxpr-builder/elements/data-and-motion) # 添加倒计时器.

 学习 DXPR Builder搭建页面添加内容数据与动效

   ## 本指南内容

 相关指南

- [在样式面板中改变元素外观](/zh-hans/hc/documentation/learn-dxpr-builder/element-settings/style-tab)

实时时钟倒计时到您的活动、截止日期或优惠结束。日期重要、想让访客在到期前行动时使用。

## 添加倒计时器

登录后打开页面：悬停内容区即出现构建器控件。[您的第一页](/hc/documentation/learn-dxpr-builder/getting-started/first-page)介绍基础操作。

1. 悬停列，点击其控制栏中的 **+**；空白页面请点击 **Add Elements**。打开 **Content** 选项卡并点击 **Countdown timer**。它落在列顶部，设置对话框打开。
2. 选择 **Countdown style**，例如 **3D flip**。
3. 将 **Date / Time Limitations** 保持默认 Specify date only，设置倒计时结束的 **Date**。
4. **Display options** 五个单位默认全勾选。去掉不需要的；这里去掉 **Show remaining years**。
5. 点击对话框中的 **Save**。再点击内容区顶部工具栏中的 **Save** 保存页面。

  ## 您会看到的内容

时钟按您选择的样式和单位倒计时到指定日期。视频中 3D 翻页时钟显示距三个月后某一天的天、小时、分钟和秒。保存并发布页面后访客可见。

## 设置您的倒计时器

悬停元素，在其控制栏打开 **More > Settings**。选项：

- **Countdown style:** 时钟外观：Plain、Grid、3D flip、Disc、Airport style 或 Transparent。
- **Date / Time Limitations:** 时钟计到什么。选择 Specify date only（默认）、Specify date and time、Specify time only（每天重复）或 Resetting counter（间隔最长 24 小时）。
- **Date:** 倒计时结束的日期。在每位访客自己的时区，以该日零点结束。其他模式显示 **Date / Time** 或 **Time**。
- **Reset in hours:** 与 **Reset in minutes** 和 **Reset in seconds** 一起，组成循环计数器的间隔。
- **Page referrer:** 时间到时打开的页面。重复和循环模式下显示。
- **Automatic restart:** 循环计数器到零后重新开始。
- **Display options:** 时钟显示的单位，从 Show remaining years 到 Show remaining seconds。五个默认全勾选。

## 如果看不到它

- **Content 选项卡中没有 Countdown timer。** 您的用户档案隐藏了它。请管理员勾选 **Countdown**（**Elements** 下，[用户档案](/zh-hans/hc/documentation/learn-dxpr-builder/admin/user-profiles-admin)）。
- **重新加载后消失。** 页面未保存。请重新添加并点击内容区顶部工具栏中的 **Save**。
- **所有数字都是零。** 目标日期已过。请悬停元素打开 **More > Settings**，设置未来的 **Date**。
- **没有 Date 字段。** **Date / Time Limitations** 设为其他模式。请选 Specify date only，或填写该模式显示的 **Date / Time** 或 **Time** 字段。
- **时钟每天重新开始。** **Date / Time Limitations** 设为 Specify time only（每天重复）。一次性活动请选择 Specify date only。

## 接下来做什么？

[样式选项卡](/hc/documentation/learn-dxpr-builder/element-settings/style-tab)：改变倒计时器的间距和背景。