Question

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

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

Answer 1

好的，既然你想要一个时间栏，我不久前就自己做了些什么。请注意，此解决方案并不是最好的，因为存在舍入错误，使得条形变得稍微过长或过短而不是根据其宽度精确地达到100％。我确信有更好的解决方案，但这就是我现在所得到的：

HTML：

#timebg{
    height: 20px;
    width: 300px;
    background: #cc0000;
}

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

CSS：

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
    }
}

使用Javascript：

MyEventsManager.on('eat:done', function(person){});

旋转器径向彩条

1 个答案: