1.15 设置< progress >进度条的样式
实例说明
< progress >元素是 HTML5 标准草案中新增的元素之一，在默认情况下，< progress >会生成一个和系统默认样式一样的进度条。分别在 Windows 7 和 MaxOS Lion 中的显示效果如图1-28所示。
https://yqfile.alicdn.com/c1170dc6a07d5f2f35900b6097995518969ed13b.png" >
其实可以通过CSS样式来设置< progress >进度条的样式。出于一致性的考虑，在很多情况下还是想能够控制这个进度条的样式。在本实例中，以前面的实例013为基础，介绍了通过定义的CSS来控制< progress >进度条样式的过程。
具体实现
使用Dreamweaver创建一个名为“015.html”的文件，具体代码如下所示：
<html>
<head>
<meta charset="utf-8" />
<title>使用progress元素</title>
<style type="text/css">
body {
font-size:12px
}
p {
padding:0px;
margin:0px
}
.inputbtn {
border:solid 1px #ccc;
background-color:#eee;
line-height:18px;
font-size:12px
}
progress {
border-radius: 2px;
border-left: 1px #ccc solid;
border-right: 1px #ccc solid;
border-top: 1px #aaa solid;
background-color: #eee;
}
progress::-webkit-progress-bar {
background-color: #d7d7d7;
}
progress::-webkit-progress-value {
background-color: #aadd6a;
}
</style>
</head>
<body>
<p id="pTip">开始下载</p>
<progress value="0" max="100" id="proDownFile"></progress>
<input type="button" value="下载按钮"
class="inputbtn" onClick="Btn_Click();">
<script type="text/javascript">
var intValue = 0;
var intTimer;
var objPro = document.getElementById('proDownFile');
var objTip = document.getElementById('pTip');
//定时事件
function Interval_handler() {
intValue++;
objPro.value = intValue;
if (intValue >= objPro.max) {
clearInterval(intTimer);
objTip.innerHTML = "恭喜你，下载已经完成！";
} else {
objTip.innerHTML = "请耐心等待，正在下载中" + intValue + "%";
}
}
//下载按钮单击事件
function Btn_Click(){
intTimer = setInterval(Interval_handler, 100);
}
</script>
</body>
</html>
通过上述代码，设置了一个个性化的< progress >进度条，在Chrome浏览器中的效果如图1-29所示。
https://yqfile.alicdn.com/6abfae6b0a922effa79f9de85db79604b6ff82a0.png" >
时间： 2024-09-17 04:17:15