我用圆形边框动画创建了倒数计时器。当计时器增加时,圈子边界填充。即使在页面刷新时也会保留计时器值。唯一的问题是在圈子的页面刷新边界怪异地动画然后显示正确。
你可以在这里查看演示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;
}
在页面刷新时,我希望边框从其当前位置开始填充。有人可以为此提供解决方案。
localStorage.getItem()
返回一个字符串,您在计算中使用该返回值而不将其转换为数字。这会导致不可预测的行为,因为将字符串添加到数字很少是您期望和想要的。
专业提示:使用javascript的类型风格(即打字稿或流程,或purescript甚至榆树)。
console.log(3 + "12")