HTML 5 进度条

小鱼儿 2021-09-17 01:16 472阅读 0赞

.pro progress{
    			-webkit-appearance:none;
    		}
    		.pro ::-webkit-progress-bar{
    			border:1px solid cyan;
    			border-radius: 4px;
    		}
    		.pro ::-webkit-progress-value{
    			background-color: #34538b;
    		}
    		.pro ::-moz-progress-bar{
    			background: #34538b
    		}
    		.pro ::-ms-fill{
    			background: #34538b
    		}

<section class="pro">
    		<progress>
    			进度条用于表示某个任务的完成程度,比如文件下载,文件下载到本地的进度值可以
    			使用1-100的值,也可以百分比
    		</progress>
    		<p id="pTip">开始下载</p>
    		<progress value="0" min="0" max="1024" id="proDownFile"></progress>
    		<input type="button" value="下载" id="btn">
    	</section>

<script>
    		var num = 0;
    		var timer = null;
    		btn.onclick = function(){
    			timer = setInterval(function(){
    				num++;
    				if (num > 1024) {
    					clearInterval(timer);
    					pTip.innerHTML = '下载完成';
    				}else{
    					pTip.innerHTML = '已下载'+Math.ceil(num / proDownFile.max * 100)+'%';
    				}
    				proDownFile.value = num;
    			},10)
    		}
    	</script>

发表评论取消回复

表情：

评论列表（有 0 条评论，472人围观）

还没有评论，来说两句吧...

相关阅读

相关 HTML+CSS实现静态进度条

> 本章教程，介绍如何使用html+css实现静态进度条。目录 1、HTML代码 2、CSS代码 3、效果展示 -------------------- 1、H

谁借莪１个温暖的怀抱￠/ 2023年10月09日 23:57/ 0 赞/ 8 阅读

相关 HTML5 Canvas 圆形进度条并显示数字百分比

HTML5 Canvas 圆形进度条并显示数字百分比原文链接：`https://www.cnblogs.com/moqiutao/p/6430079.html` 效

雨点打透心脏的1/2处/ 2023年01月09日 14:27/ 0 赞/ 157 阅读

相关 html资源文件记载进度条,HTML5矢量实现文件上传进度条

在HTML中，在文件上传的过程中，很多情况都是没有任何的提示，这在体验上很不好，用户都不知道到时有没有在上传、上传成功了没有，所以今天给大家介绍的内容是通过HT for Web

妖狐艹你老母/ 2022年10月05日 12:53/ 0 赞/ 271 阅读

相关 HTML5简单进度条插件

今天学习了HTML5画线条，于是有了做一个简单进度条的插件的想法先来一个实例下面是html代码 <div> <canvas id=

雨点打透心脏的1/2处/ 2022年08月02日 15:54/ 0 赞/ 233 阅读

相关 php 文件上传 (html5 flash 进度条 XXXXXX)

php 最简单的一个上传 php文件上传是非常简单的啦,在html页面有一个表单,form标签有一个属性设置成enctype="multipart/form-data" <

╰+哭是因爲堅強的太久メ/ 2022年05月11日 09:12/ 0 赞/ 238 阅读

相关 h5圆形百分比进度条

但不支持IE浏览器：[http://www.htmleaf.com/html5/html5-canvas/201705154511.html][http_www.htmleaf

古城微笑少年丶/ 2022年04月23日 12:26/ 0 赞/ 318 阅读

相关 HTML 5 进度条

.pro progress{ -webkit-appearance:none; } .pro ::-webkit-progress

小鱼儿/ 2021年09月17日 01:16/ 0 赞/ 473 阅读

相关 HTML5 jQuery+FormData 异步上传文件，带进度条

[http://blog.csdn.net/michaelwubo/article/details/50865246][http_blog.csdn.net_michaelwu

布满荆棘的人生/ 2021年09月14日 20:06/ 0 赞/ 428 阅读

相关 HTML进度条的制作

HTML进度条的制作 1、HTML代码经验值： <span class="progress-bar"><b style="width:50px;"> </

旧城等待，/ 2021年07月24日 19:39/ 0 赞/ 582 阅读

相关 HTML 进度条

HTML5之前没有自带的进度条效果，只能通过JavaScript结合CSS模拟实现。大家知道，版本的更新通常意味着功能的增强与便利性的提高，HTML也不例外。 HT...

小灰灰/ 2020年05月15日 18:20/ 0 赞/ 997 阅读