微调器径向颜色条

Spinner radial color bar

本文关键字：颜色      更新时间：2023-09-26

我想创建这样的视频效果：http://youtube.com/watch?v=bEVjLfq9lvk

我想创建微调器颜色，文本在中心，当颜色栏完全完成（100%）添加一些事件。我认为使用插件更简单，但我不是任何人，它应该与Ionic一起工作。如何为我的应用程序创建此模块？

好吧，既然你想有一个时间条，我前段时间自己做了一些东西。请注意，这种解决方案并不是最好的，因为存在舍入误差，这会使杆变得稍微太长或太短，而不是根据其宽度精确地达到100%。我相信有更好的解决方案，但这就是我现在得到的：

https://jsfiddle.net/a6wogez6/1/

HTML:

<div id="timebg">
</div>
<div id="time">
</div>

CSS：

#timebg{
    height: 20px;
    width: 300px;
    background: #cc0000;
}
#time{
    margin-top: -20px;
    height: 20px;
    width: 0px;
    background: #00cc00;
}

Javascript：

var timerrunning;
var width;
var currentwidth;
var intervaltime;
function init() {    
    timerrunning = false;
    width = document.getElementById("timebg").offsetWidth;
    currentwidth = 0;
    // interval steps to increase the timing bar by 3px
    // 5 Seconds/(width of the bar) * 3 for 3px per step
    intervaltime = Math.floor(5000/Math.floor(width))*3;
}

function gameStart(){
    // your game starts, you start the timer
    startTimer();
    // timer times out after 5 seconds, the bar will be at 100%
    timeout = setTimeout(function () {
        stopTimer();
        // do something here like gameOver()
      }, 5000);
}
// function which starts the timer
function startTimer(){
    timerrunning = true;
    timer = setInterval(function(){loop()}, intervaltime);
}
// function which stops the timer and your timeout = level completed before time ran out
function stopTimer(){
    timerrunning = false;
    clearInterval(timer);
}
// the function which increases the width of the timing bar
function loop(){
    currentwidth = currentwidth + 3;
    css( '#time', 'width', currentwidth + 'px');
}
// some css selecting function I found somewhere...
function css(selector, property, value) {
    for (var i=0; i<document.styleSheets.length;i++) {//Loop through all styles
        //Try add rule
        try { document.styleSheets[i].insertRule(selector+ ' {'+property+':'+value+'}', document.styleSheets[i].cssRules.length);
        } catch(err) {try { document.styleSheets[i].addRule(selector, property+':'+value);} catch(err) {}}//IE
    }
}
相关文章：