【构想】
CSS3 JS
CSS3控制进度
利用CSS3中的 @keyframes
JS实现百分比
根据CSS来调整，时间
【页面代码】
第一种:
默认直接进入就是下载
CSS代码
代码语言：javascript复制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: 0;
}
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代码
代码语言：javascript复制<div class="container">
<div class="notice"id="notice">
奴家,正在~客官不要急啦~(づ￣ 3￣)づ
</div>
<div class="progress">
<div id="progress-bar">
</div>
</div>
</div>JS代码
代码语言：javascript复制 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
代码语言：javascript复制<!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>
