Question

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

您可以在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;

    }

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

Answer 1

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

提示：使用javascript的打字风格（例如，打字稿或流，或者purescript甚至是elm）。

console.log(3 + "12")

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

1 个答案: