JQ加載進度條動畫
阿新 • • 發佈：2017-05-20
1.8 fixed eight clear 內容 lan har ctype clas
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box{
border-radius: 4px;
height: 8px;
width: 100px;
background: #ebebeb;
position: relative;
}
.box .line{
/*width: 20%;*/
background: orange;
height: 100%;
border-radius: 4px;
text-indent: 999px;
}
</style>
</head>
<body>
<div class="numb">20</div>
<div class="box">
<div class="line" data-load="50"></div>
</div>
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript">
var step = 1, //加載基數
status = 100, //加載步驟數
$line = $(‘.line‘),
$lineVal = $line.text(),
$attrVal = $line.data(‘load‘), //進度條屬性值
$number = parseInt($(‘.numb‘).text()),
$numberVal = parseFloat($number / status); //進度數值
$line.css(‘width‘,$lineVal + ‘%‘); //出事進度值
function watchFn() {
var self = $(this);
var showVal = $attrVal / status;
var numberHtml = parseInt($numberVal * step);
//數值小於10讓其顯示小數點後面一位
if($number < 10) {
numberHtml = parseFloat($numberVal * step).toFixed(1);
}
//設置進度條、進度數值的樣式/內容
$line.css(‘width‘,showVal*step + ‘%‘);
$(‘.numb‘).html(numberHtml);
//基數大於步驟數清空定時器
if(step >= status) {
clearInterval(timer);
}
step += 1;
}
//定時器，每個步驟15毫秒
var timer = setInterval(watchFn, 15);
</script>
</body>
</html>
JQ加載進度條動畫