Question

我正在寻找在html5画布中进行进度条（在我的情况下，它是游戏的生活栏）的最佳方式。

我不知道使用javascript和dom元素是否更好，或者直接在画布上绘制此栏。

我需要一个更新功能，例如myBar.updateValue(40)，我需要在不刷新所有页面或所有画布的情况下显示新栏。

你知道那样的事吗？现有的脚本？谢谢！

Answer 1

HTML / CSS非常简单：

<style>
    #progress-holder{width:400px;height:20px;background:grey}
    #progress{width:0;height:100%;background:black}
</style>
<div id="progress-holder">
    <div id="progress"></div>
</div>
<script>
    var progress = document.getElementById('progress');
    function updateValue(perc) {
        progress.style.width = perc+'%';
    }
    updateValue(40);
</script>

DEMO ：http://jsbin.com/EGAzAZEK/1/edit

使用CSS制作动画：http://jsbin.com/EGAzAZEK/3/edit

Answer 2

HTML：

<div class='progress'>
    <div class='progress-bar' data-width='//Enter a percent value here'>
        <div class='progress-bar-text'>
            Progress: <span class='data-percent'>//This is auto-generated by the script</span>
        </div>
    </div>
</div>

CSS：

html, body {
    margin: 0;
    padding: 15px;
    width: 100%;
    height: 100%;
    position: relative;
    color: #fff;
}

.progress {
    position: relative;
    width: 100%;
    height: 30px;
}
.progress-bar {
    margin-bottom: 5px;
    width: 0%;
    height: 30px;
    position: relative;
    background-color: rgb(66, 139, 202);
}
.progress-bar-text {
    position: absolute;
    top: 0px;
    width: 100%;
    text-align: center;

    /*
    Do not change the values below,
    unless you want your text to display away from the bar itself. */
    line-height: 30px;
    vertical-align: middle;
}

jQuery的：

$('.progress-bar').each(function (){    
    var datawidth = $(this).attr('data-width');

    $(this).find("span.data-percent").html(datawidth + "%");

    $(this).animate({
        width: datawidth + "%"
    }, 800);
});

Link to JSFiddle

HTML data-width属性用于跟踪应将栏设置为的百分比。根据自己的喜好改变它。

jQuery脚本适用于页面上的所有进度条（请参阅JSFiddle，因此您不必为每个新进度条复制和粘贴相同的jQuery。（只需确保保留HTML的结构，或根据自己的喜好进行更改）。

div“progress”只是一个扩展器，可以根据需要命名 - 无需更改jQuery。

编辑：如果你可以使用Javascript＆amp; HTML，不要使用画布。帆布（imho）只适用于一件事：音乐会，剧院等的座位预订。

带有更新的Javascript，HTML5（画布）进度条

2 个答案: