Question

你好我想在这个脚本中进行一些修改，我想在这里放一个计时器，或者你可以说我想要这样的脚本

这是原始代码 -

<script type="text/javascript">
    $(document).ready(function(){
        $('#sample_goal').goalProgress({
            goalAmount: 600,
            currentAmount: 200,
            textBefore: '$',
            textAfter: ' raised.'

        });
    });
</script>

我想在此

中添加两个函数

它增加了号码。经过一段时间间隔之后 currentAmount：200， incrementAmount：20， incrmentTimer：2小时，

所以它会像200,220（两小时后），240（接下来两个小时）等...

http://boogallery.com/soft/

请帮助

Answer 1

<强>更新

http://jsfiddle.net/fs9gc3p5/4/

<强> CSS：

#progressBar {
    width: 600px;
    height: 50px;
    background-color: #eee;
}
#progressBar div {
    height: 100%;
    line-height:50px;
    color: #fff;
    text-align: left;
    font-size: 28px;
    width: 0;
    background-color: #ff008c;
    padding:0 0 0 10px;
    font-weight: 700;
    font-family:'helvetica neue', helvetica, arial, sans-serif;
}

<强> HTML：

<div id="progressBar"><div></div></div>

<强> JQ：

var goalAmount = 600;
var startAmount = 200;
var incrementAmount = 20;

var startDate = new Date('2014-11-29T01:00:00');

function progress(percent, $element) {

    $element = $('#progressBar');

    //calculate the difference in hours.
    var currDate = new Date();
    var h = Math.abs(currDate - startDate) / 36e5;
    h = parseInt(h);

    //calculated interval: every two hours increases the amount of 20    
    var interval = h;
    if (interval % 2) h--;
    interval = parseInt(interval / 2);

    var newAmount = startAmount + incrementAmount * interval;

    // h  | interval | newAmount
    // ---------------------------
    // 0  |    0     |    0
    // ---------------------------
    // 1  |    0     |    0
    // ---------------------------
    // 2  |    1     |   220
    // ---------------------------
    // 3  |    1     |   220
    // ---------------------------
    // 4  |    2     |   240
    // ---------------------------
    // 5  |    2     |   240
    // ---------------------------
    // 6  |    3     |   260
    // ---------------------------
    // 7  |    3     |   260
    // ---------------------------
    // 8  |    4     |   280
    // ---------------------------
    // 9  |    4     |   280
    // ---------------------------
    // 10 |    5     |   300
    // ---------------------------
    // 11 |    5     |   300


    //calculate procent of progress bar
    var percent = newAmount * 100 / goalAmount;

    //draw
    var progressBarWidth = percent * $element.width() / 100;
    $element.find('div').animate({
        width: progressBarWidth
    }, 500).html('$' + newAmount + " raised.");
}

progress();

需要修改进度条

1 个答案: