如何在html中创建一个进度条

1、新建一个html文档，如图所示

2、在body里定义一个section标签，如图所示

3、在section标签里创建p标签，如图所示

4、在p标签里输入文字，百分比进度

5、在文字后面输入

<progress id="progress" max="100"><span>0</span>%</progress>

如图所示

1、建立js脚本，在下边输入script，如图所示

2、在script标签里输入

function click1(){}

如图所示

3、在{}里输入

    var progress = document.getElementById('progress');

    progress.getElementsByTagName('span')[0].textContent ="0";

    for(var i=0;i<=100;i++)

        updateProgress(i);

如图所示

4、然后再在script标签里输入

function updateProgress(newValue){}

如图所示

5、然后在{}里输入

    var progress = document.getElementById('progress');

    progress.value = newValue;

    progress.getElementsByTagName('span')[0].textContent = newValue;

如图所示

6、最后按f12预览就可以看到进度条了