Shulou(Shulou.com)05/31 Report--

Most people do not understand the knowledge of this article "JavaScript how to add countdown function on the control", so the editor summarizes the following content, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "JavaScript how to add countdown function on the control" article.

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) } the above is the content of this article on "how to add countdown function to JavaScript controls". I believe we all have some understanding. I hope the content shared by the editor will be helpful to you. If you want to learn more about related knowledge, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.