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

效果图:

JavaWeb:HTML/CSS 实现静态动态实时进度条_第1张图片

 欢迎三连。

你可能感兴趣的