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

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-11-18 02:09:15

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

《HTML5 开发实例大全》——导读

前言 从HTML 5标准被推出以来,经过几年的探索和发展,在浏览器公司的努力下,到本书截稿为止,HTML 5已经成为新一代网页技术的标准.目前已经有众多浏览器支持HTML 5的新功能,并且Android和iOS等智能手机平台也支持HTML 5. 从技术角度而言,HTML 5有两大特点:首先,强化了 Web 网页的表现性能:其次,追加了本地数据库等 Web 应用的功能.广义论及HTML 5时,实际指的是包括HTML.CSS和JavaScript在内的一套技术组合.它希望能够减少浏览器对于需要插件的

《HTML5 开发实例大全》——第1章 千里之行 始于足下——基本元素实战1.1 一个基本的HTML 5页面

第1章 千里之行 始于足下--基本元素实战 在全新的HTML 5中,有很多新的标记元素,通过这些新的标记元素可以实现传统HTML标记语言所不能实现的功能.另外在本章的内容中,还会引领读者一起重温HTML 5传统页面元素的使用技巧,为读者步入本书后面知识的学习打下基础. 1.1 一个基本的HTML 5页面 HTML5 开发实例大全 本实例的功能是编写一段基本的HTML 5程序,让读者体会HTML 5的基本语法.并体会HTML 5在哪一种浏览器中可以正常运行. 具体实现 使用Dreamweaver创

《HTML5 开发实例大全》——1.13 使用&lt; progress &gt;标记元素实现进度条效果

1.13 使用< progress >标记元素实现进度条效果 实例说明 在全新HTML 5中,可以使用< progress >标记元素实现进度条效果.当页面在与用户进行数据交互时,为了增强用户的UI体验,通过进度条效果显示在页面中的各种进度状态.< progress >元素是HTML 5中新增的状态交互元素,用来表示页面中的某个任务完成的进度.例如,我们在下载一个文件时,文件下载到本地的进度值,可以通过该元素动态展示在页面中.展示进度的方式既可以使用整数,也可以使用百分

《HTML5 开发实例大全》——1.4 使用CSS修饰HTML 5页面

1.4 使用CSS修饰HTML 5页面 实例说明 我们知道,CSS能够修饰传统的HTML页面.其实全新的HTML 5也可以用CSS进行修饰,这样将展现给我们一个更加绚丽的页面效果.本实例的目的是编写一段基本的HTML 5程序,然后使用CSS进行修饰. 其实在支持HTML 5新元素的浏览器中,使用CSS修饰各个新增标记元素的方法十分简单,可以对任意一个元素应用CSS(包括直接设置或引入CSS文件).在默认情况下,CSS假设元素的"display"属性是"inline"

《HTML5 开发实例大全》——1.21 在网页中突出显示某些文字

1.21 在网页中突出显示某些文字 https://yqfile.alicdn.com/3a46b22148d673e5df7bfc45f9fb868a5efa8dde.png" > 实例说明 在HTML页面中,经常需要展示的一段文章或文字称为文本内容.为了使文本内容更加形象.生动,需要增加一些特殊功能的元素,用于突出文本间的层次关系或标为重点,我们将这样的元素称为文本层次语义标记. 在HTML 5中,通过元素< time >.< mark >和< cite

《HTML5 开发实例大全》——1.23 在网页中显示一幅图片

1.23 在网页中显示一幅图片 实例说明 在HTML 5页面中,除了显示文档或字符外,还经常需要放入一些其他元素,例如图片< img >.页面< iframe >和多媒体< object >等.这些元素对于整个DOM文档来说,属于嵌入内容.其中< img >元素的功能是在页面中导入一幅图像,它是页面开发中使用较为频繁的一个元素.在HTML 5中,该元素的"border"."align"."hspace&quo

《HTML5 开发实例大全》——1.18 通过JavaScript脚本获取并显示文本框的内容

1.18 通过JavaScript脚本获取并显示文本框的内容 实例说明 在HTML 5应用中,为了增加页面的互动性,需要对文档编写客户端脚本,最常用的语言是JavaScript.通过编写客户端的脚本语言,可以实现对页面文档进行验证表单.变更内容等操作. 在页面文档中,有如下两个用于标志脚本的标签. (1)< script >元素:既可以包含脚本语言,也可以通过src属性导入一个脚本文件:同时选择元素的必选属性type与MIME类型. (2)< noscript >元素:是一个检测工

《HTML5 开发实例大全》——1.7 实现下拉弹出效果

1.7 实现下拉弹出效果 实例说明 在本实例中,首先在页面中显示一行提问文本"需要在线咨询吗?".当单击左侧的小三角符号后,将在下方无刷新弹出一个下拉区域,在里面显示文本"非常"需要.上述描述效果在很多动态网站中比较常见,原来一般都是用JavaScript技术或Ajax技术实现的.但现在只需使用HTML 5中的< details >标记元素即可实现完全同样的功能. 具体实现 使用Dreamweaver创建一个名为"007.html"的

《HTML5 开发实例大全》——1.33 实现拖曳和拖放处理

1.33 实现拖曳和拖放处理 实例说明 在HTML 5 中,可以使用如下对象和属性实现拖曳处理. DataTransfer 对象:拖曳对象用来传递的媒介,使用一般为Event.dataTransfer. draggable 属性:就是标签元素要设置draggable=true,否则不会有效果,例如: <divtitle="拖曳我"draggable="true">列表1</div> 上述对象和属性支持如下鼠标事件和方法. ondragstar