How to add countdown function to the control by JavaScript

This article mainly introduces the "JavaScript how to add countdown function on the control" related knowledge, editor through the actual case to show you the operation process, the method of operation is simple and fast, practical, I hope that this "JavaScript how to add countdown function on the control" article can help you solve the problem.

one。 Overview

In some report requirements, we need to add a countdown function to the control, limit to a certain point in time, can or cannot perform an operation, such as query, export function, etc., and we need to humanize how much time is left, that is, the countdown function. For example, in the following figure, we limit the report to be queried after 10:00 every day.

When the countdown is over, the query function is available

How is this function realized?

two。 Realization idea

The main principle is to use the setEnable (true) / setEnable (false) of the control to set the available and unavailable state of the control. In the process of obtaining the time, we need to use the acquisition time in JS, use the timer function setInterval (function () {}, time) of JS to timing the countdown, and judge whether the countdown ends.

Three. Realization process

1. Modify the template

Take the self-contained gettingstarted.cpt template as an example, the query button is not available during initialization, as shown in the following figure

2. Add countdown control function

To simplify the control process, write the JS code directly in the post-initialization event of the query button, as shown in the following figure

The code is as follows:

Var h = 10; / / limit a few minutes to query var m = 00; / / limit a few seconds to query var s = 00; / / limit a few seconds to query / / format time function timeToString (a) {/ / hour var s = 'also' s+=parseInt (a / 3600) + 'hours'; / / minutes s+=parseInt (a% 3600 / 60) + 'minutes'; / / seconds s+=parseInt (a% 60) + 'seconds searchable'; return s } var date1= new Date (); var date2= new Date (); / / set preset searchable time date1.setHours (h); date1.setMinutes (m); date1.setSeconds (s); / / for example, time var d = (date1-date2) / 1000; / / if available during initialization, enable button if (d < 0) {this .setValue ('query'); this .setEnable (true);} else {var btn= this / / display countdown time btn.setValue (timeToString (d)); / / set unavailable btn.setEnable (false); / / timer function setInterval (function () {/ / reset time date1= new Date (); date2= new Date (); date1.setHours (h); date1.setMinutes (m); date1.setSeconds (s)) / / the time difference between the current time and the set time d = (date1-date2) / 1000; if (d < 0) {btn.setValue ('query'); btn.setEnable (true);} else {btn.setValue (timeToString (d)); btn.setEnable (false);}}, 1000) } this is the end of the introduction to "how JavaScript adds countdown function to the control". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.