正文

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

IP云
IP云V管理员/2 阅读
09/26
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

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 &lt&semi;progress&gt&semi; 标签

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

  2. 【微信小程序项目实践总结】30分钟从陌生到熟悉 web app 、native app、hybrid app比较 30分钟ES6从陌生到熟悉 【原创】浅谈内存泄露 HTML5 五子棋 - JS&sol;Canvas 游戏 meta 详解，html5 meta 标签日常设置 C&num;中回滚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新标签的解决方法&lpar;使用html5shiv&rpar;

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

  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. Linux 多线程可重入函数

    Reentrant和Thread-safe 在单线程程序中,整个程序都是顺序执行的,一个函数在同一时刻只能被一个函数调用,但在多线程中,由于并发性,一个函数可能同时被多个函数调用,此时这个函数就成了临 ...

  2. jgroup 概述--官方文档

    原文地址:http://www.jgroups.org/manual/html/ch01.html# Chapter 1. Overview 1.1. Channel 1.2. Building Bl ...

  3. 项目打包 tomcat部署

    IDE: IDEA 1.项目maven管理先执行 clean,再执行 compile 2.如果编译compile不成功,则将 C:\Users\Administrator\.m2\repository ...

  4. BZOJ第7页养成计划

    嗯,用这篇博客当一个目录,方便自己和学弟(妹?)们查阅.不定期更新. BZOJ1600   BZOJ1601   BZOJ1602   BZOJ1603   BZOJ1604   BZOJ1605   ...

  5. node上传文件并在网页中展示

    一.需求 1.当用户请求http://domain/start时,可以看到一个欢迎页面,页面上有一个文件上传的表单. 2.用户可以选择一个图片并提交表单,随后文件将被上传到http://domain/ ...

  6. TestFlight的使用--再也不用担心环境打错了

    转赞请注明出处:http://www.cnblogs.com/zhanggui/p/7039651.html 一.前言 在iOS开发过程中,难免会遇到各种Bug.因此你会去解决所有的Bug,然后提交到 ...

  7. 1333：【例2-2】Blah数集

    1333:[例2-2]Blah数集 注意是数组,答案数组中不能有重复数字 q数组是存储答案的 代码: #include<iostream> #include<cstdio> # ...

  8. Json转换工具

    import java.util.List; import com.fasterxml.jackson.core.JsonProcessingException; import com.fasterx ...

  9. CSS盒子模型之CSS3可伸缩框属性（Flexible Box）

    CSS盒子模型(下) 一．CSS3可伸缩框(Flexible Box) 可伸缩框属性(Flexible Box)是css3新添加的盒子模型属性,有人称之为弹性盒模型,它的出现打破了我们经常使用的浮动布 ...

  10. Asky极简教程：零基础1小时学编程，已更新前8节

    Asky极简架构 开源Asky极简架构.超轻量级.高并发.水平扩展.微服务架构 <Asky极简教程:零基础1小时学编程>开源教程 零基础入门,从零开始全程演示,如何开发一个大型互联网系统, ...