Вы можете достичь этого, используя SessionStorage. Сохраните счетчик для дня, часа, минуты и секунды в SessionStorage с помощью API веб-хранилища.
https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API
Когда страница перезагрузится, прочитайте значения, установленные в sessionStorage, если найден Если нет, используйте обычные значения, извлеченные из Date ().
Вы можете запустить фрагмент стека, показанный ниже, для просмотра нормальной работы. Фрагмент стека не позволяет читать свойство 'sessionStorage' из 'Window', поскольку документ помещен в «песочницу» и отсутствует флаг «allow-same-origin».
Итак, я прокомментировал вставленный код, а также установите, будут ли условия изменяться позже при запуске кода в реальной среде. В следующем фрагменте кода: if (false && sessionStorage) вы можете запустить этот код в своем браузере, изменив условия if на: if (sessionStorage) Вы увидите, что значение счетчика сохраняется на странице refre sh.
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