0


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

效果图:

欢迎三连。

标签: html

本文转载自: https://blog.csdn.net/m0_52625549/article/details/124581027
版权归原作者 浩栋丶 所有, 如有侵权,请联系我们删除。

“JavaWeb:HTML/CSS 实现静态动态实时进度条”的评论:

还没有评论