首先,我们制作的这个进度条并没有后台数据作为支撑,所以是一个靠js实现的一个简单的页面。
创新互联网站建设服务商,为中小企业提供网站设计、成都做网站服务,网站设计,网站运营等一站式综合服务型公司,专业打造企业形象网站,让您在众多竞争对手中脱颖而出创新互联。
我们首先需要新建一个html5的页面,其使用的progress元素实在html5时代才出现的。
我们在新建的页面中,输入一个段落标签,一个进度条,一个button按钮。
然后,我们需要设置一下进度条显示的进度。value代表从多少开始,max代表到多少结束。我们做的是百分比形式的,应该写成这样的。
这些做好之后,我们需要书写两个小的事件,实现原理大体上是鼠标单击下载按钮,开始下载变为正在下载百分之多少,等到达到我们预设的时间后显示下载完成。
我们之前已经给p标签和progress标签分别赋予了不同的id,我们需要获取到这两个元素,并将他们赋给两个变量。
我们还要将progress的初始值设为0,当鼠标单击的时候,我们以一定的时间为周期调用写好的事件。
函数写好之后,我们在浏览器中调试,点击下载按钮之后会在300ms内完成下载时间。
HTML代码:
section class="container"
div class="progress"
span style="width: 20%;"span20%/span/span
/div
div class="progress"
span class="green" style="width: 40%;"span40%/span/span
/div
div class="progress"
span class="orange" style="width: 60%;"span60%/span/span
/div
div class="progress"
span class="red" style="width: 80%;"span80%/span/span
/div
div class="progress"
span class="blue" style="width: 100%;"span100%/span/span
/div
/section
从HTML结构中我们可以看出,类名为progress的div是整个进度条的父容器,里面的span则是当前进度,通过width来定义不同的进度值,同时定义不同的颜色类,比如orange,以便待会在CSS中进行样式渲染。
CSS代码:
.progress {
height: 20px;
background: #ebebeb;
border-left: 1px solid transparent;
border-right: 1px solid transparent;
border-radius: 10px;
}
.progress span {
position: relative;
float: left;
margin: 0 -1px;
min-width: 30px;
height: 18px;
line-height: 16px;
text-align: right;
background: #cccccc;
border: 1px solid;
border-color: #bfbfbf #b3b3b3 #9e9e9e;
border-radius: 10px;
background-image: -webkit-linear-gradient(top, #f0f0f0 0%, #dbdbdb 70%, #cccccc 100%);
background-image: -moz-linear-gradient(top, #f0f0f0 0%, #dbdbdb 70%, #cccccc 100%);
background-image: -o-linear-gradient(top, #f0f0f0 0%, #dbdbdb 70%, #cccccc 100%);
background-image: linear-gradient(to bottom, #f0f0f0 0%, #dbdbdb 70%, #cccccc 100%);
-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
}
.progress span span {
padding: 0 8px;
font-size: 11px;
font-weight: bold;
color: #404040;
color: rgba(0, 0, 0, 0.7);
text-shadow: 0 1px rgba(255, 255, 255, 0.4);
}
.progress span:before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
height: 18px;
background: url("../img/progress.png") 0 0 repeat-x;
border-radius: 10px;
}
.progress .green {
background: #85c440;
border-color: #78b337 #6ba031 #568128;
background-image: -webkit-linear-gradient(top, #b7dc8e 0%, #99ce5f 70%, #85c440 100%);
background-image: -moz-linear-gradient(top, #b7dc8e 0%, #99ce5f 70%, #85c440 100%);
background-image: -o-linear-gradient(top, #b7dc8e 0%, #99ce5f 70%, #85c440 100%);
background-image: linear-gradient(to bottom, #b7dc8e 0%, #99ce5f 70%, #85c440 100%);
}
.progress .red {
background: #db3a27;
border-color: #c73321 #b12d1e #8e2418;
background-image: -webkit-linear-gradient(top, #ea8a7e 0%, #e15a4a 70%, #db3a27 100%);
background-image: -moz-linear-gradient(top, #ea8a7e 0%, #e15a4a 70%, #db3a27 100%);
background-image: -o-linear-gradient(top, #ea8a7e 0%, #e15a4a 70%, #db3a27 100%);
background-image: linear-gradient(to bottom, #ea8a7e 0%, #e15a4a 70%, #db3a27 100%);
}
.progress .orange {
background: #f2b63c;
border-color: #f0ad24 #eba310 #c5880d;
background-image: -webkit-linear-gradient(top, #f8da9c 0%, #f5c462 70%, #f2b63c 100%);
background-image: -moz-linear-gradient(top, #f8da9c 0%, #f5c462 70%, #f2b63c 100%);
background-image: -o-linear-gradient(top, #f8da9c 0%, #f5c462 70%, #f2b63c 100%);
background-image: linear-gradient(to bottom, #f8da9c 0%, #f5c462 70%, #f2b63c 100%);
}
.progress .blue {
background: #5aaadb;
border-color: #459fd6 #3094d2 #277db2;
background-image: -webkit-linear-gradient(top, #aed5ed 0%, #7bbbe2 70%, #5aaadb 100%);
background-image: -moz-linear-gradient(top, #aed5ed 0%, #7bbbe2 70%, #5aaadb 100%);
background-image: -o-linear-gradient(top, #aed5ed 0%, #7bbbe2 70%, #5aaadb 100%);
background-image: linear-gradient(to bottom, #aed5ed 0%, #7bbbe2 70%, #5aaadb 100%);
}
首先,我们制作的这个进度条并没有后台数据作为支撑,所以是一个靠js实现的一个简单的页面。
我们首先需要新建一个html5的页面,其使用的progress元素实在html5时代才出现的。
我们在新建的页面中,输入一个段落标签,一个进度条,一个button按钮。
然后,我们需要设置一下进度条显示的进度。value代表从多少开始,max代表到多少结束。我们做的是百分比形式的,应该写成这样的。
这些做好之后,我们需要书写两个小的事件,实现原理大体上是鼠标单击下载按钮,开始下载变为正在下载百分之多少,等到达到我们预设的时间后显示下载完成。
我们之前已经给p标签和progress标签分别赋予了不同的id,我们需要获取到这两个元素,并将他们赋给两个变量。
我们还要将progress的初始值设为0,当鼠标单击的时候,我们以一定的时间为周期调用写好的事件。
函数写好之后,我们在浏览器中调试,点击下载按钮之后会在300ms内完成下载时间。
div显示度量值: span id="value"0/span%/div
meter id="meter" min="0" max="100" value="0"/meter
details
summary注释:/summary
pIE 不支持 meter 标签/p
p进度条每0.5秒钟增加1%,直至到100%,然后再重复/p
/details
script
let meter = document.getElementById('meter');
let myValue = document.getElementById('value');
setInterval(function () {
if (meter.value == 100) {
meter.value = 0;
} else {
meter.value += 1;
}
myValue.innerHTML = meter.value;
}, 500)
/script
!DOCTYPE html
html
head
meta charset="UTF-8"
titleInsert title here/title
/head
style
.jdtbox {
padding: 10px 0;
}
.jdt_dbg {
background: #fce5e5;
width: 196px;
height: 18px;
border-radius: 10px;
-webkit-border-radius: 10px;
overflow: hidden;
border-top: 1px solid #f9d1d1;
}
.jdt_mbg {
background: #f12938;
height: 18px;
width: 75%;
height: 20px;
}
/style
script type="text/javascript"
$(function() {
$(".jdt_mbg").animate({
width : "50%",
}, 1000);
});
/script
body
form action="" method="post" enctype="multipart/form-data" name="upload_form"
label选择图片文件/label
input name="imgFile" type="file" multiple="multiple" accept="image/gif, image/jpeg" /
input name="upload" type="submit" value="上传" /
/form
div class="jdtbox"
div class="jdt_dbg"
div class="jdt_mbg" style="width: ${investDetail.percent*100"/div
/div
/div
/body
/html
1、不自定义进度条的话就只能用默认进度条,默认的进度条是集合在video标签中的,这个我们无法实现不能拖动,但是可以模拟下,你可以使用让鼠标点击到视
频所在的video或者div的时候无效化,原理就是鼠标选不到进度条,自然不能拖动了。如果你是要可以控制播放和暂停的话就实现js控制,反正是跳过
video自带的控制器自己去写。
2、用个透明的层或图片把进度条盖住
分享名称:html5进度条,html5进度条标签
链接分享:https://www.cdcxhl.com/article36/phpdsg.html
成都网站建设公司_创新互联,为您提供关键词优化、网站内链、标签优化、虚拟主机、、面包屑导航
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联