下载进度的制作
Posted winteronlyme
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了下载进度的制作相关的知识,希望对你有一定的参考价值。
这两天做了一个小项目,里面有个下载进度的进度条需要制作。
先看呈现的效果:
点击进度,然后依次递增,直到递增到百分之百。
现在把这部分代码分享下来。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../js/jquery.js"></script> <style> .app_download { display: block; width: 50px; height: 25px; line-height: 25px; color: #de3a58; text-align: center; border: 1px solid #de3a58; border-radius: 25px; position: relative; overflow: hidden; } .app_progress { position: absolute; bottom: 0; left: 0; width: 100%; background-color: #de3a58; color: #000; font-weight: normal; } .progress_txt { width: 50px; height: 25px; text-align: center; position: absolute; top: 100%; left: 50%; margin-left: -25px; margin-top: -25px; } </style> </head> <body> <a class="app_download" href="javascript:;"> <b class="app_progress app_normal" style="height: 0%"> <span class="progress_txt">0%</span> </b> </a> <script> $(\'.app_download\').bind(\'click\', function () { var process = $(this).find(\'b\'); var bartimer = setInterval(function () { setProcess(process); if (process.find(\'span\').text() == "100%") { clearInterval(bartimer); } }, 100); }); function setProcess(a) { var processbar = a; var pHeight = parseFloat(processbar.find(\'span\').text()) + 1; processbar.find(\'span\').text(pHeight + "%"); processbar.height(pHeight + "%"); } </script> </body> </html>
欢迎指正。
以上是关于下载进度的制作的主要内容,如果未能解决你的问题,请参考以下文章