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

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

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

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

和 的区别是：

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

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

标签代码：

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

样式展示：

标签代码：

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

样式展示：

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

以标签为例：

点击下载

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

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

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

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

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

html代码：

进度条

HTML

  
90%


CSS

  
80%


JavaScript

  
65%

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;}

效果图：

 欢迎三连。