Всем привет. Есть не большая проблема с анимацией счетчика. Если вы новый посетитель страницы, то вроде бы все нормально, но, если вы закроете страницу и через какое-то время откроете её снова, анимация и само число немного сбивается. Потому что то число, которое хранится у вас на компьютере, уже давно изменилось на сервере сайта.
Как можно оптимизировать данный код, чтобы анимация доходила до максимального числа, и дальше увеличивалась по правилам скрипта?
<!DOCTYPE html>
<html>
<head>
<style>
.count {
width: 100px;
height: 40px;
padding: 20px;
background: #ccc;
font: bold 35px Arial;
color: red;
text-align: center;
}
</style>
</head>
<body>
<div class="count"></div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script>
var counttext = $( '.count' );
var startTime = 1557221045;
var startNumber = 0;
var timer = setInterval(function() {
var currentTime = Math.floor(new Date() / 1000);
var secondsSinceStart = currentTime - startTime;
var CNumber = Math.floor(secondsSinceStart / 5);
counttext.text(CNumber);
localStorage.setItem('count', CNumber);
}, 1000);
$({numberValue: 0}).animate({numberValue: localStorage.getItem('count')},{
duration: 8000,
easing: 'linear',
step: function() {
$('.count').text(Math.ceil(this.numberValue));
}
});
</script>
</body>
</html>
Я пробовал через функцию анимации, но он уходит в вечный цикл, дальше уже голова не варит(
Вот демо:
https://my-dev.roffdaniel.com/count.php 
Простой
