Javascript-is there a good way to prevent the js countdown from changing after the page is refreshed?

Source: Internet
Author: User
Currently, the js countdown can be implemented. However, when the page is refreshed, the countdown either stops directly or starts again. Why? How can we control js? even if we refresh the page, the countdown will continue. Thank you for your assistance. Thank you! Currently, the js countdown can be implemented. However, when the page is refreshed, the countdown either stops directly or starts again.
Why?
How can we control js? even if we refresh the page, the countdown will continue.
Thank you for your assistance. Thank you!

Reply content:

Currently, the js countdown can be implemented. However, when the page is refreshed, the countdown either stops directly or starts again.
Why?
How can we control js? even if we refresh the page, the countdown will continue.
Thank you for your assistance. Thank you!

Obtain the local time when the countdown starts, store the data to the cookie or localstorage, and refresh the data to get the start time and the current time.

About Service Worker

Every refresh is a new function running environment, so you cannot know the status before refresh. The start time of your timer can only be obtained from the background or calculated based on the current time.

Use cookie or localstorage,
For details, see an answer I wrote.
Http://stackoverflow.com/a/38...

1 php: define stop $ end_time 2 html:3 js: $ ("# end_time"). val ()

You should be able to understand

When the countdown starts, save the end time to localstorage. refresh the page to read the value of localstorage and calculate the countdown time.

Someone has asked the countdown question recently. I wrote a simple question before. you can check it out.

A countdown code every Tuesday

Do not use the start time of your countdownjsObtain the time of the client.phpGet the server timejsTry it

It's okay to write a local storage countdown.

To implement a countdown function, you must first have a fixed end time. the normal logic is as follows:

Input the end time to a countdown method, and use the end time minus the current time to get the remaining time, which is executed once in one second. The current time will increase, and the remaining time will be reduced accordingly.

Then, where does the fixed end time come from. 1. the time when the code is written. 2. the time when the backend returns. 3. the time when the code is locally stored. As long as you get a fixed end time, the countdown will not start from the beginning. Interruption occurs only when the countdown ends or the code reports an error. I have written a description of the page link with multiple countdown times.

If front-end control is required, you can only use browser storage such as cookie/Web storage, so that your needs can be fulfilled without clearing the cache in the same browser, if you want to change the browser, only the back-end return time is required.

[Send text message verification, and then click the countdown button to prevent invalid refresh Countdown]
In application scenarios, when developing the "send SMS verification" function, you must solve a problem to prevent malicious or frequent sending of SMS verification codes. The general principle is "when you click the send button, send ajax request to the server to send SMS verification code, the success of the send button is set to not clickable, and call set, the original link: https://segmentfault.com/a/11...

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.