Js 百分比进度条

时间:2025-02-18 14:08:02

【构想】

      CSS3 + JS

      CSS3控制进度

        利用CSS3中的 @keyframes

      JS实现百分比

        根据CSS来调整,时间

【页面代码】

  

  第一种:

      默认直接进入就是下载  

  CSS代码

  

body {
background-color: #f5f7f9;
color: #6c6c6c;
font: 300 1em/1.5em;
} .container {
left: 50%;
position: absolute;
top: 40%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
}
/* PROGRESS */ .progress {
background-color: #e5e9eb;
height: 0.25em;
position: relative;
width: 24em;
} #progress-bar {
animation-duration: 3s;
animation-name: width;
background-image: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55);
background-image: -webkit-linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55);
background-size: 24em 0.25em;
height: 100%;
position: relative;
} @keyframes width {
0%,
100% {
transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);
}
0% {
width:;
}
100% {
width: 100%;
}
} .container .notice {
animation: change 5s linear 0s infinite;
font-size: 15px;
margin: 10px;
} @keyframes change {
0% {
color: #4cd964;
}
25% {
color: #5ac8fa;
}
50% {
color: #007aff;
}
75% {
color: #5856d6;
}
100% {
color: #ff2d55;
}
}

  HTML代码

<div class="container">
<div class="notice"id="notice">
奴家,正在~客官不要急啦~(づ ̄ 3 ̄)づ
</div>
<div class="progress">
<div id="progress-bar">
</div>
</div>
</div>

   JS代码

  window.onload = function() {
var progressBar = {
//初始化
init: function() {
var oBar = document.getElementById('progress-bar');
var oNotice = document.getElementById('notice');
var count = 0;
//百分比计算,根据css的来
var timer = setInterval(function() {
count++;
oBar.innerHTML = count + '%';
if (count === 100) {
oNotice.innerHTML = '客官,奴家好了~(✿◡‿◡)'
clearInterval(timer);
}
}, 30);
}
};
progressBar.init();
}

  

第二种:

      进入不下载,点击下载开始下载,暂停则暂停,原理控制setInterval和cleanInterval

<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<title>进度条</title>
<style type="text/css">
#pro {
width: 0px;
height: 20px;
background-color: #cea;
text-align: center;
}
</style>
</head> <body>
<button onclick="down()">下载</button>
<button onclick="stop()">暂停</button>
<br />
<div id="pro"></div>
</body>
<script>
var count = 0;
var tid; function Progress() {
count++;
if (count == 101) {
Fn();
} else {
var oPro = document.getElementById("pro")
oPro.innerText = count + "%";
oPro.style.width = 3 * count + "px";
}
} function down() {
oStria = setInterval("Progress()", 100)
}
function stop(){
clearInterval(oStria)
} function Fn() {
clearInterval(oStria)
alert("下载完成")
}
</script> </html>