具有圆形边框动画的倒计时计时器在页面刷新时保留值

问题描述 投票:0回答:1

我用圆形边框动画创建了倒数计时器。当计时器增加时,圈子边界填充。即使在页面刷新时也会保留计时器值。唯一的问题是在圈子的页面刷新边界怪异地动画然后显示正确。

你可以在这里查看演示https://codepen.io/parag-rohankar/pen/qMomMG

//HTML Code 
    <div class="item html">
    <h2></h2>
    <svg width="60" height="60" xmlns="http://www.w3.org/2000/svg" class="dummy_circle">
     <g>
      <circle id="circle"  r="26" cy="30" cx="30" stroke-width="2" stroke ='#e8eff7' fill="none"/>
     </g>
    </svg>      

    <svg width="60" height="60" xmlns="http://www.w3.org/2000/svg" class="timer_circle">
     <g>
      <circle id="circle" class="circle_animation" r="26" cy="30" cx="30" stroke-width="2" stroke ='#ff0000' fill="none"/>
     </g>
    </svg>
</div>

// JS

    var time = 60;
    var initialOffset = 164;
    var i;
    var timer_content;
    var rotation_class;
    var border;




    //Initial content of timer for page load and on page refresh.
    localStorage.getItem("local_i")===null? timer_content='Now': timer_content=localStorage.getItem("local_i"); 
    $('h2').text(timer_content);

    //Check local storage if it has contdown value if yes then take it from local storage else start from 1;
    localStorage.getItem("local_i")===null? i=0: i=localStorage.getItem("local_i");

    var interval = setInterval(function() {
        if (i == time) { 
            localStorage.removeItem("local_i");
            localStorage.removeItem("local_border");    
            clearInterval(interval);
            return;
        }       
        localStorage.setItem("local_i", i);
        localStorage.setItem("local_border",initialOffset-((i+1)*(initialOffset/time)));

        //Dispaly couter value(if in local storage get from dispaly from it else dispaly normal calculated value)
        localStorage.getItem("local_i")===null ? $('h2').text(i):$('h2').text(localStorage.getItem("local_i"))

        localStorage.getItem("local_border")===null?border=initialOffset-((i+1)*(initialOffset/time)):border=localStorage.getItem("local_border")
        //border=initialOffset-((i+1)*(initialOffset/time));
        $('.circle_animation').css('stroke-dashoffset', border);

    i++; 

}, 1000); 

/// css代码

    .item {
        position: relative;
        float: left;
    }

    /*.dummy_circle { width: 132px; height:132px; border-radius:50%; border:8px solid #000000; position:absolute; top:5px; left:7px;   z-index:1}*/

    .item h2 {
        text-align:center;
        position: absolute;
        line-height: 20px;
        width: 100%;
    }

    svg.timer_circle {
        z-index:2;
        position:relative;
    -webkit-transform: rotate(-90deg); transform: rotate(-90deg);           
    }
    svg.dummy_circle { position: absolute; left: 0; top:0; z-index: 1}
    .circle_animation {
      stroke-dasharray: 164; /* this value is the pixel circumference of the circle */
      stroke-dashoffset: 164;
      transition: all 1s linear;
      stroke: #ff0000;

    }   

在页面刷新时,我希望边框从其当前位置开始填充。有人可以为此提供解决方案。

javascript jquery
1个回答
0
投票

localStorage.getItem()返回一个字符串,您在计算中使用该返回值而不将其转换为数字。这会导致不可预测的行为,因为将字符串添加到数字很少是您期望和想要的。

专业提示:使用javascript的类型风格(即打字稿或流程,或purescript甚至榆树)。

console.log(3 + "12")
© www.soinside.com 2019 - 2024. All rights reserved.