I. Overview
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.
II. Example
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.
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.
III. Download template
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