如何在刷新页面时不重置倒计时
How to make count down not reset when you refresh the page
我为我的 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-height:40px;font-size:40px;text-align:center}#clock-ticker .block .label,span.flip-top{color:#000;font-weight:bold;text-align:center;font-size:14px;text-transform:uppercase;width:88px;line-height:25px;font-family:"Open Sans",Arial,sans-serif}</style><style>.progressbar div{border-radius:20px}</style><style>#progress_bar div{border-radius:20px}</style>
<script type="text/javascript">
function randomIntFromInterval(min, max) {return Math.floor(Math.random() * (max - min + 1) + min);}
// Settings are here
var total_items = 50;
var d = new Date();
var min_items_left = 8;
var max_items_left = 12;
var remaining_items = 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($){$.fn.progressbar=function(){var a="<p>Only <span class='count'>"+remaining_items+"</span> items remaining</p>"+"<div class='progressbar'><div style='width:100%'></div></div>";this.addClass('items-count');this.html(a+this.html());updateMeter(this);var b=this;setTimeout(function(){remaining_items--;if(remaining_items<min_of_remaining_items){remaining_items=randomIntFromInterval(min_items_left,max_items_left)}$('.count').css('background-color','#CE0201');$('.count').css('color','#fff');setTimeout(function(){$('.count').css('background-color','#fff');$('.count').css('color','#CE0201')},1000*60*0.03);b.find(".count").text(remaining_items);updateMeter(b)},1000*60*decrease_after_first_item);setInterval(function(){remaining_items--;if(remaining_items<min_of_remaining_items){remaining_items=randomIntFromInterval(min_items_left,max_items_left)}$('.count').css('background-color','#CE0201');$('.count').css('color','#fff');setTimeout(function(){$('.count').css('background-color','#fff');$('.count').css('color','#CE0201')},1000*60*0.03);b.find(".count").text(remaining_items);updateMeter(b)},1000*60*decrease_after)};function updateMeter(a){var b=100*remaining_items/total_items;if(remaining_items<10){a.find('.progressbar div:first').addClass('less-than-ten')}a.find('.progressbar').addClass('active progress-striped');setTimeout(function(){myanimate(a.find('.progressbar div:first'),b);a.find('.progressbar').removeClass('active progress-striped')},1000)}}(jQuery));function myanimate(a,b){var c=0;var d=parseInt(a.closest('.progressbar').css('width'));var e=Math.floor(100*parseInt(a.css('width'))/d);if(e>b){c=e}function frame(){if(e>b){c--}else{c++}a.css('width',c+'%');if(c==b||c<=0||c>=100)clearInterval(f)}var f=setInterval(frame,40)} jQuery.noConflict()(function($){$(document).ready(function(){$("#progress_bar").progressbar();var tag="ctdn-12-12".match(/\d+/g);var hour=14;var theDaysBox=$("#numdays");var theHoursBox=$("#numhours");var theMinsBox=$("#nummins");var theSecsBox=$("#numsecs");var d=new Date();var n=d.getDay();var date=1;var gg=0;var hh=0;var ii=0;var nsec=0-d.getSeconds();if(nsec<0){nsec=60-d.getSeconds();gg=1}var nmin=0-d.getMinutes()-gg;if(nmin<0){nmin=60-d.getMinutes()-gg;hh=1}var nhrs=14-d.getHours()-hh;if(nhrs<0){nhrs=38-d.getHours()-hh;ii=1}var ndat=date-1;if(ndat<0){var mmon=d.getMonth();ndat=30+date-d.getDate()-ii}theSecsBox.html(nsec);theMinsBox.html(nmin);theHoursBox.html(nhrs);theDaysBox.html(ndat);var refreshId=setInterval(function(){var e=theSecsBox.text();var a=theMinsBox.text();var c=theHoursBox.text();var b=theDaysBox.text();if(e==0&&a==0&&c==0&&b==0){}else{if(e==0&&a==0&&c==0){theDaysBox.html(b-1);theHoursBox.html("23");theMinsBox.html("59");theSecsBox.html("59")}else{if(e==0&&a==0){theHoursBox.html(c-1);theMinsBox.html("59");theSecsBox.html("59")}else{if(e==0){theMinsBox.html(a-1);theSecsBox.html("59")}else{theSecsBox.html(e-1)}}}}},1000);});});</script>```
您可以使用 SessionStorage 来实现。使用 Web 存储 API.
在 SessionStorage 中存储天、小时、分钟和秒的计数
https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API
当页面重新加载时，读取在 sessionStorage 中设置的值（如果找到）。如果不使用从 Date() 中提取的常用值。
您可以运行下面显示的堆栈片段来查看正常操作。堆栈片段不允许从 'Window' 中读取 'sessionStorage' 属性，因为文档是沙盒化的并且缺少 'allow-same-origin' 标志。
所以我已经对我插入的代码进行了注释，并且还设置了当您在真实环境中 运行 代码时稍后更改的条件。在下面的片段中是：
if (false && sessionStorage)
您可以 运行 通过将这些 if 条件更改为：
if (sessionStorage)
您会看到计数器值在页面刷新时保留。
function randomIntFromInterval(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
// Settings are here
var 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 = {
counterItems: 'my-counter-items',
counter: 'my-counter'
};
/** Start: Insert this code to read session Storage for counter Items **/
// here you can pull the sessionStored value
let counterItems = null;
// NOTE: remove false from condition check before running in real env
if (false && sessionStorage) {
counterItems = sessionStorage.getItem(StorageKeys.counterItems);
}
/** End: Insert this code to read session Storage for counter Items **/
// use stored items count if present
var 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($) {
$.fn.progressbar = function() {
var a = "<p>Only <span class='count'>" + remaining_items + "</span> items remaining</p>" + "<div class='progressbar'><div style='width:100%'></div></div>";
this.addClass('items-count');
this.html(a + this.html());
updateMeter(this);
var b = this;
setTimeout(function() {
remaining_items--;
if (remaining_items < min_of_remaining_items) {
remaining_items = randomIntFromInterval(min_items_left, max_items_left)
}
$('.count').css('background-color', '#CE0201');
$('.count').css('color', '#fff');
setTimeout(function() {
$('.count').css('background-color', '#fff');
$('.count').css('color', '#CE0201')
}, 1000 * 60 * 0.03);
b.find(".count").text(remaining_items);
updateMeter(b)
}, 1000 * 60 * decrease_after_first_item);
setInterval(function() {
remaining_items--;
if (remaining_items < min_of_remaining_items) {
remaining_items = randomIntFromInterval(min_items_left, max_items_left)
}
$('.count').css('background-color', '#CE0201');
$('.count').css('color', '#fff');
setTimeout(function() {
$('.count').css('background-color', '#fff');
$('.count').css('color', '#CE0201')
}, 1000 * 60 * 0.03);
b.find(".count").text(remaining_items);
updateMeter(b)
}, 1000 * 60 * decrease_after)
};
function updateMeter(a) {
/** Start: Insert this code to set session Storage for counter Items **/
// now save the counter items values in sessionStorage
// NOTE: remove false from condition check before running in real env
if(false && sessionStorage) {
sessionStorage.setItem(StorageKeys.counterItems, remaining_items);
}
/** End: Insert this code to set session Storage for counter Items **/
var b = 100 * remaining_items / total_items;
if (remaining_items < 10) {
a.find('.progressbar div:first').addClass('less-than-ten')
}
a.find('.progressbar').addClass('active progress-striped');
setTimeout(function() {
myanimate(a.find('.progressbar div:first'), b);
a.find('.progressbar').removeClass('active progress-striped')
}, 1000)
}
}(jQuery));
function myanimate(a, b) {
var c = 0;
var d = parseInt(a.closest('.progressbar').css('width'));
var e = Math.floor(100 * parseInt(a.css('width')) / d);
if (e > b) {
c = e
}
function frame() {
if (e > b) {
c--
} else {
c++
}
a.css('width', c + '%');
if (c == b || c <= 0 || c >= 100) clearInterval(f)
}
var f = setInterval(frame, 40)
}
jQuery.noConflict()(function($) {
$(document).ready(function() {
$("#progress_bar").progressbar();
var tag = "ctdn-12-12".match(/\d+/g);
var hour = 14;
var theDaysBox = $("#numdays");
var theHoursBox = $("#numhours");
var theMinsBox = $("#nummins");
var theSecsBox = $("#numsecs");
var d = new Date();
var n = d.getDay();
var date = 1;
var gg = 0;
var hh = 0;
var ii = 0;
var nsec = 0 - d.getSeconds();
if (nsec < 0) {
nsec = 60 - d.getSeconds();
gg = 1
}
var nmin = 0 - d.getMinutes() - gg;
if (nmin < 0) {
nmin = 60 - d.getMinutes() - gg;
hh = 1
}
var nhrs = 14 - d.getHours() - hh;
if (nhrs < 0) {
nhrs = 38 - d.getHours() - hh;
ii = 1
}
var ndat = date - 1;
if (ndat < 0) {
var mmon = d.getMonth();
ndat = 30 + date - d.getDate() - ii
}
/** Start: Insert this code to read session Storage **/
// here read from Session Storage; you can use any
// keyname to store the values
let counterData = null;
// NOTE: remove false from condition check before running in real env
if(false && sessionStorage) {
counterData = JSON.parse(sessionStorage.getItem(StorageKeys.counter));
}
/** End: Insert this code to read session Storage **/
// use the stored valued value if present
theSecsBox.html(counterData ? counterData.nsec : nsec);
theMinsBox.html(counterData ? counterData.nmin : nmin);
theHoursBox.html(counterData ? counterData.nhrs : nhrs);
theDaysBox.html(counterData ? counterData.ndat : ndat);
var refreshId = setInterval(function() {
var e = theSecsBox.text();
var a = theMinsBox.text();
var c = theHoursBox.text();
var b = theDaysBox.text();
/** Start: Insert this code to set session Storage **/
// now save the counter values in sessionStorage
// NOTE: remove false from condition check before running in real env
if(false && sessionStorage) {
const currentValues = { nsec: e, nmin: a, nhrs: c, ndat: b };
sessionStorage.setItem(StorageKeys.counter, JSON.stringify(currentValues));
}
/** End: Insert this code to set session Storage **/
if (e == 0 && a == 0 && c == 0 && b == 0) {} else {
if (e == 0 && a == 0 && c == 0) {
theDaysBox.html(b - 1);
theHoursBox.html("23");
theMinsBox.html("59");
theSecsBox.html("59")
} else {
if (e == 0 && a == 0) {
theHoursBox.html(c - 1);
theMinsBox.html("59");
theSecsBox.html("59")
} else {
if (e == 0) {
theMinsBox.html(a - 1);
theSecsBox.html("59")
} else {
theSecsBox.html(e - 1)
}
}
}
}
}, 1000);
});
});
body {
background-color: #fff;
}
#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;
box-shadow: inset 0 1px 2px rgba(0, 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-height: 40px;
font-size: 40px;
text-align: center;
}
#clock-ticker .block .label, span.flip-top {
color: #000;
font-weight: bold;
text-align: center;
font-size: 14px;
text-transform: uppercase;
width: 88px;
line-height: 25px;
font-family: "Open Sans", Arial, sans-serif;
}
.progressbar div {
border-radius: 20px;
}
#progress_bar div {
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
我会创建类似的东西：
//<![CDATA[
/* js/external.js */
let doc, html, bod, I, SessionCounter; // for use on other loads
addEventListener('load', ()=>{
doc = document; html = doc.documentElement; bod = doc.body;
I = id=>doc.getElementById(id);
SessionCounter = function(init = 0, inc = 1, dec = 1){
if(sessionStorage.count === undefined){
sessionStorage.count = init;
}
this.count = +sessionStorage.count;
this.inc = (by = inc)=>{
this.count += by; sessionStorage.count = this.count;
return this.count;
}
this.dec = (by = dec)=>{
this.count -= by; sessionStorage.count = this.count;
return this.count;
}
}
// you can put the following on another page using a load Event - besides the end load
const dec = I('dec'), test = I('test'), inc = I('inc');
sc = new SessionCounter;
test.textContent = sc.count;
dec.onclick = ()=>{
if(sc.count > 0)test.textContent = sc.dec();
}
inc.onclick = ()=>{
test.textContent = sc.inc();
}
}); // end load
//]]>
/* css/external.css */
*{
box-sizing:border-box; padding:0; margin:0;
}
html,body{
width:100%; height:100%; background:#ccc;
}
.main{
padding:10px;
}
#inc,#dec{
width:20px;
}
#test{
display:inline-block; width:70px; background:#fff; text-align:center;
}
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<head>
<meta charset='UTF-8' /><meta name='viewport' content='width=device-width, height=device-height, initial-scale:1, user-scalable=no' />
<title>Title Here</title>
<link type='text/css' rel='stylesheet' href='css/external.css' />
<script src='js/external.js'></script>
</head>
<body>
<div class='main'>
<div>
<input id='dec' type='button' value='-' />
<div id='test'></div>
<input id='inc' type='button' value='+' />
</div>
</div>
</body>
</html>
我为我的 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-height:40px;font-size:40px;text-align:center}#clock-ticker .block .label,span.flip-top{color:#000;font-weight:bold;text-align:center;font-size:14px;text-transform:uppercase;width:88px;line-height:25px;font-family:"Open Sans",Arial,sans-serif}</style><style>.progressbar div{border-radius:20px}</style><style>#progress_bar div{border-radius:20px}</style>
<script type="text/javascript">
function randomIntFromInterval(min, max) {return Math.floor(Math.random() * (max - min + 1) + min);}
// Settings are here
var total_items = 50;
var d = new Date();
var min_items_left = 8;
var max_items_left = 12;
var remaining_items = 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($){$.fn.progressbar=function(){var a="<p>Only <span class='count'>"+remaining_items+"</span> items remaining</p>"+"<div class='progressbar'><div style='width:100%'></div></div>";this.addClass('items-count');this.html(a+this.html());updateMeter(this);var b=this;setTimeout(function(){remaining_items--;if(remaining_items<min_of_remaining_items){remaining_items=randomIntFromInterval(min_items_left,max_items_left)}$('.count').css('background-color','#CE0201');$('.count').css('color','#fff');setTimeout(function(){$('.count').css('background-color','#fff');$('.count').css('color','#CE0201')},1000*60*0.03);b.find(".count").text(remaining_items);updateMeter(b)},1000*60*decrease_after_first_item);setInterval(function(){remaining_items--;if(remaining_items<min_of_remaining_items){remaining_items=randomIntFromInterval(min_items_left,max_items_left)}$('.count').css('background-color','#CE0201');$('.count').css('color','#fff');setTimeout(function(){$('.count').css('background-color','#fff');$('.count').css('color','#CE0201')},1000*60*0.03);b.find(".count").text(remaining_items);updateMeter(b)},1000*60*decrease_after)};function updateMeter(a){var b=100*remaining_items/total_items;if(remaining_items<10){a.find('.progressbar div:first').addClass('less-than-ten')}a.find('.progressbar').addClass('active progress-striped');setTimeout(function(){myanimate(a.find('.progressbar div:first'),b);a.find('.progressbar').removeClass('active progress-striped')},1000)}}(jQuery));function myanimate(a,b){var c=0;var d=parseInt(a.closest('.progressbar').css('width'));var e=Math.floor(100*parseInt(a.css('width'))/d);if(e>b){c=e}function frame(){if(e>b){c--}else{c++}a.css('width',c+'%');if(c==b||c<=0||c>=100)clearInterval(f)}var f=setInterval(frame,40)} jQuery.noConflict()(function($){$(document).ready(function(){$("#progress_bar").progressbar();var tag="ctdn-12-12".match(/\d+/g);var hour=14;var theDaysBox=$("#numdays");var theHoursBox=$("#numhours");var theMinsBox=$("#nummins");var theSecsBox=$("#numsecs");var d=new Date();var n=d.getDay();var date=1;var gg=0;var hh=0;var ii=0;var nsec=0-d.getSeconds();if(nsec<0){nsec=60-d.getSeconds();gg=1}var nmin=0-d.getMinutes()-gg;if(nmin<0){nmin=60-d.getMinutes()-gg;hh=1}var nhrs=14-d.getHours()-hh;if(nhrs<0){nhrs=38-d.getHours()-hh;ii=1}var ndat=date-1;if(ndat<0){var mmon=d.getMonth();ndat=30+date-d.getDate()-ii}theSecsBox.html(nsec);theMinsBox.html(nmin);theHoursBox.html(nhrs);theDaysBox.html(ndat);var refreshId=setInterval(function(){var e=theSecsBox.text();var a=theMinsBox.text();var c=theHoursBox.text();var b=theDaysBox.text();if(e==0&&a==0&&c==0&&b==0){}else{if(e==0&&a==0&&c==0){theDaysBox.html(b-1);theHoursBox.html("23");theMinsBox.html("59");theSecsBox.html("59")}else{if(e==0&&a==0){theHoursBox.html(c-1);theMinsBox.html("59");theSecsBox.html("59")}else{if(e==0){theMinsBox.html(a-1);theSecsBox.html("59")}else{theSecsBox.html(e-1)}}}}},1000);});});</script>```
您可以使用 SessionStorage 来实现。使用 Web 存储 API.
https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API
当页面重新加载时，读取在 sessionStorage 中设置的值（如果找到）。如果不使用从 Date() 中提取的常用值。
您可以运行下面显示的堆栈片段来查看正常操作。堆栈片段不允许从 'Window' 中读取 'sessionStorage' 属性，因为文档是沙盒化的并且缺少 'allow-same-origin' 标志。
所以我已经对我插入的代码进行了注释，并且还设置了当您在真实环境中 运行 代码时稍后更改的条件。在下面的片段中是：
if (false && sessionStorage)
您可以 运行 通过将这些 if 条件更改为：
if (sessionStorage)
您会看到计数器值在页面刷新时保留。
function randomIntFromInterval(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
// Settings are here
var 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 = {
counterItems: 'my-counter-items',
counter: 'my-counter'
};
/** Start: Insert this code to read session Storage for counter Items **/
// here you can pull the sessionStored value
let counterItems = null;
// NOTE: remove false from condition check before running in real env
if (false && sessionStorage) {
counterItems = sessionStorage.getItem(StorageKeys.counterItems);
}
/** End: Insert this code to read session Storage for counter Items **/
// use stored items count if present
var 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($) {
$.fn.progressbar = function() {
var a = "<p>Only <span class='count'>" + remaining_items + "</span> items remaining</p>" + "<div class='progressbar'><div style='width:100%'></div></div>";
this.addClass('items-count');
this.html(a + this.html());
updateMeter(this);
var b = this;
setTimeout(function() {
remaining_items--;
if (remaining_items < min_of_remaining_items) {
remaining_items = randomIntFromInterval(min_items_left, max_items_left)
}
$('.count').css('background-color', '#CE0201');
$('.count').css('color', '#fff');
setTimeout(function() {
$('.count').css('background-color', '#fff');
$('.count').css('color', '#CE0201')
}, 1000 * 60 * 0.03);
b.find(".count").text(remaining_items);
updateMeter(b)
}, 1000 * 60 * decrease_after_first_item);
setInterval(function() {
remaining_items--;
if (remaining_items < min_of_remaining_items) {
remaining_items = randomIntFromInterval(min_items_left, max_items_left)
}
$('.count').css('background-color', '#CE0201');
$('.count').css('color', '#fff');
setTimeout(function() {
$('.count').css('background-color', '#fff');
$('.count').css('color', '#CE0201')
}, 1000 * 60 * 0.03);
b.find(".count").text(remaining_items);
updateMeter(b)
}, 1000 * 60 * decrease_after)
};
function updateMeter(a) {
/** Start: Insert this code to set session Storage for counter Items **/
// now save the counter items values in sessionStorage
// NOTE: remove false from condition check before running in real env
if(false && sessionStorage) {
sessionStorage.setItem(StorageKeys.counterItems, remaining_items);
}
/** End: Insert this code to set session Storage for counter Items **/
var b = 100 * remaining_items / total_items;
if (remaining_items < 10) {
a.find('.progressbar div:first').addClass('less-than-ten')
}
a.find('.progressbar').addClass('active progress-striped');
setTimeout(function() {
myanimate(a.find('.progressbar div:first'), b);
a.find('.progressbar').removeClass('active progress-striped')
}, 1000)
}
}(jQuery));
function myanimate(a, b) {
var c = 0;
var d = parseInt(a.closest('.progressbar').css('width'));
var e = Math.floor(100 * parseInt(a.css('width')) / d);
if (e > b) {
c = e
}
function frame() {
if (e > b) {
c--
} else {
c++
}
a.css('width', c + '%');
if (c == b || c <= 0 || c >= 100) clearInterval(f)
}
var f = setInterval(frame, 40)
}
jQuery.noConflict()(function($) {
$(document).ready(function() {
$("#progress_bar").progressbar();
var tag = "ctdn-12-12".match(/\d+/g);
var hour = 14;
var theDaysBox = $("#numdays");
var theHoursBox = $("#numhours");
var theMinsBox = $("#nummins");
var theSecsBox = $("#numsecs");
var d = new Date();
var n = d.getDay();
var date = 1;
var gg = 0;
var hh = 0;
var ii = 0;
var nsec = 0 - d.getSeconds();
if (nsec < 0) {
nsec = 60 - d.getSeconds();
gg = 1
}
var nmin = 0 - d.getMinutes() - gg;
if (nmin < 0) {
nmin = 60 - d.getMinutes() - gg;
hh = 1
}
var nhrs = 14 - d.getHours() - hh;
if (nhrs < 0) {
nhrs = 38 - d.getHours() - hh;
ii = 1
}
var ndat = date - 1;
if (ndat < 0) {
var mmon = d.getMonth();
ndat = 30 + date - d.getDate() - ii
}
/** Start: Insert this code to read session Storage **/
// here read from Session Storage; you can use any
// keyname to store the values
let counterData = null;
// NOTE: remove false from condition check before running in real env
if(false && sessionStorage) {
counterData = JSON.parse(sessionStorage.getItem(StorageKeys.counter));
}
/** End: Insert this code to read session Storage **/
// use the stored valued value if present
theSecsBox.html(counterData ? counterData.nsec : nsec);
theMinsBox.html(counterData ? counterData.nmin : nmin);
theHoursBox.html(counterData ? counterData.nhrs : nhrs);
theDaysBox.html(counterData ? counterData.ndat : ndat);
var refreshId = setInterval(function() {
var e = theSecsBox.text();
var a = theMinsBox.text();
var c = theHoursBox.text();
var b = theDaysBox.text();
/** Start: Insert this code to set session Storage **/
// now save the counter values in sessionStorage
// NOTE: remove false from condition check before running in real env
if(false && sessionStorage) {
const currentValues = { nsec: e, nmin: a, nhrs: c, ndat: b };
sessionStorage.setItem(StorageKeys.counter, JSON.stringify(currentValues));
}
/** End: Insert this code to set session Storage **/
if (e == 0 && a == 0 && c == 0 && b == 0) {} else {
if (e == 0 && a == 0 && c == 0) {
theDaysBox.html(b - 1);
theHoursBox.html("23");
theMinsBox.html("59");
theSecsBox.html("59")
} else {
if (e == 0 && a == 0) {
theHoursBox.html(c - 1);
theMinsBox.html("59");
theSecsBox.html("59")
} else {
if (e == 0) {
theMinsBox.html(a - 1);
theSecsBox.html("59")
} else {
theSecsBox.html(e - 1)
}
}
}
}
}, 1000);
});
});
body {
background-color: #fff;
}
#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;
box-shadow: inset 0 1px 2px rgba(0, 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-height: 40px;
font-size: 40px;
text-align: center;
}
#clock-ticker .block .label, span.flip-top {
color: #000;
font-weight: bold;
text-align: center;
font-size: 14px;
text-transform: uppercase;
width: 88px;
line-height: 25px;
font-family: "Open Sans", Arial, sans-serif;
}
.progressbar div {
border-radius: 20px;
}
#progress_bar div {
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
我会创建类似的东西：
//<![CDATA[
/* js/external.js */
let doc, html, bod, I, SessionCounter; // for use on other loads
addEventListener('load', ()=>{
doc = document; html = doc.documentElement; bod = doc.body;
I = id=>doc.getElementById(id);
SessionCounter = function(init = 0, inc = 1, dec = 1){
if(sessionStorage.count === undefined){
sessionStorage.count = init;
}
this.count = +sessionStorage.count;
this.inc = (by = inc)=>{
this.count += by; sessionStorage.count = this.count;
return this.count;
}
this.dec = (by = dec)=>{
this.count -= by; sessionStorage.count = this.count;
return this.count;
}
}
// you can put the following on another page using a load Event - besides the end load
const dec = I('dec'), test = I('test'), inc = I('inc');
sc = new SessionCounter;
test.textContent = sc.count;
dec.onclick = ()=>{
if(sc.count > 0)test.textContent = sc.dec();
}
inc.onclick = ()=>{
test.textContent = sc.inc();
}
}); // end load
//]]>
/* css/external.css */
*{
box-sizing:border-box; padding:0; margin:0;
}
html,body{
width:100%; height:100%; background:#ccc;
}
.main{
padding:10px;
}
#inc,#dec{
width:20px;
}
#test{
display:inline-block; width:70px; background:#fff; text-align:center;
}
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<head>
<meta charset='UTF-8' /><meta name='viewport' content='width=device-width, height=device-height, initial-scale:1, user-scalable=no' />
<title>Title Here</title>
<link type='text/css' rel='stylesheet' href='css/external.css' />
<script src='js/external.js'></script>
</head>
<body>
<div class='main'>
<div>
<input id='dec' type='button' value='-' />
<div id='test'></div>
<input id='inc' type='button' value='+' />
</div>
</div>
</body>
</html>