• 主頁
  • 文章
  • SEO
  • 2022 年免費使用的 3 個最佳計數計時器小部件

2022 年免費使用的 3 個最佳計數計時器小部件

已發表: 2022-04-17

令人驚訝的是，小事情會產生巨大的影響。 如果您想強調特定事件的可靠性或展示時間，最好的方法是在您的網站上顯示一個倒計時。

就像倒數計時器一樣，倒數計時器在很多情況下也很有幫助。 常見的用途是展示日期和時間的時間。 許多企業使用計數小部件作為社交證明。

最佳免費計數時鍾小部件，可在您的網站上顯示持續時間

電源

power-count-up-timer-editor

Powr 是一項在線服務，可為網站提供 50 多個小部件。 社交訂閱源、常見問題解答、聯繫表格和彈出窗口、電子郵件倒計時是其中的一部分。

它的網站倒數計時器配備了許多功能。 其中之一是能夠根據日期計算時間並將其顯示為倒數計時器。

Powr 的網站倒計時計時器不僅是最易於使用的網絡倒計時時鍾小部件之一，而且也是最複雜的小部件之一。

原因如下：

  • 可定制– Powr 的倒計時計時器插件可讓您更改顏色、字體、邊框、背景等，以與您的展示位置和品牌調色板產生共鳴。
  • 實時編輯- 所見即所得編輯器可讓您有效地調整在線倒計時時鐘的外觀。 無需再在實時預覽和編輯模式之間來回切換！
  • 倒計時或倒計時- 倒計時以產生緊迫感或從數字向上計數以獲得出色的社會證明。 非常適合產品發布（和啟動頂起活動）、新版本和贈品活動。
  • 本地化- 您想用當地語言翻譯計時器詳細信息嗎？ 沒問題。
  • 移動響應- 您的動畫計時器在桌面和移動設備上看起來都很漂亮。
  • 計數期間和計數後的消息 - 在計數期間和計數達到 0 時顯示不同的消息，以便您的訪問者知道銷售或活動已經結束。
  • 云同步– Powr 計時器插件的最佳功能之一是它是云同步的。 這意味著您可以再次重新編輯計時器，並在您的銷售渠道、贈品頁面、單獨的廣告活動、網站和任何地方都可以使用的工具中使用計時器！
  • 現場編輯– 與其他工具不同，Powr 可讓您從您的站點無縫自定義小部件。 為此，您必須登錄到您的帳戶。 有關示例，請參見下面演示的後面部分。

網站計數小部件

Powr 的倒計時計時器配備了許多自定義選項。 這是一個關於如何創建免費倒計時的簡短視頻。

Powr 提供以下選項：

  • 七種計時器類型- 倒計時到日期、倒計時時間、每位訪客倒計時時間、每位訪客倒計時人數、倒計時人數、每位訪客倒計時人數和從日期倒計時
  • 啟用/禁用標籤外觀和更改標籤名稱
  • 設置小部件的位置- 固定（在屏幕頂部或底部顯示通知欄）和默認（將代碼放置在您想要將計時器顯示為內聯小部件的位置）
  • 從小部件到頁面的鏈接計數
  • 添加 CTA 按鈕
  • 收款
  • 設置倒計時動畫
  • 更改計數時鐘和文本的字體系列、大小和顏色
  • 添加自定義 CSS 和 JavaScript 代碼

Powr 獲取您計算機上的本地時間並將其用作計數小部件的時間。 因此，您可能希望將時間轉換為正確的時區。

HTML網站倒計時代碼

單擊標題右上角的發布按鈕。 您將看到類似於下面給定屏幕截圖的頁面。

安裝-powr-網站-倒計時代碼
安裝選項

複製代碼並將其粘貼到登錄頁面構建器的 HTML 編輯器中。 最好的部分是 Powr 倒數計時器沒有限制在視圖中，也沒有限制您可以使用它的位置。 這意味著您可以在任何地方無限次使用 Powr 倒數計時器！

以下是 Powr 網站計數計時器的示例：

那麼，定價呢？

功率計計時器定價

power-countdown-timer-plugin-定價

Powr 的網站倒數計時器終身免費！ 如果您升級到商業計劃，您可以訪問 50 多個其他應用程序，例如電子郵件倒計時計時器、假期倒計時小工具、社交訂閱源、評論和評論。

單擊此處免費獲取 Powr 計數應用程序。

計價器

tickcounter-countup-clock-editor

TickCounter 是具有多語言和時區支持的在線倒計時小部件創建器。

特徵：

  • 無限計數器
  • 可視化編輯器
  • 從過去的十年開始數
  • 使用首選時區
  • 添加或刪除您需要的時間單位，包括年、周和月等項目
  • 使用 50 多種支持的語言本地化計時器小部件
  • SSL 加密
  • 獨特的網絡計數計時器頁面（參見此處的示例）
  • 易於集成


這是 Tickcounter 計時器的實時版本，顯示從特定時間經過的時間：

我的計數 upCountup

免費計劃每月提供多達 100,000 次查看，唯一的付費計劃是標準，每月收費 10 美元，它帶有 1,000,000 次櫃檯查看和更多功能，例如從可嵌入的計數小部件中刪除 Tickcounter 品牌。

日期小部件的 HTML 計數

如果您想開發自己的倒數計時器，請使用以下腳本。 它是使用純 JavaScript、CSS 和 HTML 製作的。 沒有使用 JQuery，時鐘是高度可定制的。

在您的網站或登錄頁面的頭部 ( <head> ) 部分插入以下 CSS 樣式代碼。 

 <style> .countup { text-align: center; margin-bottom: 20px; font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; } .countup .pitiyacountup { display: inline-block; padding: 10px; background: #151515; margin: 0; color: white; min-width: 2.6rem; margin-left: 13px; border-radius: 10px 0 0 10px; } .countup span[class*="timeRef"] { border-radius: 0 10px 10px 0; margin-left: 0; background: #ffc72e; color: black; } </style>

複製並粘貼結束正文標記 ( </body> ) 正上方的 JavaScript 代碼。 

 <script> /* Count Up from Date and Time Author: @thepitiya / https://wwww.pitiya.com/website-count-up-timer-widgets.html */ window.onload = function () { var g = document.getElementById('countuptimer'); g.setAttribute("class", "countup"); var e = '<span class="pitiyacountup days">00</span><span class="pitiyacountup timeRefDays">days</span><span class="pitiyacountup hours">00</span><span class="pitiyacountup timeRefHours">hours</span><span class="pitiyacountup minutes">00</span><span class="pitiyacountup timeRefMinutes">minutes</span><span class="pitiyacountup seconds">00</span><span class="pitiyacountup timeRefSeconds">seconds</span>'; g.insertAdjacentHTML('afterbegin', e); var t = g.dataset.countup; countUpFromTime(t, 'countuptimer'); }; function countUpFromTime(countFrom, id) { countFrom = new Date(countFrom).getTime(); var now = new Date(), countFrom = new Date(countFrom), timeDifference = (now - countFrom); var secondsInADay = 60 * 60 * 1000 * 24, secondsInAHour = 60 * 60 * 1000; days = Math.floor(timeDifference / (secondsInADay) * 1); hours = Math.floor((timeDifference % (secondsInADay)) / (secondsInAHour) * 1); mins = Math.floor(((timeDifference % (secondsInADay)) % (secondsInAHour)) / (60 * 1000) * 1); secs = Math.floor((((timeDifference % (secondsInADay)) % (secondsInAHour)) % (60 * 1000)) / 1000 * 1); var idEl = document.getElementById(id); idEl.getElementsByClassName('days')[0].innerHTML = days; idEl.getElementsByClassName('hours')[0].innerHTML = hours; idEl.getElementsByClassName('minutes')[0].innerHTML = mins; idEl.getElementsByClassName('seconds')[0].innerHTML = secs; clearTimeout(countUpFromTime.interval); countUpFromTime.interval = setTimeout(function () { countUpFromTime(countFrom, id); }, 1000); } </script>

最後，將 HTML 代碼粘貼到要嵌入倒計時小部件的位置。 

 <div data-countup="Jan 1, 2022 12:00:00"></div>

從上面的 HTML 代碼的日期更改計數。 格式應為：月日，年時：分：秒

示例：從 1776 年 7 月 4 日 12:00:00 開始計數

使用 CSS 更改計數時鐘的外觀，並使用 <a> 元素使時鐘“可點擊”。 請參見下面的示例代碼： 

 <a href="https://www.pitiya.com/" target="_blank"> <div data-countup="Jan 1, 2022 12:00:00"></div> </a>

相關：如何在電子郵件中添加可點擊的倒數計時器（純 HTML。無 JS、CSS）

最佳網站上的最後一句話計數計時器

就像您在網站的必要部分（如結帳頁面）使用倒計時一樣，倒計時在許多場合都很有幫助，例如展示當前時間與峰會、網絡研討會、Zoom 會議、在線比賽等封閉活動之間的持續時間， ETC。，

像往常一樣，不要過度使用它們，因為它們會削弱對您品牌的信任。