《HTML5 开发实例大全》——1.15 设置< progress >进度条的样式

最新推荐文章于 2024-06-09 09:49:42 发布

weixin_33912246

最新推荐文章于 2024-06-09 09:49:42 发布

阅读量185

点赞数

原文链接：https://yq.aliyun.com/articles/97747

版权

本节书摘来自异步社区《HTML5 开发实例大全》一书中的第1章，第1.15节,作者：张明星更多章节内容可以访问云栖社区“异步社区”公众号查看。

1.15 设置< progress >进度条的样式

33661ae208df5dd2f461a7401e3076a5bd7832a2

实例说明

< 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" >

weixin_33912246

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
《HTML5 开发实例大全》——1.15 设置< progress >进度条的样式

本节书摘来自异步社区《HTML5 开发实例大全》一书中的第1章，第1.15节,作者：张明星更多章节内容可以访问云栖社区“异步社区”公众号查看。1.15 设置< progress >进度条的样式实例说明< progress >元素是 HTML5 标准草案中新增的元素之一，在默认情况下，< progress &...
复制链接

扫一扫