JavaScript----Js操控-HTML5 <progress> 标签
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
JavaScript----Js操控-HTML5 <progress> 标签的更多相关文章
- JavaScript学习笔记-Js操控HTML5 <progress> 标签
Js操控----HTML5 <progress> 标签 简单模拟下下载进度跑条 <h4>加载进度</h4> <input type="button& ...
- 【微信小程序项目实践总结】30分钟从陌生到熟悉 web app 、native app、hybrid app比较 30分钟ES6从陌生到熟悉 【原创】浅谈内存泄露 HTML5 五子棋 - JS/Canvas 游戏 meta 详解,html5 meta 标签日常设置 C#中回滚TransactionScope的使用方法和原理
[微信小程序项目实践总结]30分钟从陌生到熟悉 前言 我们之前对小程序做了基本学习: 1. 微信小程序开发07-列表页面怎么做 2. 微信小程序开发06-一个业务页面的完成 3. 微信小程序开发05- ...
- HTML5每日一练之progress标签的应用
progress标签:从名字上来看,估计大家也能猜到这个标签是什么标签了,没错,他是一个进度条.在HTML5中我们终于可以不用模拟了. <progress id="W3Cfuns_pr ...
- html5 video标签屏蔽右键视频另存为的js代码-HTML5教程
点评:html5 video标签本身有下载功能但是在video区域内,点击右键可以将“视频另存为”下面是屏蔽右键视频另存为的js代码,有此需求的朋友不要错过 做HTML5的video标签,本身我们 ...
- ios加载html5 audio标签用js无法自动播放
html5 audio标签在ios 微信浏览器中是无法自动播放的,最近在做一个小的项目遇到这个问题,安卓和pc都是正常的,唯独ios不行,查阅了很多资料,找到了以下方法,也许不是最好用的方法,如果有更 ...
- 让ie浏览器支持html5新标签的解决方法(使用html5shiv)
没估计错的话旧版浏览器都是不识别这些新增的标签所以都是用行内元素来处理解决的,所以,有一个解决办法的突破口就是让它变成块状元素就不会处于同一行了,这样在新旧浏览器都是可以显示同样的效果,再者就是让浏览 ...
- 解决html5中标签出现的不兼容的问题
HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单. HTML5的新标签元素有: <header&g ...
- 【HTML5】如何处理HTML5新标签的浏览器兼容版问题
HTML5规范毕竟是刚刚才定义完成的规范,还有一些浏览器并不能支持其中的新标签和新属性,尤其是IE8及以下版本浏览器.以下介绍一些在页面中使用HTML5新标签的实践方法,目的是让HTML5中的新标签在 ...
- HTML语义化:HTML5新标签——template
一.前言 当我们使用String-base的模板引擎(如Handlebars.js等)时,要么就通过外部文件存放模板文本,需要时再通过XHR或script标签加载进来:要么通过<script t ...
随机推荐
- iOS 域名解析
如何在iOS下进行域名的解析? /** * 域名解析ip * * @param hostName 域名 * * @return ip */ +(NSString *) getIPWithHost ...
- Android http Request / Response ContentType
客户端在进行http请求服务器的时候,需要告诉服务器请求的类型,服务器在返回给客户端的数据的时候,也需要告诉客户端返回数据的类型. 这个类型就是 ContentType ,不同的ContentTy ...
- UIView的几个layout方法
iOS layout的相关方法: 1,layoutSubviews 2,layoutIfNeeded 3,setNeedsLayout 4,setNeedsDisplay 5,drawRect 6,s ...
- IOS开发基础知识--碎片18
1:initWithFrame方法的理解 . initWithFrame方法是什么? initWithFrame方法用来初始化并返回一个新的视图对象,根据指定的CGRect(尺寸). 当然,其他UI对 ...
- IOS 日期的简洁格式展示
首先我要解释一下标题的意义,日期的简洁格式展示,之所以简介,是因为让人一目了然,不需要思考是什么时候. 在详细一点就是我们在微信朋友圈中 所看到的时间格式. 例如:刚刚 -几分钟前-几小时前等等. 今 ...
- Sphinx安装配置应用
Sphinx 是由俄罗斯人Andrew Aksyonoff开发的一个全文搜索引擎.意图为其他应用提供高速.地空间占用.高结果相关度的全文搜索功能.Sphinx可以非常容易的与SQL数据库和脚本语言集成 ...
- Redhat Server 5.7 安装配置PHP
PHP的简介 PHP于1994年由Rasmus Lerdorf创建,刚刚开始是Rasmus Lerdorf 为了要维护个人网页而制作的一个简单的用Perl语言编写的程序.这些工具程序用来显示 Rasm ...
- Linux strace命令
简介 strace常用来跟踪进程执行时的系统调用和所接收的信号. 在Linux世界,进程不能直接访问硬件设备,当进程需要访问硬件设备(比如读取磁盘文件,接收网络数据等等)时,必须由用户态模式切换至内核 ...
- p2p tcp nat 原理图+源码(原创)
现今网上p2p的 udp nat穿透 文章 多如牛毛, p2p tcp nat的文章寥寥无几 ,up主研究了几天 终于有所收获,特来向大家分享,请大家多多支持! 1.首先你要有台外网服务器 或者 电信 ...
- ununtu设置开机启动服务-手工将Tomcat设为自启动服务
配置Ubuntu Server,上面装了一Tomcat7,希望在服务器电源打开后,希望没有登录的情况下也可以自动启动Tomcat 1.编写启动文件/etc/init.d/tomcat7 tomcat7 ...