Creating a Stunning Countdown Timer and Real‑Time Interactive Mini‑Program for Massive Online Events

Background : Due to the pandemic, the 2020 Tencent Games Annual Conference moved online, shifting from a B2B offline model to a consumer‑focused (toC) live broadcast. The event spanned 42 days, required rich interactive mini‑programs across PC, mobile web, and WeChat mini‑program platforms.

1. Implementing a Cool Countdown Effect

The design team created a countdown page displaying the event date and the new slogan "Spark More". To render the clock, CSS3 conic-gradient was chosen for its ability to draw sector shapes representing hour, minute, and second hands.

Visual principle : The hour/minute hand forms one sector, the second hand forms another; each sector rotates according to real time.

Technical implementation : Two full‑screen div elements overlap, each filled with a conic-gradient. The top layer draws the second‑hand sector, the bottom layer draws the hour/minute sector. Transparent regions are created with rgba(0,0,0,0) to achieve a "hole" effect.

<!-- Draw second‑hand sector -->
<div style="width:100%;height:100%;background:conic-gradient(from 0deg at 50% 50%, #F1977D, #FA466D 100deg, #000000 100deg, #000000 360deg);"></div>

<!-- Rotate to start position -->
<div style="width:100%;height:100%;background:conic-gradient(from 340deg at 50% 50%, #F1977D, #FA466D 100deg, #000000 100deg, #000000 360deg);"></div>

<!-- Transparent outer area -->
<div style="width:100%;height:100%;background:conic-gradient(from 340deg at 50% 50%, #F1977D, #FA466D 100deg, rgba(0,0,0,0) 100deg, rgba(0,0,0,0) 360deg);"></div>

For browsers that do not support conic-gradient, a static fallback image is used.

2. Efficient Multi‑Platform Development

To handle the massive amount of content and frequent module updates, the team adopted a component‑based architecture. Each functional module (e.g., agenda, game pages, lottery) is encapsulated as a reusable component, allowing independent development and easy merging across the three platforms.

Configuration files (JSON) store content such as agenda data, activity rules, and partner logos. Updating a single JSON file propagates changes to PC, mobile web, and mini‑program simultaneously, reducing manual effort and avoiding repeated approval cycles.

<agenda chapter_id="{{adminData.chapter_id}}" product_id="{{adminData.product_id}}" />

Version‑specific content is controlled via conditional rendering:

<!-- 619 special content -->
<block wx:if="{{version===619}}">
  <swiper-item><daka /></swiper-item>
</block>

<!-- 615 classic content -->
<block wx:if="{{version===615}}">
  <swiper-item><jdcr /></swiper-item>
</block>

3. Building a High‑Concurrency Real‑Time Interaction System

The mini‑program needed to support over 90 interactive switches (e.g., live polls, lotteries, real‑time bullet comments) across 50+ event segments. Three solutions were evaluated:

Polling a regular API – high server load.

Polling a JSON configuration file – latency and operational overhead.

Using WeChat Cloud Development watch for real‑time database push – native, no server management.

The watch approach was selected. Each user can maintain up to 50 000 concurrent watch connections; the team expanded the quota and performed load testing to ensure stability during peak traffic.

// Initialize watch on admin configuration
loadAdminConfig(cb) {
  const db = wx.cloud.database();
  this.globalData.adminWatch = db.collection('adminConfig').watch({
    onChange: function (result) {
      const adminData = result.docChanges[0].doc;
      console.log(adminData);
    },
    onError: function (err) {
      console.error('the watch closed because of error', err);
    }
  });
}

// Start/stop watch with page lifecycle
onShow: function(){
  app.loadAdminConfig();
},
onHide: function () {
  if (app.globalData.adminWatch) {
    app.globalData.adminWatch.close().then(() => { app.globalData.adminWatch = null; });
  }
}

Interactive elements are conditionally displayed based on the watched data, e.g., lottery button, quiz status, or bullet‑screen activation.

<view wx:if="{{adminData.lottery_status}}" bindtap="lottery">Lottery</view>
<view wx:if="{{queStatus[item]==='choose'}}">Answer Question</view>
<view wx:if="{{queStatus[item]==='waiting'}}">Waiting for Result</view>
<view wx:if="{{queStatus[item]==='luckylist'}}">Winner List</view>

If the watch connection fails, the system falls back to the JSON‑polling method, ensuring continuity without code changes.

Conclusion

The mini‑program successfully delivered a consumer‑oriented, real‑time interactive experience for Tencent Games' first online conference. It demonstrated the effectiveness of CSS conic-gradient for visual effects, component‑driven multi‑platform development, and WeChat Cloud Development's watch API for handling high‑concurrency real‑time interactions.