Jadual Kandungan
回复内容:
Rumah pembangunan bahagian belakang tutorial php javascript - 有没有好的办法可以防止刷新页面后js倒计时不变

javascript - 有没有好的办法可以防止刷新页面后js倒计时不变

Aug 08, 2016 am 09:06 AM
javascript php

当前是可以实现js的倒计时,但是,页面一刷新,倒计时要么直接停止,要么直接重新开始。
那么问题来了?
怎样才能控制住js,即使刷新页面,那个倒计时还是持续的。
麻烦各位路过的小伙伴,帮个忙。谢谢!

回复内容:

当前是可以实现js的倒计时,但是,页面一刷新,倒计时要么直接停止,要么直接重新开始。
那么问题来了?
怎样才能控制住js,即使刷新页面,那个倒计时还是持续的。
麻烦各位路过的小伙伴,帮个忙。谢谢!

开始倒计时的时候获取本地时间,存入cookie或localstorage,刷新后读取开始的时间和现在的时间想减

了解一下Service Worker

每次刷新都是一个新的函数运行环境,无法得知刷新之前的状态。你的定时器的开始时间只能从后台获取或根据当前时间计算。

用cookie或localstorage,
具体见我写过的一篇回答
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>
Salin selepas log masuk

应该看得懂意思把

倒计时开始时,保存结束时间到localstorage,刷新页面读取localstorage的值再计算出倒计时间

最近老有人问倒计时的问题,之前写过一个简单的了,楼主可以看看

求到每周二的一个倒计时代码

你倒计时的开始时间不要用js获取客户端的时间,用php获取服务端的时间给js用试试看

写一个本地存储倒计时就ok啦

要实现一个倒计时功能,首先你必须得有一个固定的结束时间,正常逻辑实现:

把结束时间传入到一个倒计时方法里面,使用结束时间减去当前时间,得到剩余时间,一秒钟执行一次。而当前时间会增加,那么剩余时间就会相应减少。

那么固定结束时间从哪里来的。1、代码里面写死的时间 2、后端返回的时间 3、本地存储的。只要拿到了固定的结束时间,倒计时就不会从头开始。中断也只是在倒计时结束或者代码报错的情况下出现。我写过一个多个倒计时同时存在的页面链接描述

如果非要前端控制只能利用cookie/Web storage之类的浏览器存储,这样的话在同一个浏览器不清除缓存的情况下可以实现你的需求,如果需要即使更换浏览器也保持不变的话只能后端返回时间

【发送短信验证,后按钮倒计时,防止刷新倒计时失效】
应用场景 ,在开发“发送短信验证”功能时候,要解决一个问题,防止恶意或频繁发送短信验证码问题。一般原理是“当点击发送按钮时,发送ajax请求到服务器发送短信验证码,成功则把发送按钮设置为不可点击,并且调用定,原文链接:https://segmentfault.com/a/11...

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Tag artikel panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Panduan Pemasangan dan Naik Taraf PHP 8.4 untuk Ubuntu dan Debian Panduan Pemasangan dan Naik Taraf PHP 8.4 untuk Ubuntu dan Debian Dec 24, 2024 pm 04:42 PM

Panduan Pemasangan dan Naik Taraf PHP 8.4 untuk Ubuntu dan Debian

Tarikh dan Masa CakePHP Tarikh dan Masa CakePHP Sep 10, 2024 pm 05:27 PM

Tarikh dan Masa CakePHP

Konfigurasi Projek CakePHP Konfigurasi Projek CakePHP Sep 10, 2024 pm 05:25 PM

Konfigurasi Projek CakePHP

Muat naik Fail CakePHP Muat naik Fail CakePHP Sep 10, 2024 pm 05:27 PM

Muat naik Fail CakePHP

Penghalaan CakePHP Penghalaan CakePHP Sep 10, 2024 pm 05:25 PM

Penghalaan CakePHP

Bincangkan CakePHP Bincangkan CakePHP Sep 10, 2024 pm 05:28 PM

Bincangkan CakePHP

Cara Menyediakan Kod Visual Studio (Kod VS) untuk Pembangunan PHP Cara Menyediakan Kod Visual Studio (Kod VS) untuk Pembangunan PHP Dec 20, 2024 am 11:31 AM

Cara Menyediakan Kod Visual Studio (Kod VS) untuk Pembangunan PHP

Panduan Ringkas CakePHP Panduan Ringkas CakePHP Sep 10, 2024 pm 05:27 PM

Panduan Ringkas CakePHP

See all articles