一个简单的进度条显示功能-CSDN博客

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>进度条</title>
</head>

<style type="text/css">
#bar{
    animation:move 2s;
    text-align:center;
    height:50px;
    line-height:50px;
    background:#6caf00;
}

@keyframes move{
    0%{
        width:0;
    }
    100%{
        width:100%;
    }
}
</style>

<script type="text/javascript">
function $(id){
    return document.getElementById(id);
}

function ss(){
    var a = $("a").value;
    var b = $("b").value;
    var c = $("c").value;
    var d = $("d").value;
    var s = ((d - c) / (b - a)).toFixed(4)*100 + "%";
    $("bar").style.width = s;
    $("bar").innerHTML = s;
}
</script>    

<body>
    <progress id ="pro" value ="0" max = "100"></progress>
</body>
<script type="text/javascript">
    window.onload = function(){
        var pro = document.getElementById("pro");
        setInterval(function(e){
            if(pro.value != 100) pro.value++;
            else pro.value = 0;
        },10);
    }      
</script>

</html>