zoukankan      html  css  js  c++  java
  • 下载进度的制作

    这两天做了一个小项目,里面有个下载进度的进度条需要制作。

    先看呈现的效果:

    点击进度,然后依次递增,直到递增到百分之百。

    现在把这部分代码分享下来。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="../js/jquery.js"></script>
        <style>
            .app_download {
                display: block;
                 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;
                 100%;
                background-color: #de3a58;
                color: #000;
                font-weight: normal;
            }
    
            .progress_txt {
                 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>
    

    欢迎指正。

  • 相关阅读:
    java web 开发入门
    程序优质网站
    为什么要放弃ssh框架
    JDK核心源码(2)
    Linux 格式化分区 报错Could not stat --- No such file or directory 和 partprobe 命令
    快照COW
    磁盘检测SMART工具
    python学习-3.一些常用模块用法
    python 学习2:生成器,迭代器,装饰器
    关于对SwfUpload的改造
  • 原文地址:https://www.cnblogs.com/winteronlyme/p/7422788.html
Copyright © 2011-2022 走看看