The script does not work correctly after assigning a value to a variable, can you help?

Question

JavaScript

Hello dear forum users!
At the link: https://jsfiddle.net/xrqrbcd8/4/ there is a countdown timer (for clarity)
I post the code here:

markup

<div class="timer">
    <div class="time">
        <div class="CurPre">
            <div class="pre"></div>
            <div class="cur"></div>
        </div>
        <div class="spaceCurPreT"></div>
        <div class="CurPre">
            <div class="pre"></div>
            <div class="cur"></div>
        </div>
        <div class="del">:</div>
        <div class="CurPre">
            <div class="pre"></div>
            <div class="cur"></div>
        </div>
        <div class="spaceCurPreT"></div>
        <div class="CurPre">
            <div class="pre"></div>
            <div class="cur"></div>
        </div>
        <div class="del">:</div>
        <div class="CurPre">
            <div class="pre"></div>
            <div class="cur"></div>
        </div>
        <div class="spaceCurPreT"></div>
        <div class="CurPre">
            <div class="pre"></div>
            <div class="cur"></div>
        </div>
    </div>
</div>

Handler

var interv;
interv = setInterval(timeZ,1000); var intervTimeZ=true;
 
var YourDate = 'feb 10,2033 00:00:00';
 
var alignT=false;
var spAnim = 450;
var top = 5;
var han = Number($('.cur').height() + top);
 
var can = 1; var count; var anim = []; var y = 0;
 
function timeZ(){
    commonTime = Date.parse(YourDate)/1000;
    time = commonTime - Math.floor(new Date().getTime()/1000);
    year = String(Math.floor(time / 31536000));                             rest = time - (31536000 * year);
    month = String(Math.floor(rest / 2678400));                             rest = rest - (2678400 * month);
    day = String(Math.floor(rest / 86400));                                 rest = rest - (86400 * day);
 
    hour = String(Math.floor(rest / 3600));         rest = rest - (3600 * hour);
    min = String(Math.floor(rest / 60));
    sec = String(rest - (60 * min));
    if(hour<=9){hour='0'+hour;} if(min<=9){min='0'+min;} if(sec<=9){sec='0'+sec;}
    hour = hour.split(""),      min = min.split(""),        sec = sec.split("");
    
    $('.time > .CurPre > .cur').each(function (i,el) {
        if(i==0){ $(this).html(hour[0]); }      if(i==1){ $(this).html(hour[1]); }
        if(i==2){ $(this).html(min[0]); }       if(i==3){ $(this).html(min[1]); }
        if(i==4){ $(this).html(sec[0]); }
    });
 
    if(!alignT){
        $('.time > .CurPre > .cur').each(function (i,el) {
            if(i==5){ $(this).html(sec[1]); }
            alignT=true;
        });
    }
 
    if(sec[1]==9){
        can++;
    }
 
    count = ($('.cur').length-1)-can;
    anim = [hour[0],hour[1],min[0],min[1],sec[0],sec[1]];
 
    whichAnim();
}
 
function whichAnim(){
    y++;
    if(y==1){ animTimer1(); }
    if(y==2){ animTimer2(); y=0;}
}
function animTimer1(){
    $('.cur').each(function (i,el){
        if(i > count){
            $('.pre:eq('+i+')').text(anim[i]);
            $('.pre:eq('+i+')').animate({ marginTop : top+'px' }, spAnim, function() {
                $('.cur:eq('+i+')').animate({ marginTop : (-han*2)-top+'px' }, 0);
            });
            if(can>1){can=1;}
        }
    });
}
 
function animTimer2(){
    $('.cur').each(function (i,el){
        if(i > count){
            $('.cur:eq('+i+')').text(anim[i]);
            $('.pre:eq('+i+')').animate({ marginTop : han+(top*2)+'px' }, spAnim, function() {
                $('.pre:eq('+i+')').animate({ marginTop : -han+'px' }, 0);
                $('.cur:eq('+i+')').animate({ marginTop : top+'px' }, 0);
            });
            if(can>1){can=1;}
        }
    });
}

Styles

html, body{margin: 0px;background-color: #20262e;}
 
.timer{
    width: 210px;
    margin: 10px auto 0px auto;
    font-family: Comic Sans MS;
    font-size: 20px;
    color:  #fff;
    cursor:  default;
    text-align:  center;
    line-height: 40px;
    border-radius: 10px;
    cursor:  default;
}
 
.time{
    width: 174px;
    height: 50px;
    margin: 0px auto 0px auto;
    color: #ffffff;
    padding: 10px 0px 10px 0px;
}
 
.CurPre{
    width: 25px;
    height: 50px;
    float:  left;
    overflow:  hidden;
    margin: 0px 0px 0px 0px;
}
 
.pre,.cur{
    width: 92%;
    height: 40px;
    float: left;
    background-color: #3F51B5;
    border-radius: 3px;
    box-shadow: inset 1px 1px 3px 0px rgba(255, 255, 255, 0.5);
}
 
.pre{
    margin: -45px 0px 5px 0px;
}
.cur{
    margin: 5px 0px 0px 0px;
}
 
.del{
    width: 9px;
    float:  left;
    line-height: 47px;
    margin-left: 0px;
    text-indent: 0px;
}
 
.spaceCurPreT{
    width: 2px;
    height: 5px;
    float: left;
}

The point is that when the last plate is 0, you also need to animate the previous plate, having previously generated the corresponding number for it. In the above code, the "can" variable is responsible for this: if the second second digit is "0", then add can one, then the corresponding number (can) of plates is animated through the loop, generating the corresponding number for them, then "can" is reset to one to again only one second bar was animated. In animation or in a loop, or why, I'm doing something wrong, I just can't figure out what exactly.
If, after animating two plates, do not bring can to one, then the animation works correctly, but if I write that the variable can be brought to one, after two plates have been animated, then a glitch appears when animating the neighboring plate, namely: the animation occurs in two , or even three times faster, the figure that is generated for the plate is generally not generated according to the script (not when it is needed).
If you update the page with a timer once or several times, then when it reaches zero, the neighboring plate may not animate at all - why? I don't understand at all. After all, when the page is reloaded, the js script does not change. Why does this not happen immediately, but, firstly: with one or more page updates with a timer, and secondly: for the first time, upon reaching zero, the neighboring plate can be animated according to the script and if you wait another 10-20 seconds. then it does not animate at all when it reaches zero, how?? because the page is not reloaded, the "if" condition cannot take the abyss.
Please help someone understand what I'm doing wrong and what needs to be done in this situation?
PS: If the animation of the second plate does not occur, then refresh the page with the timer.

Answer 1

There are more than enough mistakes. Some are explained by the fact that the animation is superimposed on each other. the previous animation must be terminated with a stop statement before being applied.
The gloomy calculation of the string time value in the timeZ function can be reduced to 2-3 lines if you remember the toTimeString function

Answer 2

ksnk , Today I noticed that the timer at the link: https://jsfiddle.net/xrqrbcd8/42/ which you threw off, as I think, erroneously displays +3 hours, you can check for yourself if you drive today's date into YourDate (which would be easier in my mind to calculate it myself) then the timer shows 3 hours more than it should, I think that this is somehow connected with GMT, I tried to translate the difference in dates into UTC but it didn’t work, I rewrote it a little by adding it to the new date (var date) 3 hours: https://jsfiddle.net/zlojnaxa/xrqrbcd8/56/ I did everything right, I mean then no glitches should come out, well, except at the end of the time?