JavaWeb：HTML/CSS 实现静态动态实时进度条

JavaWeb：HTML/CSS 实现静态动态实时进度条

HTML实现静态动态实时进度条

HTML5 原生提供了两个标签 <meter>和 <progress>来实现进度条。

<meter>和 <progress>的区别是：

1、<meter>：用来显示已知范围的标量值或者分数值

2、<progress>：用来显示一项任务的完成进度，通常情况下，该元素都显示为一个进度条

<meter>标签代码：

<meter min="0" max="500" value="350"></meter>

其中，min、max、value 分别表示最小值，最大值与当前值。我们通过修改value属性，即可实现进度条的动态显示。

样式展示：

<progress >标签代码：

<progress value="22" max="100"></progress>

其中：max 属性描述这个 progress 元素所表示的任务一共需要完成多少工作量，value 属性用来指定该进度条已完成的工作量。

样式展示：

如何完成进度条的动态显示？

以<progress >标签为例：

<progress id='progress' value="0" max="100"></progress>
<button onclick="start_run(100)">点击下载</button>
<script>
function start_run(n)
{
    if(n==0){alert("下载完成")}
    var progress1=document.getElementById("progress")
    n=n-1
    cur_task=100-n
    progress1.value=cur_task
    setTimeout("start_run("+n+")",100)
    
}
</script>

嵌套函数，即可完成进度条的动态显示。

setTimeout() 是属于 window 的方法，该方法用于在指定的毫秒数后调用函数或计算表达式。

语法格式可以是以下两种：

setTimeout(要执行的代码, 等待的毫秒数)
setTimeout(JavaScript 函数, 等待的毫秒数)

CSS实现静态动态实时进度条

html代码：

<h1>进度条</h1>

<p>HTML</p>
<div class="container">
  <div class="skills html">90%</div>
</div>

<p>CSS</p>
<div class="container">
  <div class="skills css">80%</div>
</div>

<p>JavaScript</p>
<div class="container">
  <div class="skills js">65%</div>
</div>

css代码，要放在style里：

.container {
  width: 100%;
  background-color: #ddd;
}

.skills {
  text-align: right;
  padding-right: 20px;
  line-height: 40px;
  color: white;
}

.html {width: 90%; background-color: #4CAF50;}
.css {width: 80%; background-color: #2196F3;}
.js {width: 65%; background-color: #f44336;}

效果图：

欢迎三连。