Home > Backend Development > PHP Tutorial > javascript - Is there a good way to prevent the js countdown from remaining unchanged after refreshing the page?

javascript - Is there a good way to prevent the js countdown from remaining unchanged after refreshing the page?

WBOY
Release: 2016-08-08 09:06:46
Original
1658 people have browsed it

Currently, it is possible to implement a js countdown, but as soon as the page is refreshed, the countdown will either stop directly or start again.
Then the question comes?
How can I control js so that the countdown will continue even if the page is refreshed.
Everyone who is passing by, please do me a favor. Thanks!

Reply content:

Currently, it is possible to implement a js countdown, but as soon as the page is refreshed, the countdown will either stop directly or start again.
Then the question comes?
How can I control js so that the countdown will continue even if the page is refreshed.
To all the friends who are passing by, please help me. Thanks!

Get the local time when starting the countdown, store it in cookie or localstorage, read the starting time after refreshing and subtract the current time

Learn about Service Worker

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

Use cookies or localstorage,
For details, please see an answer I wrote
http://stackoverflow.com/a/38...

<code>1 php: 定义停止$end_time 
2 html : <input type="hidden" name="end_time" id="end_time" value="$end_time">
3 js:$("#end_time").val()
</code>
Copy after login

You should understand the meaning

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

Some people have been asking about countdowns recently. I wrote a simple one before. You can take a look at it

Get a countdown code for every Tuesday

Don’t use js to get the client time when starting the countdown. Use php to get the server time. Give js a try

Write a local storage countdown and it’s ok

To implement a countdown function, you must first have a fixed end time. Normal logic implementation:

Pass the end time into a countdown method, subtract the current time from the end time to get the remaining time, and execute it once a second. The current time will increase, and the remaining time will decrease accordingly.

So where does the fixed end time come from. 1. The time hard-coded in the code 2. The time returned by the backend 3. Local storage. As long as you get a fixed end time, the countdown will not start from the beginning. Interrupts only occur when the countdown ends or the code reports an error. I wrote a page link description where multiple countdowns exist at the same time

If you have to control the front end, you can only use browser storage such as cookies/Web storage. In this way, your needs can be achieved in the same browser without clearing the cache. If necessary, it will remain unchanged even if you change the browser. Only the backend can return the time

[Send SMS verification, back button countdown to prevent refresh countdown failure]
Application scenario: When developing the "Send SMS verification" function, a problem needs to be solved to prevent malicious or frequent SMS verification codes from being sent. The general principle is "when the send button is clicked, an ajax request is sent to the server to send the SMS verification code. If successful, the send button is set to non-clickable and the call is set. Original link: https://segmentfault.com/a/11.. .

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template