如何让刷新页面时倒计时不重置

Question

我为我的 Shopify 网站进行了倒计时，它运行得很好，除非您刷新页面。当你这样做时，事情就会自行重置。谁能帮我解决这个问题吗？先感谢您！

这是代码：

<style>#progress_bar{margin-top:15px}.progressbar.progressbar{background:#ffe8e8;border:0px solid whitesmoke;height:11px}.progressbar.progressbar div{background:#d95350;height:11px}{border-radius:16px}.progressbar.progressbar.active div{-webkit-animation:2s linear 0s normal none infinite running progress-bar-stripes;animation:2s linear 0s normal none infinite running progress-bar-stripes}.progress-striped.progressbar.progressbar div{background-image:-webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));background-size:40px 40px}.items-count{margin-top:0px;margin-bottom:0px}.count{color:#a94442;padding:1px}.items-count p{padding-bottom:5px;margin:0;text-transform:uppercase;font-weight:700;text-align:center;font-family:"DIN Next",Arial,sans-serif}.progressbar{position:relative;display:block;background-color:#ca0000;border:1px solid #ddd;margin-bottom:15px;-webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, .1);box-shadow:inset 0 1px 2px rgba(0, 0, 0, .1)}.progressbar > div{background-color:#ca0000;width:0;margin-bottom:0;height:15px}.progressbar > div.less-than-ten{background-color:#ca0000 !important}#clock-ticker{display:block;margin-bottom:15px}#clock-ticker .block{position:relative;color:#000;font-weight:bold;float:left;text-align:center;width:25%}#clock-ticker .block .flip-top{width:88px;height:39px;line-

Answer 1

您可以使用SessionStorage来实现这一点。使用网络存储 API 将天、小时、分钟和秒的计数存储在 SessionStorage 中。https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API当页面重新加载时，读取 sessionStorage 中设置的值（如果找到）。如果不使用从 Date() 中提取的常用值。您可以运行下面所示的堆栈片段来查看正常操作。堆栈片段不允许读取“sessionStorage”；来自“Window”的属性因为该文档是沙盒的并且缺少“允许相同来源”旗帜。因此，我对插入的代码进行了注释，并设置了稍后在实际环境中运行代码时更改的条件。在下面的代码片段中：&nbsp;if (false && sessionStorage)&nbsp;您可以在浏览器中运行此代码，方法是将这些&nbsp;if&nbsp;条件更改为：&nbsp;if (sessionStorage)&nbsp;您将看到计数器值在页面刷新时保留。function randomIntFromInterval(min, max) {&nbsp; return Math.floor(Math.random() * (max - min + 1) + min);}// Settings are herevar total_items = 50;var d = new Date();var min_items_left = 8;var max_items_left = 12;// declare storage keys first here, it's easy to manage that way.const StorageKeys = {&nbsp; counterItems: 'my-counter-items',&nbsp; counter: 'my-counter'};/** Start: Insert this code to read session Storage for counter Items **/// here you can pull the sessionStored value&nbsp;let counterItems = null;// NOTE: remove false from condition check before running in real envif (false && sessionStorage) {&nbsp;counterItems = sessionStorage.getItem(StorageKeys.counterItems);}/** End: Insert this code to read session Storage for counter Items **/// use stored items count if presentvar remaining_items = counterItems ? Number(counterItems) : randomIntFromInterval(min_items_left, max_items_left);var min_of_remaining_items = 3;var decrease_after = 1.7;var decrease_after_first_item = 0.17;// Davy Jones' Locker(function($) {&nbsp; $.fn.progressbar = function() {&nbsp; &nbsp; var a = "<p>Only <span class='count'>" + remaining_items + "</span> items remaining</p>" + "<div class='progressbar'><div style='width:100%'></div></div>";&nbsp; &nbsp; this.addClass('items-count');&nbsp; &nbsp; this.html(a + this.html());&nbsp; &nbsp; updateMeter(this);&nbsp; &nbsp; var b = this;&nbsp; &nbsp; setTimeout(function() {&nbsp; &nbsp; &nbsp; remaining_items--;&nbsp; &nbsp; &nbsp; if (remaining_items < min_of_remaining_items) {&nbsp; &nbsp; &nbsp; &nbsp; remaining_items = randomIntFromInterval(min_items_left, max_items_left)&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; $('.count').css('background-color', '#CE0201');&nbsp; &nbsp; &nbsp; $('.count').css('color', '#fff');&nbsp; &nbsp; &nbsp; setTimeout(function() {&nbsp; &nbsp; &nbsp; &nbsp; $('.count').css('background-color', '#fff');&nbsp; &nbsp; &nbsp; &nbsp; $('.count').css('color', '#CE0201')&nbsp; &nbsp; &nbsp; }, 1000 * 60 * 0.03);&nbsp; &nbsp; &nbsp; b.find(".count").text(remaining_items);&nbsp; &nbsp; &nbsp; updateMeter(b)&nbsp; &nbsp; }, 1000 * 60 * decrease_after_first_item);&nbsp; &nbsp; setInterval(function() {&nbsp; &nbsp; &nbsp; remaining_items--;&nbsp; &nbsp; &nbsp; if (remaining_items < min_of_remaining_items) {&nbsp; &nbsp; &nbsp; &nbsp; remaining_items = randomIntFromInterval(min_items_left, max_items_left)&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; $('.count').css('background-color', '#CE0201');&nbsp; &nbsp; &nbsp; $('.count').css('color', '#fff');&nbsp; &nbsp; &nbsp; setTimeout(function() {&nbsp; &nbsp; &nbsp; &nbsp; $('.count').css('background-color', '#fff');&nbsp; &nbsp; &nbsp; &nbsp; $('.count').css('color', '#CE0201')&nbsp; &nbsp; &nbsp; }, 1000 * 60 * 0.03);&nbsp; &nbsp; &nbsp; b.find(".count").text(remaining_items);&nbsp; &nbsp; &nbsp; updateMeter(b)&nbsp; &nbsp; }, 1000 * 60 * decrease_after)&nbsp; };&nbsp; function updateMeter(a) {&nbsp; &nbsp; /** Start: Insert this code to set session Storage for counter Items **/&nbsp; &nbsp; // now save the counter items values in sessionStorage&nbsp; &nbsp; // NOTE: remove false from condition check before running in real env&nbsp; &nbsp; if(false && sessionStorage) {&nbsp; &nbsp; &nbsp; sessionStorage.setItem(StorageKeys.counterItems, remaining_items);&nbsp; &nbsp; }&nbsp; &nbsp; /** End: Insert this code to set session Storage for counter Items **/&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; var b = 100 * remaining_items / total_items;&nbsp; &nbsp; if (remaining_items < 10) {&nbsp; &nbsp; &nbsp; a.find('.progressbar div:first').addClass('less-than-ten')&nbsp; &nbsp; }&nbsp; &nbsp; a.find('.progressbar').addClass('active progress-striped');&nbsp; &nbsp; setTimeout(function() {&nbsp; &nbsp; &nbsp; myanimate(a.find('.progressbar div:first'), b);&nbsp; &nbsp; &nbsp; a.find('.progressbar').removeClass('active progress-striped')&nbsp; &nbsp; }, 1000)&nbsp; }}(jQuery));function myanimate(a, b) {&nbsp; var c = 0;&nbsp; var d = parseInt(a.closest('.progressbar').css('width'));&nbsp; var e = Math.floor(100 * parseInt(a.css('width')) / d);&nbsp; if (e > b) {&nbsp; &nbsp; c = e&nbsp; }&nbsp; function frame() {&nbsp; &nbsp; if (e > b) {&nbsp; &nbsp; &nbsp; c--&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; c++&nbsp; &nbsp; }&nbsp; &nbsp; a.css('width', c + '%');&nbsp; &nbsp; if (c == b || c <= 0 || c >= 100) clearInterval(f)&nbsp; }&nbsp; var f = setInterval(frame, 40)}jQuery.noConflict()(function($) {&nbsp; $(document).ready(function() {&nbsp; &nbsp; $("#progress_bar").progressbar();&nbsp; &nbsp; var tag = "ctdn-12-12".match(/\d+/g);&nbsp; &nbsp; var hour = 14;&nbsp; &nbsp; var theDaysBox = $("#numdays");&nbsp; &nbsp; var theHoursBox = $("#numhours");&nbsp; &nbsp; var theMinsBox = $("#nummins");&nbsp; &nbsp; var theSecsBox = $("#numsecs");&nbsp; &nbsp; var d = new Date();&nbsp; &nbsp; var n = d.getDay();&nbsp; &nbsp; var date = 1;&nbsp; &nbsp; var gg = 0;&nbsp; &nbsp; var hh = 0;&nbsp; &nbsp; var ii = 0;&nbsp; &nbsp; var nsec = 0 - d.getSeconds();&nbsp; &nbsp; if (nsec < 0) {&nbsp; &nbsp; &nbsp; nsec = 60 - d.getSeconds();&nbsp; &nbsp; &nbsp; gg = 1&nbsp; &nbsp; }&nbsp; &nbsp; var nmin = 0 - d.getMinutes() - gg;&nbsp; &nbsp; if (nmin < 0) {&nbsp; &nbsp; &nbsp; nmin = 60 - d.getMinutes() - gg;&nbsp; &nbsp; &nbsp; hh = 1&nbsp; &nbsp; }&nbsp; &nbsp; var nhrs = 14 - d.getHours() - hh;&nbsp; &nbsp; if (nhrs < 0) {&nbsp; &nbsp; &nbsp; nhrs = 38 - d.getHours() - hh;&nbsp; &nbsp; &nbsp; ii = 1&nbsp; &nbsp; }&nbsp; &nbsp; var ndat = date - 1;&nbsp; &nbsp; if (ndat < 0) {&nbsp; &nbsp; &nbsp; var mmon = d.getMonth();&nbsp; &nbsp; &nbsp; ndat = 30 + date - d.getDate() - ii&nbsp; &nbsp; }&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; /** Start: Insert this code to read session Storage **/&nbsp; &nbsp; // here read from Session Storage; you can use any&nbsp; &nbsp; // keyname to store the values&nbsp; &nbsp; let counterData = null;&nbsp; &nbsp; // NOTE: remove false from condition check before running in real env&nbsp; &nbsp; if(false && sessionStorage) {&nbsp; &nbsp; &nbsp; counterData = JSON.parse(sessionStorage.getItem(StorageKeys.counter));&nbsp; &nbsp; }&nbsp; &nbsp; /** End: Insert this code to read session Storage **/&nbsp; &nbsp;&nbsp; &nbsp; // use the stored valued value if present&nbsp; &nbsp; theSecsBox.html(counterData ? counterData.nsec : nsec);&nbsp; &nbsp; theMinsBox.html(counterData ? counterData.nmin : nmin);&nbsp; &nbsp; theHoursBox.html(counterData ? counterData.nhrs : nhrs);&nbsp; &nbsp; theDaysBox.html(counterData ? counterData.ndat : ndat);&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; var refreshId = setInterval(function() {&nbsp; &nbsp; &nbsp; var e = theSecsBox.text();&nbsp; &nbsp; &nbsp; var a = theMinsBox.text();&nbsp; &nbsp; &nbsp; var c = theHoursBox.text();&nbsp; &nbsp; &nbsp; var b = theDaysBox.text();&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; /** Start: Insert this code to set session Storage **/&nbsp; &nbsp; &nbsp; // now save the counter values in sessionStorage&nbsp; &nbsp; &nbsp; // NOTE: remove false from condition check before running in real env&nbsp; &nbsp; &nbsp; if(false && sessionStorage) {&nbsp; &nbsp; &nbsp; &nbsp; const currentValues = { nsec: e, nmin: a, nhrs: c, ndat: b };&nbsp; &nbsp; &nbsp; &nbsp; sessionStorage.setItem(StorageKeys.counter, JSON.stringify(currentValues));&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; /** End: Insert this code to set session Storage **/&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; if (e == 0 && a == 0 && c == 0 && b == 0) {} else {&nbsp; &nbsp; &nbsp; &nbsp; if (e == 0 && a == 0 && c == 0) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; theDaysBox.html(b - 1);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; theHoursBox.html("23");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; theMinsBox.html("59");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; theSecsBox.html("59")&nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (e == 0 && a == 0) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; theHoursBox.html(c - 1);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; theMinsBox.html("59");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; theSecsBox.html("59")&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (e == 0) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; theMinsBox.html(a - 1);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; theSecsBox.html("59")&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; theSecsBox.html(e - 1)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }, 1000);&nbsp; });});body {&nbsp; background-color: #fff;}#progress_bar {&nbsp; margin-top: 15px;}.progressbar.progressbar {&nbsp; background: #ffe8e8;&nbsp; border: 0px solid whitesmoke;&nbsp; height: 11px;}.progressbar.progressbar div {&nbsp; background: #d95350;&nbsp; height: 11px;}&nbsp; {&nbsp; border-radius: 16px;}.progressbar.progressbar.active div {&nbsp; -webkit-animation: 2s linear 0s normal none infinite running progress-bar-stripes;&nbsp; animation: 2s linear 0s normal none infinite running progress-bar-stripes;}.progress-striped.progressbar.progressbar div {&nbsp; background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);&nbsp; background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));&nbsp; background-size: 40px 40px;}.items-count {&nbsp; margin-top: 0px;&nbsp; margin-bottom: 0px;}.count {&nbsp; color: #a94442;&nbsp; padding: 1px;}.items-count p {&nbsp; padding-bottom: 5px;&nbsp; margin: 0;&nbsp; text-transform: uppercase;&nbsp; font-weight: 700;&nbsp; text-align: center;&nbsp; font-family: "DIN Next", Arial, sans-serif;}.progressbar {&nbsp; position: relative;&nbsp; display: block;&nbsp; background-color: #ca0000;&nbsp; border: 1px solid #ddd;&nbsp; margin-bottom: 15px;&nbsp; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);}.progressbar > div {&nbsp; background-color: #ca0000;&nbsp; width: 0;&nbsp; margin-bottom: 0;&nbsp; height: 15px;}.progressbar > div.less-than-ten {&nbsp; background-color: #ca0000 !important;}#clock-ticker {&nbsp; display: block;&nbsp; margin-bottom: 15px;}#clock-ticker .block {&nbsp; position: relative;&nbsp; color: #000;&nbsp; font-weight: bold;&nbsp; float: left;&nbsp; text-align: center;&nbsp; width: 25%;}#clock-ticker .block .flip-top {&nbsp; width: 88px;&nbsp; height: 39px;&nbsp; line-height: 40px;&nbsp; font-size: 40px;&nbsp; text-align: center;}#clock-ticker .block .label, span.flip-top {&nbsp; color: #000;&nbsp; font-weight: bold;&nbsp; text-align: center;&nbsp; font-size: 14px;&nbsp; text-transform: uppercase;&nbsp; width: 88px;&nbsp; line-height: 25px;&nbsp; font-family: "Open Sans", Arial, sans-serif;}.progressbar div {&nbsp; border-radius: 20px;}#progress_bar div {&nbsp; border-radius: 20px;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div id="progress_bar"></div><span id="numdays"></span> days<span id="numhours"></span> Hours<span id="nummins"></span> Minutes<span id="numsecs"></span> Seconds

Answer 2

我会创建类似的东西：//<![CDATA[/* js/external.js */let doc, html, bod, I, SessionCounter; // for use on other loadsaddEventListener('load', ()=>{doc = document; html = doc.documentElement; bod = doc.body;I = id=>doc.getElementById(id);SessionCounter = function(init = 0, inc = 1, dec = 1){&nbsp; if(sessionStorage.count === undefined){&nbsp; &nbsp; sessionStorage.count = init;&nbsp; }&nbsp; this.count = +sessionStorage.count;&nbsp; this.inc = (by = inc)=>{&nbsp; &nbsp; this.count += by; sessionStorage.count = this.count;&nbsp; &nbsp; return this.count;&nbsp; }&nbsp; this.dec = (by = dec)=>{&nbsp; &nbsp; this.count -= by; sessionStorage.count = this.count;&nbsp; &nbsp; return this.count;&nbsp; }}// you can put the following on another page using a load Event - besides the end loadconst dec = I('dec'), test = I('test'), inc = I('inc');sc = new SessionCounter;test.textContent = sc.count;dec.onclick = ()=>{&nbsp; if(sc.count > 0)test.textContent = sc.dec();}inc.onclick = ()=>{&nbsp; test.textContent = sc.inc();}}); // end load//]]>/* css/external.css */*{&nbsp; box-sizing:border-box; padding:0; margin:0;}html,body{&nbsp; width:100%; height:100%; background:#ccc;}.main{&nbsp; padding:10px;}#inc,#dec{&nbsp; width:20px;}#test{&nbsp; display:inline-block; width:70px; background:#fff; text-align:center;}<!DOCTYPE html><html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en'>&nbsp; <head>&nbsp; &nbsp; <meta charset='UTF-8' /><meta name='viewport' content='width=device-width, height=device-height, initial-scale:1, user-scalable=no' />&nbsp; &nbsp; <title>Title Here</title>&nbsp; &nbsp; <link type='text/css' rel='stylesheet' href='css/external.css' />&nbsp; &nbsp; <script src='js/external.js'></script>&nbsp; </head><body>&nbsp; <div class='main'>&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; <input id='dec' type='button' value='-' />&nbsp; &nbsp; &nbsp; <div id='test'></div>&nbsp; &nbsp; &nbsp; <input id='inc' type='button' value='+' />&nbsp; &nbsp; </div>&nbsp; </div></body></html>