【构想】
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: 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代码
<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>
更多专业前端知识，请上
【猿2048】www.mk2048.com今天的文章Js 百分比进度条分享到此就结束了，感谢您的阅读，如果确实帮到您，您可以动动手指转发给其他人。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/29509.html
