Js操控----HTML5 <progress> 标签

简单模拟下下载进度跑条

 <h4>加载进度</h4>
<input type="button" value="下载" onclick="DownloadStart();" />
<progress id="Download" value="" max="100"></progress> <script>
function DownloadStart() {
alert("加载下载")
var Down = document.getElementById("Download");
var i = 0;
var DownSetTime;
DownSetTime = setInterval(function () {
i += 10
Down.value = i;
if (i == 100) {
clearInterval(DownSetTime);
alert("加载完成")
}
}, 500)
} </script>

当然了,真正的进度是肯定不能这样写的,因为实际上目前还没有一种方法可以判断进度的进程,因此只能让跑条一直跑,或者跑到一个顶峰然后停着等下载完成,直接跳了100%。

例一:进度条跑到90,然后等,等服务器或者其他地方传进来一个值,然后再一下子到100.

 <h4>加载进度</h4>
<input type="button" value="加载" onclick="LoadStart();" />
<progress id="Load" value="0" max="100"></progress> <script>
function LoadStart() {
var Complete = 0;//加载完成与否,初始为0,完成为1
var Load = document.getElementById("Load");//获取进度条
var i = 0;//声明跑条的初始值 //加载进度跑条
LoadSetTime = setInterval(function () {
i += 10;//每500毫米跑10份
Load.value = i;
if (i >= 90) {//当跑条到90时,就不跑了,停止
clearInterval(LoadSetTime);
return;
}
}, 500); //加载完成与否
GetData = setInterval(function () {
if (Complete == 1) {//当加载完成,也就等于1的时候
Load.value = 100;//跑条完成,到100
alert("加载完成");
clearInterval(GetData);//加载完成的计时器清除加载完成与否计时器
clearInterval(LoadSetTime);//加载完成的计时器清除加载进度跑条计时器
}
}); //从服务器获得加载内容完成与否的值,当然了你可以定义这个值从任何地方来,比如页面加载完成,动画加载完成,图片加载完成,一个动作执行完毕等等都可以,具体看你需要用在的地方
$.post(URL, function (data) {
if (parseInt(data) == 1) {
Complete = 1;
}
})
}
</script>

例二:进度条一直跑,然后等,等服务器或者其他地方传进来一个值,然后再一下子到100以后清除所有计时器,加载完成

     <h4>加载进度</h4>
<input type="button" value="加载" onclick="LoadStart();" />
<progress id="Load" value="0" max="100"></progress> <script>
function LoadStart() {
var Complete = 0;//加载完成与否,初始为0,完成为1
var Load = document.getElementById("Load");//获取进度条
var i = 0;//声明跑条的初始值 //加载进度跑条
LoadSetTime = setInterval(function () {
i += 10;//每500毫米跑10份
Load.value = i;
if (i == 100) {
i = 0;
}
}, 500); //加载完成与否
GetData = setInterval(function () {
if (Complete == 1) {//当加载完成,也就等于1的时候
Load.value = 100;//跑条完成,到100
clearInterval(GetData);//加载完成的计时器清除加载完成与否计时器
clearInterval(LoadSetTime);//加载完成的计时器清除加载进度跑条计时器
}
}); //从服务器获得加载内容完成与否的值,当然了你可以定义这个值从任何地方来,比如页面加载完成,动画加载完成,图片加载完成,一个动作执行完毕等等都可以,具体看你需要用在的地方
$.post(URL, function (data) {
if (parseInt(data) == 1) {
Complete = 1;
}
})
}
</script>

ok,简单介绍下js操控“progress”标签,具体看你用在什么地方。

作者:leona

原文链接:http://www.cnblogs.com/leona-d/p/5950280.html

版权声明:本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文链接

JavaScript----Js操控-HTML5 <progress> 标签的更多相关文章

  1. JavaScript学习笔记-Js操控HTML5 <progress> 标签

    Js操控----HTML5 <progress> 标签 简单模拟下下载进度跑条 <h4>加载进度</h4> <input type="button& ...

  2. 【微信小程序项目实践总结】30分钟从陌生到熟悉 web app 、native app、hybrid app比较 30分钟ES6从陌生到熟悉 【原创】浅谈内存泄露 HTML5 五子棋 - JS/Canvas 游戏 meta 详解,html5 meta 标签日常设置 C#中回滚TransactionScope的使用方法和原理

    [微信小程序项目实践总结]30分钟从陌生到熟悉 前言 我们之前对小程序做了基本学习: 1. 微信小程序开发07-列表页面怎么做 2. 微信小程序开发06-一个业务页面的完成 3. 微信小程序开发05- ...

  3. HTML5每日一练之progress标签的应用

    progress标签:从名字上来看,估计大家也能猜到这个标签是什么标签了,没错,他是一个进度条.在HTML5中我们终于可以不用模拟了. <progress id="W3Cfuns_pr ...

  4. html5 video标签屏蔽右键视频另存为的js代码-HTML5教程

    点评:html5 video标签本身有下载功能但是在video区域内,点击右键可以将“视频另存为”下面是屏蔽右键视频另存为的js代码,有此需求的朋友不要错过   做HTML5的video标签,本身我们 ...

  5. ios加载html5 audio标签用js无法自动播放

    html5 audio标签在ios 微信浏览器中是无法自动播放的,最近在做一个小的项目遇到这个问题,安卓和pc都是正常的,唯独ios不行,查阅了很多资料,找到了以下方法,也许不是最好用的方法,如果有更 ...

  6. 让ie浏览器支持html5新标签的解决方法(使用html5shiv)

    没估计错的话旧版浏览器都是不识别这些新增的标签所以都是用行内元素来处理解决的,所以,有一个解决办法的突破口就是让它变成块状元素就不会处于同一行了,这样在新旧浏览器都是可以显示同样的效果,再者就是让浏览 ...

  7. 解决html5中标签出现的不兼容的问题

    HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单. HTML5的新标签元素有: <header&g ...

  8. 【HTML5】如何处理HTML5新标签的浏览器兼容版问题

    HTML5规范毕竟是刚刚才定义完成的规范,还有一些浏览器并不能支持其中的新标签和新属性,尤其是IE8及以下版本浏览器.以下介绍一些在页面中使用HTML5新标签的实践方法,目的是让HTML5中的新标签在 ...

  9. HTML语义化:HTML5新标签——template

    一.前言 当我们使用String-base的模板引擎(如Handlebars.js等)时,要么就通过外部文件存放模板文本,需要时再通过XHR或script标签加载进来:要么通过<script t ...

随机推荐

  1. table tr foreach td 换行

    @{ ;} <table style=" class="sy_table"> <tr> @foreach (DataRow dr in (View ...

  2. gulp安装说明

    1.安装node-v6.3.0-x64,安装成功后再点击node-v6.3.0-x64卸载(点击remove). 2.安装node-v4.4.7-x64. 3.打开cmd命令行,输入node -v,查 ...

  3. SharePoint 2013 图文开发系列之自定义字段

    SharePoint使用的优势,就在于开箱即用.快速搭建,SharePoint自身为我们提供了很多字段类型,已经很丰富了.但是,在实际应用中,我们还需要一些功能特殊的字段,下面,我们简单介绍下字段的开 ...

  4. Jquery——简单的视差滚动效果,兼容PC移动端

    $(function(){     $(window).scroll(function(){         var top=$(this).scrollTop();        $(". ...

  5. AlertDialog的六种创建方式

    AlertDialog的六种创建方式 创建AlertDialog的步骤: 1.创建AlertDialog.Builder对象 2.调用Builder对象的setTitle方法设置标题,setIcon方 ...

  6. 关于watir-webdriver中文乱码问题

    require 'watir-webdriver' require 'iconv' cov = Iconv.new( 'gbk', 'utf-8') b = Watir::Browser.new b. ...

  7. AEAI Portal V3.5.4升级说明,门户集成平台

    1 总体说明 本次升级是AEAI Portal的一次重要升级,主要扩展了开发社区(论坛).移动门户功能,同时修正一些功能BUG等,具体内容如下: 2 升级内容 功能扩展: 扩展开发社区导航 扩展移动门 ...

  8. 八爪鱼招标网的百度权重升为2了,独立IP也从0快速发展为1000

      自八爪鱼招标网上线以来,本着以客户一切利益为出发点,坚持提供国内首个免费招标信息平台为目标,经过各位同事不断地努力,不断收集客户各种各样的招标.采购实际需求,与政府.事业单位及中小型企业一对一的沟 ...

  9. Build 2015 Beijing & Windows 10 China Geek Challenge

    6月5日,借着Build 2015在北京召开分会的东风,参加了这次由微软中国举办的Windows 10中国开发者极客挑战赛. 白天是Build 2015课程,学习了Windows 10最新的技术,包括 ...

  10. 关于linux,我们应该学什么?

    为了系统地学习一下linux相关知识,我花了三天的时间看完了那本经典的<鸟哥的linux私房菜>.所谓的经典必然是有其过人之处,而看完这本书之后,我毫无疑问地加入了强烈推荐这本书的行列. ...