本文共 1855 字,大约阅读时间需要 6 分钟。
进度条标记
示例:<progress class="processbar" id="processbar" max="100" value="5"></progress><label id="processvalue"></label>
属性
max 进度条最大值
value 进度条当前值
position 只读属性,value/max 这个值算出来会有很多小数点,需要取整数
样式: 进度条样式,FF EDGE CHROME 都不一样,是个灾难
边框 border:{1px solid gold;} // 这个容易理解,和其它元素边框一样
背景色:background-color:{white;}// 通用设置
以下是不同浏览器设定
color: gold; // 背景色(已经完成的进度) IE的高版本 progress::-moz-progress-bar { background: gold; }// 背景色(已经完成的进度) 火狐 progress::-webkit-progress-bar { background: white; }// 背景色(整个进度条的背景) 谷歌
progress::-webkit-progress-value { background: gold; }// 背景色(已经完成的进度) 谷歌
一个简单的示例
1.样式
.processbar {
height: 30px; // 进度条高度 width: 30%; // 进度条宽度 border: 4px solid gold; // 进度条边框 background-color: red; // 整个进度条背景色 color: black; // 已经完成的进度 IE高版本(10,11) }progress::-webkit-progress-bar {
background-color: red; // 整个进度条的背景 谷歌 }progress::-webkit-progress-value {
background-color: black; // 已经完成的进度 谷歌 }progress::-moz-progress-bar {
background-color: black; // 已经完成的进度 火狐 }2.标记
// 进度条
<progress class="processbar" id="processbar" max="100" value="5"></progress><label id="processvalue"></label>
// 重置
<input type="button" name="" value="重来一次" οnclick="resetprocess();" />3.脚本
<script>
stepprocessbar();
// 进度条增长 function stepprocessbar() { var pb = document.getElementById("processbar"); pb.value = pb.value + 1;// 进度显示label
var processlabel = document.getElementById("processvalue"); processlabel.innerText= pb.value + '%'; processlabel.textContent = pb.value + '%';;// FF 不支持innerTextif (pb.value < 100) {
setTimeout(function () { stepprocessbar(); }, 50) } } // 重置进度条 function resetprocess() { var pb = document.getElementById("processbar"); if (pb.value != 100) return; document.getElementById("processbar").value = 0; stepprocessbar(); }</script>
转载地址:https://blog.csdn.net/awj321000/article/details/51188635 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!