进度条加载器

实线效果如图:


进度条加载器_第1张图片

实现过程:
q5.html





Insert title here





    
游戏加载进度0.00%...

q5.js

var a = 0, b = 60, c = b / 12;

function show() {
    if (document.getElementById("inside").offsetWidth < 1200) {
        a += c;
        var str = a + "";
        if (str.indexOf(".") == -1) {
            str += ".00";
        } else {
            str = str.substring(0, indexOf(".") + 3);
        }
        document.getElementById("inside").style.width = document
                .getElementById("inside").offsetWidth
                + b + "px";
        document.getElementById("tip").innerHTML = "游戏加载进度" + str + "%...";
    } else {
        document.getElementById("inside").style.width = 1200 + "px";
        stop();
    }
}

var timer;
function scr() {
    timer = window.setInterval(show, 800);
}

function stop() {
    window.clearInterval(timer);
    alert("加载完毕");
}

你可能感兴趣的:(进度条加载器)