极客观点
项目管理
HarmonyOS
简单写了一个假的进度条插件，但是不知道如何进一步封装在项目中使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>进度条</title>
<style>
.wrap-content{
position: relative;
display: none;
}
div.progress{
width: 618px;
height: 66px;
background: url("img/loading_bg.png") no-repeat;
}
.progress-bar{
width: 0;
height:20px;
position: absolute;
top: 12px;
left: 14px;
display: block;
border-radius:15px;
}
.percent{
color: #fff;
font-size: 16px;
position: absolute;
left: 494px;
top: 34px;
display: none;
}
</style></head>
<body>
<div class="wrap-content">
<div class="progress" id="progress">
<img src="img/loading_in.png" alt="" class="progress-bar" id="progress-bar">
<span class="percent" id="percent">100%</span>
</div></div>
<h1><input id="load_btn" type="button" value="调用进度条"></h1>
<script src="jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="progress.js"></script>
</body>
</html>
$(function () {
$("#load_btn").on("click", function () {
$(".wrap-content").css("display","block");
$("#progress-bar").css({
"display": "block",
"width": "40px"
});
$(".percent").css("display", "block").text("6%");
var test = setInterval(function () {
var $progress_bar = $("#progress-bar"),
percentage,
progress_bar_width = $progress_bar.css("width");
progress_bar_width = parseInt(progress_bar_width) + 5 + "px";
if (parseInt(progress_bar_width) >= 590) {
clearInterval(test);
}
percentage = Math.floor(parseInt(progress_bar_width) / 590 * 100);
$(".percent").text(percentage + "%");
$progress_bar.css("width", progress_bar_width);
}, 300);
})});
简单的一点封装，就是把里面涉及到的 id ,class 等等元素，通过this, find ,parents 等，去实现。
最后调用这个方法，只要传一个最大的元素id或class进去。
这样可以复用。