JS realizes special effect of countdown

1. Application scenario

When producing large screens such as real estate, retail, and e-commerce, countdowns are often required, such as countdowns for marketing operations, countdowns for retail sales, etc.

2. Realization idea

The external JS and CSS files are quoted in the report, and the HTIML5 technology is used to realize the countdown effect.

Taking the end time as 24 o'clock on the same day as an example, the page automatically calculates the hours, minutes and milliseconds remaining from the end time, and the clock effect decreases.

1. Design report

1) Create a new dashboard, and add a report block to the main body of the dashboard, edit the report block, merge cells B2~B11, insert HTML code, click Cell Attributes > Other in the property panel on the right, and select "Display by HTML".

The HTML code is as follows:

<div class="se-kl"> 
    <div class="se-cn">COUNT DOWN</div> 
    <i class="se-io"></i> 
    <div class="se-info">End of distance,left</div> <div class="se-count"> <div class="se-day"></div>
    <div class="se-hour"><span class="se-txt">00</span></div>
    <div class="se-min"><span class="se-txt">00</span></div>
    <div class="se-sec"><span class="se-txt">00</span></div>
    </div> 
</div>

2) Download all the files below and put them in the designer installation directory %FR_HOME%\webapps\webroot\help\css.

seckill.png

zzsc.css

zzsc.js

3) In the designer, click Server> Server Configuration Manager, and quote CSS and JavaScript respectively.

Quoting CSS:

Quoting JavaScript:

2. Preview effect

Save the dashboard and click PC preview, the effect is shown in I.1.

Note: Mobile terminal is not supported.

Please refer to the completed template:  

%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc-EN\JS\jsApplications\JS_realizes_countdown_effect.frm

Click to download: JS_realizes_countdown_effect.frm