微调器径向颜色条

Question

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

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

Answer 1

好吧，既然你想要一个时间栏，我前段时间自己做了一些东西。请注意，此解决方案并不是最好的，因为存在舍入误差，这会使条形图变得稍微太长或太短，而不是根据其宽度达到精确的 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
    }
}