带有数字的进度条

最新推荐文章于 2023-04-20 15:49:21 发布

hellopapapa3

最新推荐文章于 2023-04-20 15:49:21 发布

阅读量895

点赞数 1

文章标签： js 进度条百分比数字

本文链接：https://blog.csdn.net/u013056785/article/details/50954709

版权

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>进度条</title>
</head>

<body>
<div class="haha">
<img src="4rm6ph10xvwe.jpg">
<div class="jindu" style="background-color:#eee;color:#222;height:16px;border:1px solid #bbb;text-align:center;position:absolute; width:300px;top:0;left:0;"></div>
<div class="txt" style="height:16px;position:absolute;left:0;top:0;width:100%;line-height:16px;z-index:100;"></div>
<div class="xixi" style="background-color:#6CAF00;height:16px;position:absolute;left:0;top:0;z-index:10;"></div>
</div>
<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
<script>
window.οnlοad=function(){
$('.xixi').animate({width:"300px"},15000);
var int=setInterval(clock,100);
function clock(){
var w=$('.xixi').width();
var p=(w/3).toFixed(2);


$('.txt').html(p+"%");
if(p==100){
	window.clearInterval(int);
	}
}
}
</script>
</body>
</html>

优惠劵

hellopapapa3

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
带有数字的进度条

进度条window.onload=function(){$('.xixi').animate({width:"300px"},15000);var int=setInterval(clock,100);function clock(){var w=$('.xixi').width();var p=(w/300).toFixed(2);var pp=p*100;
复制链接

扫一扫