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

In this article, the editor introduces in detail "JavaScript how to build a countdown timer", the content is detailed, the steps are clear, and the details are handled properly. I hope this "JavaScript how to build a countdown timer" article can help you solve your doubts.

First, you need to set a valid end date. This should be a string of any format that can be understood by JavaScript's Date.parse () method. For example:

ISO 8601 format:

Const deadline = '2015-12-31'

Short format:

Const deadline ='31 Compact 12 Compact 2015'

Or, long format:

Const deadline = 'December 31 2015'

Each of these formats allows you to specify an exact time and a time zone (or an offset from UTC in the case of an ISO date). For example:

Const deadline = 'December 31 2015 23:59:59 GMT+0200'

3. Calculate the remaining time the next step is to calculate the remaining time. We need to write a function that requires a string that represents a given end time (as described above). Then we calculate the time difference between that time and the current time. It looks like this:

Function getTimeRemaining (endtime) {const total = Date.parse (endtime)-Date.parse (new Date ()); const seconds = Math.floor ((total/1000)% 60); const minutes = Math.floor ((total/1000/60)% 60); const hours = Math.floor ((total/ (1000 / 60))% 24); const days = Math.floor (total/ (1000 / 60 / 60 / 24)) Return {total, days, hours, minutes, seconds};}

First, we will create a variable total to keep the remaining time up to the due date. The Date.parse () function converts the time string to a millisecond value so that we can subtract the two times to get the amount of time in between.

Const total = Date.parse (endtime)-Date.parse (new Date ())

4. Convert time to available format

Now we are going to convert milliseconds into days, hours, minutes and seconds. Let's take seconds as an example:

Const seconds = Math.floor ((tComp1000)% 60)

Let's break down what happened here.

Hongmeng official Strategic Cooperation to build HarmonyOS Technology Community

Divide milliseconds by 1000 to convert to seconds: (tUniq1000)

Divide the total number of seconds by 60 and take the remainder. You don't need all the seconds, just the ones left after counting the minutes: (tUnip 1000)% 60

Round to the nearest whole number. This is because you need the full number of seconds, not a fraction of a second: Math.floor ((t _ hand 1000)% 60)

Repeat this logic to convert milliseconds into minutes, hours, and days.

5. Output clock data as reusable objects

After days, hours, minutes, and seconds of preparation, we can now return the data as a reusable object:

Return {total, days, hours, minutes, seconds}

This object allows you to call your function and get any calculated value. This is an example of how to get the remaining minutes:

GetTimeRemaining (deadline). Minutes

Is that convenient?

6. Display the clock on the page and stop the clock when the clock is 00:00

Now that we have a function that spits out the remaining days, hours, minutes, and seconds, we can set up our clock. First, we will create the following HTML element to hold the clock:

Then, we will write a function to output clock data in the new div:

Function initializeClock (id, endtime) {const clock = document.getElementById (id); const timeinterval = setInterval (()) = > {const t = getTimeRemaining (endtime); Clock[ XSS _ clean] = 'days:' + t.days +'

'+' hours:'+ t.hours +'

'+' minutes:'+ t.minutes +'

'+' seconds:'+ t.seconds; if (t.total {...}, 1000)

New code

Function updateClock () {const t = getTimeRemaining (endtime); days [XSS _ clean] = 'days:' + t.days +'

'+' hours:'+ t.hours +'

'+' minutes:'+ t.minutes +'

'+' seconds:'+ t.seconds`; if (t.total {/ / put date in milliseconds for comparison const startMs = Date.parse (startDate); const endMs = Date.parse (endDate); const currentMs = Date.parse (new Date () / / if the current date is between the start date and the end date, the clock if (endMs > currentMs & & currentMs > = startMs) {initializeClock ('clockdiv', endDate);}} is displayed.

Now, you can schedule your clock in advance without having to update it manually. You can shorten the code if you like. In order to make it easy to read, I wrote my code very verbose.

8.2 set the timer to 10 minutes from the time the user arrives

After the user arrives at or starts a specific task, it is necessary to set the countdown within a given time. We will set the timer to 10 minutes here, but you can use it at any time.

All we need to do is replace the deadline variable with the following command:

Const timeInMinutes = 10; const currentTime = Date.parse (new Date ()); const deadline = new Date (currentTime + timeInMinutes*60*1000)

This code is based on the current time, adding 10 minutes. These values are converted to milliseconds, so they can be added together and become new due dates.

Now we have a clock that counts down ten minutes from the time the user arrives. You are free to play and try different lengths of time.

8.3 maintain clock progress across pages

Sometimes, in addition to the current page, you need to keep the clock state. If we want to set a 10-minute timer on the entire site, we don't want to reset it when the user goes to another page.

One solution is to save the end time of the clock in a cookie. In this way, navigating to a new page will not reset the end time to more than ten minutes.

This is logic:

If a due date is recorded in Cookie, use that due date.

If Cookie does not exist, set a new due date and store it in Cookie.

To do this, replace the deadline variable with the following command:

Let deadline; / / if there is a cookie named myClock, use this value as the cutoff date if ([xss_clean] & & [xss_clean] .match ('myClock')) {/ / get the cutoff value deadline = [xss_clean] .match (/ (^ |;) myClock= ([^;] +) /) [2] from Cookie } else {/ / otherwise, please set a deadline of 10 minutes from now, / / save it in a cookie with that name / / create a deadline of 10 minutes from now const timeInMinutes = 10; const currentTime = Date.parse (new Date ()); deadline = new Date (currentTime + timeInMinutes*60*1000) / / store the due date in cookie for future reference [xss_clean] = 'myClock=' + deadline +'; path=/; domain=.yourdomain.com';}

It is important to note that you need to change .yourdomain.com to your actual domain name.

After reading this, the article "how to build a countdown timer in JavaScript" has been introduced. If you want to master the knowledge of this article, you still need to practice and use it. If you want to know more about the article, 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.